I’m trying to get rid of the border around the widget pagebuilder has created. I follow the documentation to add my own class, which works in the sense that it shows up in the class menu now. I placed the custom CSS directly below the ‘wide-grey’ CSS and it didn’t have any effect. I also tried replacing the ‘wide-grey’ CSS in the stylesheet with my own settings (such as font colour, border set to none etc) with no effect. Is there a different CSS style sheet i should be looking at. how can I remove the border and chage the css to my own?
PageBuilder custom style/class
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Here is the code i’ve added to panels.php:
function vantage_panels_row_styles($styles) { $styles['wide-grey'] = __('Wide Grey', 'vantage'); return $styles; } add_filter('siteorigin_panels_row_styles', 'vantage_panels_row_styles'); function vantage_panels_row_styles1($styles) { $styles['gr-white'] = __('Green Rock white', 'vantage'); return $styles; } add_filter('siteorigin_panels_row_styles', 'vantage_panels_row_styles1');Hi Ryan
Here is our documentation on adding your own style, perhaps that’ll help:
https://siteorigin.com/page-builder/theme-integration/
Hi Andrew,
Tried following these steps earlier but to no avail.
As mentioned, I’ve got the new Class listed in the drop down menu but the CSS is not being applied to the widget
Please paste your CSS in here.
.panel-row-style-gr-white{ background:transparent; border-top:0px solid; border-bottom:0px solid; text-color: #FFFFFF; } .layout-full .panel-row-style-gr-white{ margin: 0 -1000px; padding: 25px 1000px 25px 1000px; }Thanks for the info. Can you send through a link to where you’ve applied this row style.
To confirm this row style will only apply to the two and not the widgets in them specifically.
I’m working on the site in a local only environment currently. Would you mind explain the last bit again? I don’t fully understand sorry.
The CSS is located in the Vantage stylesheet, just underneath this code near the bottom:
/* =Some row styling for page builder ----------------------------------------------- */ .panel-row-style{ zoom:1; margin:0 -20px; padding:25px 20px; background-position:center center; background-repeat:no-repeat; } .panel-row-style:before{ content:''; display:block; } .panel-row-style:after{ content:''; display:table; clear:both; }See the wide grey row under the slider here: http://demo.siteorigin.com/vantage/. The row style is only the background color and the border, it doesn’t apply to the headline widget within that row. That’s all I’m referring to. You could make it do that with more specific CSS but it’s not doing that right now.
Your own CSS should be under Appearance > Custom CSS or in the style.css file of a child theme.
Sorry, I’m not really following what you’re trying to do here. Are you just trying to remove the wide grey row style? If so you can set row style to default and it’ll be gone.
What I would like to do is have it so the widget text colour is white and to remove the top boarder of each widget
Can you send through a link to a page concerned?
I can’t send a page as i haven’t got it hosted yet. Best I can do is a screen shot. I’d like to remove the orange and yellow borders. http://postimg.org/image/5yapniyk7/
Have you tried clicking the Visual Style button, second one on the right of the row and clicking Default for the row style?
Yep, Same result except without the grey underline border. Is there a way to change the text colour through CSS?
I’ve worked out that by clicking clear on the border in visual styles colour it either removes it or sets it to transparent. So it’s just controling the font colour I’m interested in currently.
Here are the colors for the Headline Widget:
/* Vantage Headline Widget Colors */ .widget_headline-widget h1 { color: #444444 !important; } .widget_headline-widget .decoration { border-top: 1px solid #EEE; } .widget_headline-widget h3 { color: #666666 !important; }And for the Carousel Widget:
.vantage-carousel-title .vantage-carousel-title-text { color: #666; } .vantage-carousel-wrapper .vantage-carousel li.carousel-entry h3 { color: #474747; }Let me know if that helps. You can prefix every selector with
If you wanted to make this specific to the home page.
When I paste this into the custom CSS part, it doesn’t take effect.
There are other bits of custom CSS which I’m using. Does it need to be in any particular order?
Order does matter in Custom CSS but it’s hard to tell without inspecting the elements. Try adding !important. Eg:
.vantage-carousel-title .vantage-carousel-title-text { color: #666 !important; }Don’t forget to change all the colors to your own.
Forget that, tried it in a different browser and it work. Must be cacheing the old stuff.
All sorted, thank you!
For sure, glad we could help.