Add Text Before or After Module Headers

I just had a member 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:

 

To add title text to the Video Header, add this code to your Advanced CSS, via:

My Network/Settings/Appearance/Advanced CSS

.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); }

 

 

OTHER EXAMPLES:

Forum Discussion Module Title:

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

 

Members Module Title:
.xg_widget_main .module_members .xg_module_head h2:before {content:'Featured ';}

 

Blog Module Title:

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

 

Groups Module Title:

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

 

Photos Module Title:

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

 

Tip: Change before to after, to add text after the module titles.

 

Enjoy,
Jen

Tags: blog header, blog title, blogs, change header title, forum header, forum title, forums, group header, group title, groups, More…header title, members, members header, members title, module header, module title, photo header, photo title, photos, video header, video title, videos

Views: 252

Replies to This Discussion

Permalink Reply by soʀa on November 4, 2010 at 1:53am

ahhahaa i've used this a lot of times in my themes lol

But i've never seen this blog ever. :p 

 

Well to add this blog :) , You can edit the properties with it too

for example

.xg_widget_main .module_photo .xg_module_head h2:before {content:'Featured '; color:#db0051; text-shadow: 1px 1px 1px #000; }

Or like a hover properties like this one :)

 .xg_widget_main .module_photo .xg_module_head h2:before:hover {color:#db0051; text-shadow: 1px 1px 1px #000; }

 

For other dirty trick you can put it anywhere! I mean literally, you can put some summary after your profile photo as well lol :)[i've tested it about 3 months ago, but i never bother to give them out because it's like very very dirty cheat and maybe people can use it to add crazy things lol], maybe i'll post this as my next theme after the 2 column width ning :) For a preview of it just look at my profile here :3

 

Love Sora XD

Permalink Reply by Hot Rod Revival (C&A) on November 12, 2010 at 1:04pm

?? this didn't work for me.

Permalink Reply by JenSocial on November 15, 2010 at 2:48pm

Can you give the exact example you were trying - - the code, the page URL where you wanted it applied, etc...

Permalink Reply by Hot Rod Revival (C&A) on November 15, 2010 at 4:55pm

Just trying to edit the heading of the photo slideshow on main page to say "featured photos".

Permalink Reply by Hot Rod Revival (C&A) on November 15, 2010 at 4:56pm

I put this code

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

in the advanced appearance section

Permalink Reply by JenSocial on November 15, 2010 at 5:28pm

hmmm, I couldn't get it to work on your site, either. I'll try again later tonight.

Permalink Reply by Hot Rod Revival (C&A) on November 15, 2010 at 5:34pm

Thank you!

Permalink Reply by JenSocial on November 15, 2010 at 5:35pm

I see the problem. You have an error right before where you added this code. You have a missing end right bracket.

 

div.xg_module{border: solid 1px #000000;}

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

Permalink Reply by Hot Rod Revival (C&A) on November 15, 2010 at 7:24pm

Thanks, All fixed. I really appreciate that you took the time to check it out!

Permalink Reply by Brian Fløe on November 15, 2010 at 2:44pm

Awesome tip! Saved my day. Thanks :)

Permalink Reply by JenSocial on November 15, 2010 at 2:49pm

Cool! Always love to hear this kind of great feedback. Thanks Brian!

Permalink Reply by Citizens Party on January 20, 2012 at 5:29pm

Great tip Jen. I used it to change Events to Local Events.  

.xg_widget_main .module_events .xg_module_head h2:before {content:'Local ';}

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips