Skip Navigation

[Resolved] Put the H1 in text-transform: none

This support ticket is created 3 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 4 replies, has 3 voices.

Last updated by frederiqueC 3 years, 1 month ago.

Assisted by: Waqar.

Author
Posts
#2183535

I am trying to:
Put the H1 in text-transform: none
To create the H1, I use the "container" block of Toolset to have a nicer effect.
The problem is, I can't get the H1s to text-transform: none. They are still capitalized and I hate that.

Link to a page where the issue can be seen:
For exemple : hidden link

I expected to see:
I want to H1 in text-transform : none

Instead, I got:
I have H1 in text-transform : capitalize

#2183777

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2021-09-30 at 15.23.34.png

The text-transform rule is being imposed by Elementor kit rules rather than Toolset.

I'm afraid you will need to add some custom CSS to counteract its CSS rule (unless you can find a setting that will prevent it being added in the first place).

#2183795

Hi Nigel,

I tried with h1 {text-transform: none;} in the template's custom CSS but I can't.
I'll contact Elementor if it's from them.
Which seems strange to me since I go through a toolset container and not through Elementor.

I come back to you as soon as I have an answer that results in what I want.

Thank you for your reply.

Regards
Frédérique

#2184359

Hi Frédérique,

Thanks for writing back.

Active theme and plugins can all collectively include CSS styles to the website, which are applied as a whole and not just to specific sections.

For example, this is the code that is responsible for 'capitalizing' the H1 headings, and it is part of a file loaded by Elementor:
( file: {yourwebsite.com}/wp-content/uploads/elementor/css/post-1450.css )


.elementor-kit-1450 h1 {
    color: #3F3A64;
    font-family: "Jost", Sans-serif;
    font-size: 76px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.1em;
}

To override that, using custom CSS code, you can use:


.elementor-kit-1450 h1 {
	text-transform: none !important;
}

Note: Elementor's official support team will be in a better position to assist you in how the styles are included in that CSS file.

regards,
Waqar

#2184473

Finally, I found the solution on my own after Elementor's agents made it clear to me to fend for myself. Short!
I just had to add a line of custom code in the "Elementor" extension.
It was too simple that I hadn't even thought about it.

Here the support is much more efficient! I love.

Here is!
Have a lovely day everybody!

My issue is resolved now. Thank you!