"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

[Rosas † Negras]

or this problem Thanks in advance

[George H. Compton IV]

this is the code that will fix your groups and your videos on the center column for my main page stylesheet that you are using.

To adjust the video's module in the very bottom line raise or lower of the 10 in that line of code.  It looks like this  margin:10px!important;

<style>
.xg_widget_main_index_index DIV#xg_layout_column_2 DIV.xg_module.module_groups LI.xg_lightborder {
    padding: 15px 3px 3px;
    margin-left: 2px;
    min-height: 196px;
    width: 80px !important;
}
.xg_widget_main_index_index DIV#xg_layout_column_2 div.module_video ul.clist li {
    width: 136px;
    margin:10px!important;
}
</style>

[Rosas † Negras]

thanks my friend George

[Rosas † Negras]

or always this problem on video if I put them center center home

[Rosas † Negras]

videos

[George H. Compton IV]

This will fix your video module you just need to adjust the width and the margin.

<style>
.xg_widget_main_index_index DIV#xg_layout_column_2 div.module_video ul.clist li {
    width: 136px;
    margin:10px!important;
}
</style>

[Rosas † Negras]

thank you very much for your availability and kindness

[Rosas † Negras]

or always the same problem you can see on Rosas

[Rosas † Negras]

thank you so much it was my mistake not put the codes top...now is perfect

[Rosas † Negras]

Hi George. I was wondering if you could please modify the code so the modules do not enlarge when the mouse touches. example.. blogs, groups, etc. pls. I would really appreciate. thank you for your help.

[George H. Compton IV]

hello Rosas :)

this code will remove the zoom effects in your blogs, groups, forum and activity feed..  and you can also change the color of the mouse over FX

<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>

[Armani Rouse]

Is there a way to remove the frame from the groups so that only the image of the group is displayed? I dont like the narrow rectangle boxes I have now, it would better if it were just the groups image