"TIP" "style_GC_whole_network.css" Update Version 5.4

[George H. Compton IV]

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

[George H. Compton IV]

of course there is :-) this code will remove the border

DIV.xg_module.module_groups LI.xg_lightborder {
    border: 0px solid rgb(170, 170, 170) !important; }

[Rosas † Negras]

we have included all the codes, but we have the same problem, I do not understand George

[George H. Compton IV]

You are using this code not the one I gave Armani

<style>
.xg_widget_main_index_index .xg_module_activity .feed-story-status .status-update:hover, .xg_widget_main_index_index DIV.xg_module.module_groups LI.xg_lightborder:hover, .xg_widget_main_index_index .module_blog .blogpost:hover, .xg_widget_main .module_forum div.vcard div.topic:hover {
    background-color: rgb(20, 19, 94) !important;
    transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    transition:all 1s ease-out;
    -ms-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    opacity: 1; }
</style>

[Rosas † Negras]

George.. I put the code into the custom code.. I tried it at the top and also at the bottom.. unfortunately there were no changes. I would appreciate any help you can give. thanks so much.

[George H. Compton IV]

That is the code.. you can also try placing the code in an ad box and or your design studio..  but I would leave it in your NC custom code box at the bottom then log out and log back in a couple times so your catch will change

[Mary Jane Peterson]

Hi George

May I ask for your help again please , I like to also be able to let people to write their books , like Watt pad  does , but for my site, is there a code for this I can use please thank you your a star :)

[George H. Compton IV]

I did some looking around and I could not find a Wattpad app for webpages only cell phones, iPods and Such.  Sorry couldn't help but you have a great day marry

[Mary Jane Peterson]

Hi George ,

You don't need to be sorry , you have helped us a lot this year

and you have not asked for any thing in returned, you have been so kind in helping us out :) you are our star as always :) thank you for been there :)

[Armani Rouse]

Hey there George! Its about that time again my friend LOL. The advanced CSS section is on overload so I was going to take a shot in the dark somewhat and add teh code thats there to a stylesheet! I just have one question before I have at it LOL. I noticed there are no <style> or <script> tags in any stylesheet. Is this the proper or only way more importantly to achieve a success stylesheet? Or is it something im missing? Id like to keep the titles for the code I have in the advanced css so it makes it easy to know what code is doing what. But basically I need to move some of that code out as the advanced css box is almost on F (for FULL LOL)

[George H. Compton IV]

Just like the design studio advanced CSS no scripts or html can go into the stylesheet and of course You'll want to Remove any <style> Style tags from the CSS codes.

here is an example of the tags that can be used in a stylesheet so you know what your codes are..  if you're going to tag the codes be sure at the very top of the style sheet you add this

@charset "utf-8";
/* CSS Document */

the example of the stylesheet with Separating code tags

@charset "utf-8";
/* CSS Document */




/* widget */
div.xg_module {
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
.xg_module {
   border:1px solid #aaa !important;
   -webkit-box-shadow:5px 5px 5px
   #ccc!important;-moz-box-shadow:5px 5px 5px
   #ccc!important;box-shadow:5px 5px 5px
   #ccc!important;}


/* Profilepics */
.xg_widget_profiles_profile DIV.module_user_thumbnail :hover{opacity:1;
-webkit-box-reflect:below 0 0 color-stop(.1,transparent), to(rgba(240,255,255,0.4)));
-webkit-box-shadow:2px 2px 2px rgba(248,248,255,0.8);
-moz-box-shadow:2px 2px 2px rgba(248,248,255,0.8);
box-shadow:2px 2px 2px rgba(248,248,255,0.8);border-radius:30px;
-webkit-transform:scale(1.1);-moz-transform:scale(1.1);
transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;transition:all 1s ease-out;
-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;}

[Stygo Alphamatt]

Hi; i just want to thank George for bringing out this wonderful tip and letting us amend it to our taste to fit our different networks.

I am a bit proud to share what i did with it with all ya folks here.
i like the effects on the activity feed and the blog list on the main page.

Here is a screenshot, click on the graphic to see it live.

Thanks man for solving the prolem i had with explorer, i really appreciate your help. To top it all would be to have the same effects as on the activity feeds also on the comments and messages.

But i would not want to ask too much.

Thanks mane

Stygo

[George H. Compton IV]

 no problem I'm glad I could help :-) and might I say you've done an awesome job at customizing the stylesheet to your liking :-) you have a great evening Stygo