|
Omar Paloma
|
September 11, 2021 at 9:28 am
I can’t get the styling to work on my site. The table rows and legend description text color are sometimes white on white. Sometimes it starts out black then changes to white once the page is fully loaded. I can see, looking at the CSS via “inspect element ” that the css is being inherited from #et-boc > div > div > div > div > div > div.et_pb_module.et_pb_text.et_pb_text_9.et_pb_text_align_left.et_pb_bg_layout_light > div > div > div > table
But I cannot figure out how to change the CSS no matter what I do.
Can you help?
|
|
Omar Paloma
|
September 11, 2021 at 9:31 am
This reply has been marked as private.
|
|
Tony
|
September 13, 2021 at 4:44 am
Hi there,
Seems Divi is set to load a dark layout, but then your site is loading white. There are more sections than just Event Espresso being affected by this.
The above selector isn’t the correct one for this issue, it’s:
.et_pb_bg_layout_dark,
.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark h4,
.et_pb_bg_layout_dark h5,
.et_pb_bg_layout_dark h6 {
color: #fff!important;
}
To fix the issues specifically with EE My Events section you can use something like this:
.et_pb_bg_layout_dark .espresso-my-events,
.et_pb_bg_layout_dark .espresso-my-events h3,
.et_pb_bg_layout_dark .espresso-my-events h6 {
color: #000!important;
text-align: left;
}
You can add that in Divi’s custom CSS section.
However, I’m not sure why Divi is set load as a dark theme/layout and then text is being manually fixed when this happens, seems you don’t actually need a dark layout?
|
|
Omar Paloma
|
September 18, 2021 at 7:12 am
That zoomed past my CSS knowledge. I can add the this to the Custom CSS pages but I am curious.. I know you are NOT tech support for Divi, but how did you determine that Divi was loading a dark layout? For sure, not my intent and I’ll want to change that globally and any knowledge my may have could help.
|
|
Tony
|
September 20, 2021 at 5:41 am
For dark mode:
I don’t use Divi but I saw the body class .et_pb_bg_layout_dark and then combined that with the fact that the font is being set to use a light colour (white).
Googled the above .et_pb_bg_layout_dark class which led me to a couple of discussions on a Divi dark theme and to here:
https://www.elegantthemes.com/blog/divi-resources/how-to-switch-to-a-dark-layout-in-5-steps-using-divis-efficiency-features
—-
For the CSS solution, I used Chrome Dev Tools to see what styles were being applied to the elements I knew were missing. This comes from experience but isn’t complicated, it just takes a little trial and error.
So right-clicking on a section I knew should have a legend item and did inspect element, that opens up Chrome dev tools on that section. This is where a little experience is needed, you navigate through the elements to find one (I used the Approved legend) and take a look at the styles being applied.
I can see you have a white background so I’m looking for anything explicitly setting the colour to white, then I found this:
https://monosnap.com/file/GmdD7a5xUkliD40yYauSbMlfrvZIKd
Disabling that (hover over the ‘color’ and a checkbox will appear) started to fix the text, so from there I knew what I needed to override.
!important makes it harder to override so I need a selector that is more specific to the text I’m ‘fixing’ than the one that is currently in use.
See here for details on CSS specificity:
https://www.w3schools.com/css/css_specificity.asp
Then I come up with the above by basically copying the selector I found earlier and making it more specific, using .espresso-my-events class to target text within the ESPRESSO_MY_EVENTS output.
Does that help?
|
