[Resolved] Can’t get Typography Manager > Target Element > Custom to work.

[Thierry]

Hi,

i did all of the steps as explained here: https://generatepress.com/forums/topic/change-font-on-a-specific-paragraph-container/
but i can’t get it to work.

This is my site (under construction): https://gen.leadway.be/
In my Style page, look for the paragraph at the top that says testtesttest. That’s the one i’m trying to target.
What could possibly be going wrong?

Thank you.

Thierry

[Ying]

I can see you’ve added my-cust-title-large class to the paragraph, but I don’t see the CSS you are supposed to add.

I checked customizer > additional CSS and your child theme style.css.

So you are missing this step: https://generatepress.com/forums/topic/change-font-on-a-specific-paragraph-container/#post-2208450

[Thierry]

Hello Ying,
Ow yes now i understand.

Thing is I have no clue of CSS so what should I typically add there?
Just the font I want to use and it’s weight? Effects like a shadow? Or also size? Color? I mean what is the minimum required? Since I can set the font type, weight, size etc in the customizer. No special effects like a shadow whatsoever.
I just want to use:
Font:Graphik, weight:300, size:18px, line-height:1em, letter-spacing: 0,2em, all Uppercase. But nothing else.

Thank you.

[Fernando]

Hi Thierry,

If it’s Font related – like font-size and font-family, you can follow the step here: https://generatepress.com/forums/topic/change-font-on-a-specific-paragraph-container/#post-2207259

So in your case, go to Appearance > Typography, and do something like this but something to your preference: https://share.getcloudapp.com/6quGvxoG

[Thierry]

Hey Fernando,
i’m confused as to where i should define how that text should look:
– With Customizer > Additional CSS?
– Or with Customizer > Typography > Add Typography > Other > Custom > and then use the options provided there?

I mean, i now, just for the sake of testing, added
.my-cust-title-large {
text-shadow: 2px 2px 8px #FF0000;
}
under Additional CSS.

But when i go to Customizer > Typography i can’t use any of the settings provided there while when i read this article i had the impression it should be possible. But it looks like it’s not. So should i create that completely and only with CSS and not bother with Typography settings under Customizer? Or is there still something i’m missing here?

Thank you.

[Ying]

The typography system allows you to set font family, font size, font weight, letter spacing, line height, text-transform.

If you want to set the above styles for the custom selector .my-cust-title-large, you can, like this:
https://www.screencast.com/t/jzzFtxMHLC

But if you want to add text-shadow or other effects, it will require CSS.

So in your case, add this CSS to customizer > additional CSS:

.my-cust-title-large {
text-shadow: 2px 2px 8px #FF0000;
}

And all the text blocks that have this class added will have the text-shadow.

[Thierry]

Ying, Fernando,
we’re running in circles and sure it might be due to my ignorance but as i said, when i do as shown in the screencast you just added in you last answer, that does not change a thing. No matter what i do, that text does not change at all.
I don’t want to add any shadow or whatsoever. Can you please either show or explain every step by step, or alternatively fix this for me since i provided you with admin credentials?

[Ying]

No matter what i do, that text does not change at all.

You missed a dot in the customizer, please check my screenshot and reply carefully, there’s a dot in front of the class!
https://www.screencast.com/t/8OSnL06dd36Y

[Thierry]

Perfect! Now it works. Yes i missed that dot indeed, but as i said in a previous reply, i have absolutely no clue of CSS so i had no idea that dot was intended or important. As i said, my ignorance.
Thanks for your time and support Ying. Case closed 🙂

[Ying]

You are welcome 🙂

[Author]

Posts