Archived topic
CSS Style for "Before text" in Headline/Post Meta block?
7 replies · Started by William on March 29, 2022
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
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
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
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