Home>Support>Using CSS inside Page Builder Widget

Using CSS inside Page Builder Widget

By kdm-site, 7 years ago. Last reply by Andrew Misplon, 6 years ago.

I’d like to use some styling in Page Builder widget and have read: https://siteorigin.com/page-builder/documentation/styling-page/

I’m not sure what to do. Ultimately I’d like to change the border width on a Visual Editor widget.

Thanks.

URL: http://bureau.langleyharper.com/

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

  1. 7 years, 2 months ago Andrew Misplon Hi, I Work Here

    Hi Kdm-site

    After inserting the Visual Editor widget you can click the Design tab on the right and select a border color. You can then click the Attributes tab and add the following into the CSS Styles field:

    border-width: 3px

    or if it’s for many widgets you need this for, rather add a CSS Class Name, any name of your choosing:

    extra-border

    Then go to Appearance > Custom CSS and target that class name:

    .extra-border { border-width: 3px !important; }

    We need the !important when using Appearance > Custom CSS.

    So two options, same result, hopefully.

  2. 6 years, 6 months ago svanboeyen

    What if you’re already using the attributes tab to centre the title of the widget? For example, I’ve got ‘widget-title’ as my widget class and ‘text-align: center;’ in the CSS styles section.

    On another note, I tried adding the ‘.extra-border { border-width: 3px !important; }’ code to my custom CSS and it didn’t work :(

    Any work around for this?

    • 6 years, 6 months ago Andrew Misplon Hi, I Work Here

      Hi Svanboeyen

      We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.

      Page: New Thread

      If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.

      If you post the link to your new thread here once it’s open I’ll push it up the queue.

  3. 6 years, 1 month ago Bahril Ilmi

    Screenshot_179

    please helpme.. how to change the red border size above with 3 px? thank you..

    • 6 years, 1 month ago Andrew Misplon Hi, I Work Here

      Hi Bahril

      Thanks for reaching out. We’ll reply in the thread you opened shortly.

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