[Resolved] CSS Style for “Before text” in Headline/Post Meta block?

[William]

Aloha 🙂

Do you all have a secret CSS style that targets the “Before text” in Headline/Post Meta block?

It’s a bit beyond my skill level.

I just want to bold and color if possible 🙂

Example: https://cssopps.flywheelsites.com/internships/partners-in-development-foundation/

Much thanks as always!

-Bill

[Fernando]

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! 🙂

[William]

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

[Ying]

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

[William]

Aloha Ying,

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

Example: https://ibb.co/Jz1kV6t

Would you strongly advise against this?

It seems to work 🙂

https://cssopps.flywheelsites.com/internships/honolulu-complete-streets/

Thank you!!

-bill

[Ying]

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

That’s a genius move 😛

Would you strongly advise against this?

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

[William]

I taught you something!??!?

OMG – I can RETIRE now!! 🙂

You made my day – Thanks Ying!

You the best!

-bill

[Ying]

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 😛

[Author]

Posts