Home>Support>center the content of the service box widget

center the content of the service box widget

By Sebastian, 10 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

HEI! and thanks for a great theme.

1) On my homepage I use the Service Box widget in page builder.

a) What to do? .. to center the content in middle of the widget/column? by now the content is aligned to the left side, NOT SO PRETTY!

b) How is it possible to change the layout of the Service Box Button into something similar to a customized SiteOrigin Button?

Design and layout:

Align : Center
Button theme : Wire
Button color : #42acf0
Use hover effects!
Font size : Large
Rounding : Very rounded
Padding : Medium

2) Similar challenge to point 1a) How to align the Contact Form 7 content in the middle of the column?

Greetings form norway

Sebastian

URL: http://www.besoft.no

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 days ago Magus
    Hi, I Work Here

    Hi Sebastian

    1a: The items are centrally aligned in the widget area already
    1b: You can do this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    .so-widget-service-box .service_top .content a {
  font-size: 1.3em;
  padding: 1em 2em;
  background: transparent;
  border: 2px solid #42acf0;
  color: #42acf0 !important;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.05);
  text-decoration: none;
}
.so-widget-service-box .service_top .content a:hover {
  background: #42acf0;
  color: #ffffff !important;
}

    2: Please try adding the following to your custom CSS

    .wpcf7-form p {
    text-align: center;
}

    Let us know how you get on.

    Magus

  2. 10 years, 12 hours ago Sebastian

    Hei Magus

    1a) You are right, now the alignment is correct.
    1b) The buttons look good. How to get rid of the ( > ) added to the button text ???
    2) The custom css had no impact on my contact form.

    Thanks for your support.

    Sebastian

  3. 9 years, 11 months ago Magus
    Hi, I Work Here

    Hi Sebastian

    I cannot see where you have added that snippet. If it does not work please try adding the following instaed

    .wpcf7-form p {
    text-align: center !important;

    Magus

  4. 9 years, 11 months ago Sebastian

    Hei Magus

    Thanks for your support so far.

    1b) Now my main challenge is to get rid of the ( > ) added to the button text!!!

    2) You are right ;) I took the snippet out, after I realized that it had no effect on the contact form alignment. Now you new suggestion is in place, but unfortunately without a result.

  5. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi Sebastian

    Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.

    https://siteorigin.com/about/forum-thread-prioritization/

    Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.

  6. 9 years, 11 months ago Sebastian

    Hi Andrew,

    I would love to get some more support on my issue.

  7. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hey Sebastian :)

    1. Is the “>” not in the button text itself? This is how it looks in HTML view:

    <a class="btn_style clearfix" href="/behandling/" role="button">LES MER ></a>

    2. Your Custom CSS starts to run into errors at the end. Please find this section:

    .so-widget-service-box .service_top .content a:hover {
  background: #55B942;
  color: #ffffff !important;
}@media (min-width:320px) and (max-width:480px)
  
/* Contect form 7 align center */
  .wpcf7-form p {
    text-align: center !important;

    And correct as follows:

    .so-widget-service-box .service_top .content a:hover {
  background: #55B942;
  color: #ffffff !important;
}
  
/* Contect form 7 align center */
.wpcf7-form p {
	text-align: center !important;
}

    Did you need the media query? I removed it.

  8. 9 years, 11 months ago Sebastian

    Hei, thanks for your support :)

    1. No the ">" is not in the button text itself. It is added by the "Service
    Box" widget! How can I access the HTML to get rid of the ">" ? p.s. I'm not familiar with HTML, but maybe it is a simple task.. anyways.

    2. I cleaned up my CSS, and now my requests (contact form in center) are fulfilled, wonderful.

  9. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure:

    1. Is that our widget or made by another developer?

    2. Super, glad that helped :)

  10. 9 years, 11 months ago Sebastian

    1. It is from the SiteOrigin Widgets Bundle!

  11. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hey Sebastian

    I think it’s part of this plugin: https://wordpress.org/plugins/addon-so-widgets-bundle/. It’s built on our Widgets Bundle API but isn’t made by SiteOrigin.

    Sorry for the confusion.

  12. 9 years, 11 months ago Sebastian

    Hey Andrew

    Your are right. Is there a way to get rid off the ">" anyways?

  13. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Sorry, really not sure. I’d recommend opening a thread on the plugin support page. Hopefully the developer can assist. He’s usually very helpful.

  14. 9 years, 11 months ago Sebastian

    Thanks :)

  15. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure, hope you’re able to make progress with this.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More