"TIP" let's add styles and animation FX's to your main page blogs, events, latest activity and a whole lot more

[George H. Compton IV]

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

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/HXLvFMxAKuyPQOGcM0VWmoI89uFoZpwLi9nKLm*sn3NXhTu5yYLg5dSQ8COCNrrZ8wQch4NZIoQKcn5tHeIafTLx8To6j2Ij/style_GC_main_page.css" />

 

Remember everyone results may vary because of the differences in Ning networks.

This was tested and design on a Ning pro account.

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

instead of using this stylesheet I recommend my new Discussion

"TIP" "style_GC_whole_network.css" Version 5 it adds styles and ani...

Posted by George H. Compton IV on September 9, 2012

it's a lot more compatible than this version.  For the most part it has all the codes From this discussion plus all the fixes, compatibility and color code changes + a whole lot more Animations and FX's for your network.

 

[dave]

Fantastic piece of work George, you really put the wrench time into your projects, I love what you have been able to achieve through CSS and your knowledge of it , i used the video potion of this css and it looks great, Thank you for sharing this as we all appreciate the tips and they go a long way to making our sites look more polished :-)

[George H. Compton IV]

thank you Dave.

I think it's great that you can adjust all the codes that you want out of my stylesheet.  That way it's customized For your network. Great job Dave :-)

I still recommend using my whole network stylesheet rather than this one.  I spent a lot more time working on compatibility Issues for The Differences in Ning networks.

"TIP" "style_GC_whole_network.css" Version 5 it adds styles and ani...

Posted by George H. Compton IV on September 9, 2012

Here's the main page on creators with my stylesheet virtually added

[Rosas † Negras]

I would like to know if you could 'change the effects That created for my site, I do not want pictures That move, and even the photos you zoom in, thank you in advance Abidin

[George H. Compton IV]

hello Abidin :)

Use this stylesheet I believe I made all the changes you ask for. if you need anything else changed just let me know.

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/iVO0Zl2n8N4ik-ZMT5r7ldioaa6DNbrFpCTO5BtrIFvMCkCI9jqrsK82ze4YiNfk75amXWexwQ-KSkRf1caeo9l5LDDsOGpm/style_GC_main_page.css" />

[Rosas † Negras]

thank you very much for your help

[George H. Compton IV]

you're welcome Abidin

[Rosas † Negras]

great job or codes inserted now ... thanks again !

[Caribso]

Nice code George, how can I get only the codes for the videos and the member profiles please...

[George H. Compton IV]

So do you just want the codes for the videos and the profile pictures on the main page?

[Caribso]

Yes sir please.

[George H. Compton IV]

I believe this is all the codes for the videos and the members modules

.xg_widget_main_index_index DIV.xg_module.module_members ul.clist li {
   border-radius:25px 25px 25px 25px;
   border:1px solid #aaa!important;
   -moz-border-radius:25px 25px 25px 25px;
   -webkit-border-radius:25px 25px 25px 25px;
   #ccc;-moz-box-shadow:6px 25x 10px
   #ccc;box-shadow:6px 6px 10px
   #ccc;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
   filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
   }
.xg_widget_main_index_index IMG.photo:hover{opacity:1;-webkit-box-reflect:below 0 0 color-stop(.7,transparent), to(rgba(240,255,255,0.4)));-webkit-box-shadow:3px 3px 20px rgba(248,248,255,0.8);-moz-box-shadow:3px 3px 20px rgba(248,248,255,0.8);box-shadow:3px 3px 20px rgba(248,248,255,0.8);border-radius:45px;
-webkit-transform:scale(1.20);-moz-transform:scale(1.20);
transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);-ms-transform:rotate(25deg);-webkit-transform:rotate(25deg);-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;}
.xg_widget_main_index_index DIV.xg_module.module_video img{border:none;-moz-box-shadow:3px 3px 4px #eee;-webkit-box-shadow:3px 3px 4px #eee;box-shadow:3px 3px 4px #eee;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#eeeeee')";progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#eeeeee');margin-right:12px;}
.xg_widget_main_index_index DIV.xg_module.module_video img:hover{opacity:1;-webkit-box-reflect:below 0 0 color-stop(.7,transparent), to(rgba(240,255,255,0.4)));-webkit-box-shadow:3px 3px 20px rgba(248,248,255,0.8);-moz-box-shadow:3px 3px 20px rgba(248,248,255,0.8);box-shadow:3px 3px 20px rgba(248,248,255,0.8);border-radius:45px;
-webkit-transform:scale(1.20);-moz-transform:scale(1.20);
transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);-ms-transform:rotate(25deg);-webkit-transform:rotate(25deg);-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;}