Sidebar widgets not displaying row and column styling

[carla]

Our goal is to create a widget element that we can reuse across multiple pages.  We are doing this by creating something on a page using the visual composer, then switching to classic mode, copying the plain text source, pasting it into a text widget element in a sidebar with only that in it, and then inserting the widget element into a page with the VC widget sidebar component.

This has worked successfully for some things.  But we noticed that our 3 column grid is not working properly.  The border, padding and margin styles that appear correctly in the original visual composer page are not being carried over into the widget.  Can you help?

[Laura]

Hello, i see the issue, you added a style to the widgets but not a global css, try this:
Edit your page and edit each section, in Extra class, add this: widget-css
Now save and go to style.css of child theme, then paste this:

COPY CODE

.widget-css .vc_row.wpb_row.vc_inner.vc_row-fluid {
    margin-right: 15px !important;
    margin-left: 15px !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    padding-top: 25px !important;
    padding-right: 35px !important;
    padding-bottom: 25px !important;
    padding-left: 35px !important;
    border-left-color: #e5e5e5 !important;
    border-left-style: solid !important;
    border-right-color: #e5e5e5 !important;
    border-right-style: solid !important;
    border-top-color: #e5e5e5 !important;
    border-top-style: solid !important;
    border-bottom-color: #e5e5e5 !important;
    border-bottom-style: solid !important;
    border-radius: 10px !important;
}
.widget-css .kleo_text_column {
    margin-bottom: 30px !important;
    height: 232px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[carla]

Hmm, although that would solve this particular issue, it doesn’t get to the root of the issue. You see, if I use the visual composer to create these rows and columns with padding, margin, border etc, the element gets assigned a code that should load in the correct styles. For example: vc_custom_1445039305628

If this appears in a normal page it works fine. However, for an unknown reason, when the same code comes in through a widget, it doesn’t use the right css.

What I’m doing is I’m creating a page layout using the visual composer, then switching to plain text view, copying the full code, then pasting that into a text widget item, which is then pulled into other pages using the widget sidebar component in VC.

Theoretically since the code is identical, the css should work, regardless of what page it appears on or whether it’s in a widget.

Any other thoughts?

[Laura]

Hello, the issues is that you are using a single class, you should use a global class so the css applies to all places.
If you add the class i said in the other post, then add the style in style.css each element that has that class will use that css
If you use the vc_custom_1445039305628 it will only apply to that one

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts