This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

center the content of the service box widget

Resolved 15 replies pluginplugin-page-builderpremium
Sebastian
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

15
  1. Magus Staff 10 years, 10 months ago

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

    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. Magus Staff 10 years, 10 months ago

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

    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. Andrew Misplon Staff 10 years, 9 months ago

    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. Sebastian 10 years, 9 months ago

    Hi Andrew,

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

  7. Andrew Misplon Staff 10 years, 9 months ago

    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. Sebastian 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    For sure:

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

    2. Super, glad that helped :)

  10. Sebastian 10 years, 9 months ago

    1. It is from the SiteOrigin Widgets Bundle!

  11. Andrew Misplon Staff 10 years, 9 months ago

    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. Sebastian 10 years, 9 months ago

    Hey Andrew

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

  13. Andrew Misplon Staff 10 years, 9 months ago

    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. Sebastian 10 years, 9 months ago

    Thanks :)

  15. Andrew Misplon Staff 10 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread