Add Text Before or After Module Headers

[Jen]

I just had a member on JenSocial ask this question, and thought it warranted a great quick and dirty CSS tip.

 

He wanted to change his home page Video Module title to "Featured Videos". When he changed via the Language Editor, it got confusing and was changed in more places than he wanted.

 

Here's a nice way around a situation like this. You can use the CSS property called: content, to add text or an image, before or after any CSS element. For example in this case:

 

Add this code to your Advanced CSS, via My Network/Settings/Appearance:

.xg_widget_main .module_video .xg_module_head h2:before {content:'Featured ';}

 

This will change your Video Module header from Videos to Featured Videos.

 

You can also add images. A nice place to do this on a Ning site is before or after the main page headers. You need to add a small image, like an icon 16 by 16. Here's the example code:

 

.xg_headline .tb h1:before { content: url(yourimagelink); }

 

Enjoy,
Jen

[Emmanuel Ace]

THANKS..nice tip

[Spyro]

BIGGGGGGGGGGGGGGGGGGGGGGGGGG

 

Great tip, still can find the modules for activity, groups, leaderboards but it works fine with blog posts, events, forum and videos...

 

thank you for that

[Steven]

thanks, Jen! i had that same issue with Featured Videos and now i can change it.

[Jen]

Happy to hear this is helpful to you all!

Best,

Jen

[Spyro]

Hi Jen. You shared a tip a while ago for adding images in module headers... I tried to find it with no luck :(

[manyspears]

Great trick, thanks for sharing. Is there a bit of code that will actually replace the title with this text?

For example, rather than the app box on the Main Page reading "Blog Posts" I'd like to change it entirely to "Member News."

 

 The before: and after: operators are useful- but how do you replace :)