Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

Add Text Before or After Module Headers

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • THANKS..nice tip

  • 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

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

  • NC for Hire

    Happy to hear this is helpful to you all!

    Best,

    Jen

  • Hi Jen. You shared a tip a while ago for adding images in module headers... I tried to find it with no luck :(
  • 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 :)

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels