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, 10 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 months 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, 2 months 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. 10 years, 2 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. 10 years, 2 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. 10 years, 2 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. 10 years, 1 month ago Sebastian

    Hi Andrew,

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

  7. 10 years, 1 month 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. 10 years, 1 month 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. 10 years, 1 month 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. 10 years, 1 month ago Sebastian

    1. It is from the SiteOrigin Widgets Bundle!

  11. 10 years, 1 month 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. 10 years, 1 month ago Sebastian

    Hey Andrew

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

  13. 10 years, 1 month 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. 10 years, 1 month ago Sebastian

    Thanks :)

  15. 10 years, 1 month 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