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




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.



Views: 448

Replies to This Discussion

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

?? this didn't work for me.

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

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

I put this code

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

in the advanced appearance section

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

Thank you!

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 ';}

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

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

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

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



© 2019   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips