This thread is resolved. Here is a description of the problem and solution.
Problem: I am using a Fields and Text block to display some text, including the post slug. I have set the text-transform property for this block to be "uppercase" but the slug always displays in lowercase.
Solution: It seems that GeneratePress includes some styles for H1 elements that includes the property text-transform: none;, and you would have to override that using custom CSS. Add the CSS class tb-uppercase-override to the Fields and Text block, then add this CSS in the template, an enqueued CSS file, or in Appearance > Customize > Additional CSS:
.tb-uppercase-override h1 {
text-transform: uppercase;
}
That will override the GP theme style.
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 10 replies, has 2 voices.
Last updated by 3 years, 11 months ago.
Assisted by: Christian Cox.
Dear Sir/Madam,
I add a Fields and Text to a content template, I want to set the Text Transform to all Uppercase but I don't see the text being uppercase. Please advise how I can fix.
Best regards,
Kelvin.
I had a spelling error in my hosts file, sorry. I am able to log in now. I see the problem, it seems that the GeneratePress theme includes a style for all H1 elements text-transform:none; and that is overriding the Blocks style applied to the Fields and Text block. You could try a different format other than Heading 1 in the Fields and Text block, or you could override the theme's H1 style by adding a CSS class to the Fields and Text block like tb-uppercase-override. You must press "Return" or "Enter" to apply the CSS class (see the screenshot, it looks like a grey rectangle when added successfully). Then add some CSS to override the GP text decoration:
.tb-uppercase-override h1 {
text-transform: uppercase;
}
