This thread is resolved. Here is a description of the problem and solution.
Problem: I am using the Block Editor to design a View's loop. I'm able to choose a text color in the Fields and Text block, but that color does not show up on the front-end of the site.
Solution: In this case, it appears that the Divi theme is adding some global styles that conflict with those added in the Fields and Text block. To get around that, you'll need custom CSS with more specificity.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 6 replies, has 2 voices.
Last updated by 4 years, 9 months ago.
Assisted by: Christian Cox.
Tell us what you are trying to do? change the color text
Is there any documentation that you are following? its simple but its not working
Is there a similar example that we can see?yes
What is the link to your site?hidden link
so when i changed the color on the field group typography area I dont see it changed to the color I wanted but instead it stayed in the black color settings, I need this to change to purple so i can make the background container full black background cause the text needs to display.
Okay I see what's happening here, it looks like the Divi theme has applied some CSS that sets the color of h1, h2, h3, h4, h5, and h6 HTML elements to be #333, which is a very dark gray that looks practically black. This style from the theme is overriding the style you apply in the visual editor here, but we can add some code to fix that.
Use the Block Navigation menu to select the top-level View block (see block-nav.png). In the block settings (usually the right-side column), open the Custom JS and CSS panel and paste the following code in the CSS editor:
.tb-fields-and-text h2 {
color: inherit;
}
Save this and check the View on the front-end of the site. This code should prevent the Divi styles from overriding the styles you apply in the visual editor area, and it should show up purple. Let me know if this doesn't solve the problem for you and I can take a closer look.
