This stylesheet will add styles and animation fx throughout your whole network blogs, forums, groups, latest activity, comments and a whole lot more:-)

I put it into a stylesheet because of the amount of code it takes to do this.  So it's really easy to add and remove from your NC custom code box

If you'd like to view the Codes in The stylesheet just click here

click here to see it live on cross roads Fellowship

just add this code to the top of your NC custom code box.

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/wKr*gaUtwNYGYxS1TQJ0GxQwgV-e8eRB1rKt0Twd2LHNnRi5*ZBHQlAX5k7M011-H629FQFxfuPRDWLhVLOyEEwjVgHgks54/style_GC_whole_network.css" />

 

Remember everyone results may vary because of the differences in Ning networks. But I did spend week's working on compatibility for The different ning networks, layouts and themes..

This was design on a Ning pro account and tested on many Ning Networks

If you would like me to change anything in this code or remove anything for you just ask I'll be more than happy to help

 

Editing the colors in the stylesheet. in these codes just change the word transparent to any color you want.

this code will change the group's mouse hover color

    DIV.xg_module.module_groups LI.xg_lightborder:hover{
       background-color:transparent!important;}

    These three codes will change the activity feed colors

    .xg_module_activity .feed-story-status .status-update:hover{
       background-color:Transparent !important; }


    .xg_module_activity .feed-story-status .status-update{
       background-color:Transparent !important; }

    .xg_module_activity SPAN.comments-number {
       background-color:transparent !important; }

    This code will change The forum Mouse hover color

    .module_forum div.vcard div.topic:hover{
       background-color: transparent!important;}

    and this one will change the color of the blogpost mouse hover Color

     .module_blog .blogpost:hover{
       background-color:transparent !important; }

    And this code will change the red continue button

     A.xj_expandable {
       background:transparent !important;}

This code will change the color of the text in the continue button.

A.xj_expandable {
       color:#15c708;}


All module shadows in this code you can change the ( shadow colors #ccc ) for the shadow colors change all three ( Border colors #aaa ) and (  Border thickness 2px )

.xg_module {
   border:2px solid #aaa!important; -webkit-box-shadow:6px 6px 10px
   #ccc!important;-moz-box-shadow:6px 6px 10px
   #ccc!important;box-shadow:6px 6px 10px
   #ccc!important;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
   filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');}


    I believe that's all the major colors there are in the stylesheet

Here's two pic's of the main page here on creators with this stylesheet virtually added

Here's a couple more snapshots of the Main page and groups page.. right click and open them in a new tab to get a better view

Tags: FX, network, styles, stylesheet, styling

Views: 3207

Reply to This

Replies to This Discussion

HI George


Thank you

The second one please

Thank you  :)

are in my site, choose the theme that you want B-World

Hi Rosas † Negras

I have just joined your site thank you

okay give the stylesheet a shot :-) this has not been tested.  Place the code in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/yOlGzlIdSm52zx*KU9SkJz1V2XKfARMPCpRpGrXHChLLi-X0uKlsB24eKVE*I1B9v0d50yhQRrPjxC9pC80yyEcLYtChT7v-/YouRosasForMeMystical.css" />

I would have to rewrite some of the codes to get the whole theme to work in a stylesheet.

I'm going to go ahead and play with your Theme for a while and see if I can get the whole thing working in the stylesheet..

Hi George

Thank you for help:), please come and have a look, Can I also have the pic for the header as well please thank you :)

okay I'm sorry I missed that. I added it to this stylesheet

Replace the stylesheet from earlier with this one :-)

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/c8YDWmv9aTjmOvh*Q-*sd6xnU*dq6B0pnWRR0WalmtlNP6qrY5B2To8NwypxK*ukOeU4kGt*z1vUDH3Xb0kJSML8bI*-BIFz/YouRosasForMeMystical.css" />

I forgot to add the word important for the size of the image add this code to the bottom of your NC custom code box

<style>

#xg_masthead {
   background: url("http://i1249.photobucket.com/albums/hh506/mysticaldezigns/themespics/desyy.jpg?xn_version=201211062038")!important;
   background-size:100% 100%!important;
   border: 8px groove rgb(64, 0, 0) !important;}

</style>

Hi George H. Compton IV and Rosas † Negras

Thank you both for all very much for all the help, for some reason I can not reply to other comments so I am replying to this one   

RSS

Latest Activity

Rosas † Negras commented on Michael Goebel's group 'Creators Suggestions for Ning'
"Thanks for the invitation!"
3 hours ago
Profile IconRosas † Negras and deedee gauzot joined Michael Goebel's group
Thumbnail

Creators Suggestions for Ning

A place for Creators and Ning design staff to get together and discuss ideas to enhance and improve…See More
3 hours ago
Rosas † Negras shared a profile on Facebook
3 hours ago
Rosas † Negras favorited George H. Compton IV's profile
3 hours ago
Profile IconMarco Medaglia and deedee gauzot joined md's group
Thumbnail

Templates, Codes, Scripts and Tweeks

This group is for the Ning guru's who help us regular folks out with all the TCS & T we need to…See More
4 hours ago
Jelena replied to John Bizley's discussion 'New Adjustments For Your Video Player To Make It Stand Out From The Site Background'
"WOW nice  and great work John."
6 hours ago
Thiago Santos de Moraes replied to Elshara Silverheart's discussion 'More Feature Requests'
"I'm asking Ning about this on Twitter."
7 hours ago
deedee gauzot favorited Michael Goebel's group Creators Suggestions for Ning
8 hours ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service