Hi there,
I’m currently using Page Builder with WordPress to attempt to build a set of pages for my website that would act as a catalogue.
Simply put, though, the widgets added using Page Builder do not seem to hook into the theme/CSS and take its style properly; rather, they appear white.
I was under the impression that widgets created in Page Builder would operate within the same visual style that widgets employed by the theme do, but I am a novice in this area and might have completely misunderstood.
Basically, I’d like the widgets on the new page to look like the widgets on the home page or blog pages.
Here’s the page we’re fiddling with:
http://www.nintendonightly.com/about/
We are using the evolve theme by Theme4Press.
Thank you!
Kind Regards,
Ryan.
I have tried using custom css; however, this overrides the css throughout the entire theme.
So it becomes clear that the widgets on page-builder pages and the widgets throughout the site are using the same css elements, etc.
But page-builder widgets seem to ignore this entirely outside of my additions to custom css.
Hi Ryan
It all depends on how the theme’s CSS was written. In some cases authors only ever anticipated widgets being used in say the sidebar, so all widget styling is sidebar specific. For example Twenty Fourteen has this problem.
You could write Custom CSS specific to Page Builder. Prefixing everything with .panel-grid for example would accomplish this. Perhaps re-look at the page source and your Custom CSS with this in mind.
So bearing in mind that I’m reasonably new to CSS: if I were to take the widget CSS, and add a new section in my custom css with the same code but with .panel-grid prefixes, that should, with a little tweaking, do the trick?
Hard to say. It would depend on what widget styling has been added to the theme. It’s worth a shot. Here is our tutorial on using the developer tool if aren’t up to speed with that.
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
Cheers for your help! I’ll see what I can do.
Interesting issue. Simply pasting the Widget CSS from the original stylesheet into the Custom CSS section and saving (I did this as a kick-off point to try and wrap my head around how the theme’s CSS operates) has resulted in the entire theme appearing white like the page-builder pages. It would seem that it’s an issue with the theme having weirdly written CSS, but I couldn’t say. I am also unsure about how to go about fixing it, but I understand that it’s not your issue.
Custom CSS just inserts CSS into your theme’s HTML head. Taking a section of the stylesheet and inserting it into Custom CSS will just state the same selectors a second time. If the stylesheet relied on the cascading nature of CSS then this could actually cause things to break.
With Twenty Fourteen (one of the default WordPress themes) there is one issue, the theme thinks all widgets have a dark background so all text and form colors are light. This is limited change I could send through to those users. I’m afraid this looks a bit deeper. I wish we had the time to dive in help resolve it but unfortunately can’t in this case.
Completely understandable; I appreciate the help you have already given, and I think I am heading in the right direction.
If you could possibly answer one question: I’m unsure of how to specify that only page-builder related widgets should read a particular CSS. I have found that textwidget is what the text widget is using for the background, and adjusting this does indeed fix it — but it also applies the same changes to the text widgets in other areas of my site, which were running fine before. Where do I want to put the .panel-grid prefix in that scenario, and are there any other page-builder prefixes that I should be aware of?
My current test CSS is:
.textwidget {background-color:#dd9933;}
Oh right, it just goes directly before, so:
.panel-grid .textwidget {background-color:#dd9933;}
That seems to have worked; I assume it’s the same for further CSS too.
Sorry to have troubled you.
That’s it. No problem at all. We’re here to help where possible.