Site logo

Archived topic

CSS Style for "Before text" in Headline/Post Meta block?

7 replies · Started by William on March 29, 2022

Viewing posts 1–8 of 8

Hi Bill,

You may achieve this through the following steps.

1. Change the font-weight and color of the Block in the Editor: https://share.getcloudapp.com/qGu7Xx2O
2. Then add Class: my-modify-text: https://share.getcloudapp.com/o0uREX5o
3. Then add this custom CSS code in Appearance > Customize > Additional CSS:

.gb-headline.my-modify-text > *{
    color:rgb(0, 0, 0);
    font-weight:normal;;
}

Kindly modify rgb(0,0,0) to your preferred color: https://www.w3schools.com/colors/colors_picker.asp

End result: https://share.getcloudapp.com/YEurXW5n

Hope this helps! :)

WOW!! Thanks Fernando!

So you're leveraging the Editor style's 'power' over the Customizer CSS rule to your advantage?

I would never have gotten that!! :)

Two follow-ups:

1) Is there any way to 'reverse' the rule? ... ie. the CSS controls the 'Post before' text rather than the Editor.

2) The CSS rule wipes my link style (color and underline) ... any way to get CSS control back?

Hover over Organization: Honolulu Complete Streets here: https://cssopps.flywheelsites.com/internships/honolulu-complete-streets/

I tried setting link color in Editor, but no luck there.

-bill

Hi William,

I don't think there's a good way to style the before text.

I can only think of the ones with a link, so the CSS could be:

.gb-headline.my-modify-text > *:not(a){
    color:rgb(0, 0, 0);
    font-weight:normal;;
}

But for text only ones, it's impossible to target.

If different style is really important, then I would recommend using theinline-width for the meta field text and before text, see the example below:
https://www.screencast.com/t/0fvSp7qGl

I wrapped the Before text in a ‘strong’ tag – then styled the strong tag

That's a genius move :P

Would you strongly advise against this?

Why would I? I learnt some smart trick from you :) Thanks!

I taught you something!??!?

OMG - I can RETIRE now!! :)

You made my day - Thanks Ying!

You the best!

-bill

You made my day too!

I just said it's impossible to target, and then you came up with this smart little idea! Love it :P

This archived topic is closed to new replies.