Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
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:
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 ';}
Welcome to
JenSocial: Social Web Directory and Ning Tips
Posted by JenSocial on May 7, 2018 at 8:35pm 8 Comments 1 Favorite
Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments 1 Favorite
Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments 0 Favorites
Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments 1 Favorite
Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments 0 Favorites
Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)
Started by Themes - Rosas Negras Mar 20, 2021. 0 Replies 0 Favorites
Started by JenSocial. Last reply by Kos Dec 6, 2016. 64 Replies 4 Favorites
Started by JenSocial. Last reply by JenSocial Jul 26, 2016. 41 Replies 1 Favorite
© 2024 Created by JenSocial.
Powered by
© Copyright JenSocial.