[Resolved] Text typography color in Block Editor does not show on front-end

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.

0% of people find this useful.

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.

This topic contains 6 replies, has 2 voices.

Last updated by chienN-3 2 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1577059

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.

#1577647

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hi, I'll be glad to take a look. Can you show me a screenshot of where you are trying to change the text color in wp-admin? Please take screenshots so I can see what properties you are adjusting. Include those in your next reply and I will give you some feedback.

#1580395

i use it on the block editor, no matter what color i choose it still stays in a black font.

#1583199

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

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.

#1595403

where do i apply this code and where did you see this css code

#1595675

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

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;
}
#1608043

the css code did not work

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/text-typography-color-in-block-editor-does-not-show-on-front-end-part-2/