Css Failure
paul.aydelott
I created a website for my church, temporarily located at https://hopein.church, and the css settings keep getting reset. I've created sections with a dark background with elements using light text. At first, I wasn't using enough contrast, so I used a lighter setting for the text. It reverted to the previous setting. I revised the page again and verified the result. When I returned a day later, the setting had reverted. I revised the page again and it reverted again.
I tried to use a global setting for my css by modifying the class in the template's custom code. Sometimes it worked; sometimes it reverted.
I created a custom class and called it in the section setting. It applied its settings to all sections on the page regardless of any additional settings, i.e. I had sections with dark background/light text and others with light backgrounds/dark text. Only one custom css class defined in custom code would apply per page.
I tried entering css code in the standard custom.css file to no avail. SP Pagebuilder has its own custom css file.
Sometimes it is very difficult to override whatever setting the code is seeing. Evidently, there must be a cache setting somewhere giving me fits, but I haven't enabled any cache on the site or on the server.
I'm at my wits end. I'm seriously thinking of recoding in Yootheme.
paul.aydelott
Accepted AnswerI gave up on trying to establish css classes to be used across sections and pages. PageBuilder apparently expects the font settings to be set directly with each element or section. So I directly formatted all my sections and elements without creating any custom code.
Too bad, but the site looks nice even if it is code-heavy.
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Glad to know that you can manage to solve your issue. By the way did you try the addon CSS option?
-Regards.
Paul Frankowski
Accepted AnswerHi Paul,
If whole site has dark background. All you need is set light color for component area.
But If you need light color for selected Areas (sections) just create custom class names and define them inside custom.css file. More in Helix Ultimage guide.
Besides I am not sure, if you noticed but we have that feature >> https://www.youtube.com/watch?v=2ew6XDZNfmo
paul.aydelott
Accepted AnswerYes, Paul. I created a custom palette. I also modified existing classes in the custom code section of the template. I created new classes to work with both light and dark backgrounds of different colors and put them in the custom code section. I applied the new, custom classes in the settings of the elements.
What I found was that the custom classes were being applied even on section and elements where I did not want them. I also discovered that removing the custom classes from the custom code section did not remove the code from the custom.css file for the template.
Part of the problem, I'm sure, is that the code didn't cascade as I had anticipated. What I was trying to do was to minimize the amount of css that I would have to specifically declare for each section and element. It just didn't work out for me even if I tried to make the changes by overriding the default preset color schemes.
I also found that when I turned on the advanced features for scss and other code optimizations, some of the custom classes that were not behaving correctly suddenly started working.
Pagebuilder is an amazing tool, and it's very complex. Maybe I ran into something that doesn't work as I anticipated; maybe it doesn't work as the designers anticipated; maybe I was doing something incorrectly. Regardless, I did a lot of redundant styling, but it works.
Pavel
Accepted AnswerHi @paul.aydelott.
I believe that the only reason for your problems can be in your mistakes in CSS or in insufficiently strong selectors. With normal CSS skills and understanding how everything works, there are never such problems.
Perhaps you should describe your full work process (at least on the example of one section) so that someone can see your mistakes.
And make sure that Plugins > System - Cache plugin is OFF
I also found that when I turned on the advanced features for scss and other code optimizations, some of the custom classes that were not behaving correctly suddenly started working.
I suppose you mean Helix settings. These settings do not affect SP PB and do not belong to it.
If you want to use the template settings in combination with your CSS code, turn on the Compile SCSS to CSS option . If you want to do everything through your CSS code only, better turn off this option and do not activate any Helix preset.
Tips:
Never use CSS/JS compression in Helix. This feature is very raw and can cause problems.
If you are not going to use custom.css, then delete this file. Its existence creates an extra request to the server which is not needed in this case.