Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

Hi NCs,

I'm not sure  whether you like it or not. But I have a small idea to make your main page group module stand out with the shadow and image hovering effects.

Note: OK and Tested with 2 and 3 column layouts, New Design Studio.

Live Preview :
here

Preview:

Copy and paste the following code into Advanced CSS via my network> Settings>Appearance.


This code is for those who are using 2 column layout, New Design Studio

.xg_3col .xg_3col .module_groups .clist li img {
min-width: 96px;
-moz-box-shadow: 3px 3px 4px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */

border: 1px solid #CCC;
}

.xg_3col .xg_3col .module_groups .clist li img:hover {

opacity: 1;

/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));


/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}


This code is for those who are using 3 column layout, New Design Studio

.xg_widget_main_index_index .xg_3col .xg_2col .module_groups .clist li img {
min-width: 96px;
-moz-box-shadow: 3px 3px 4px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */

border: 1px solid #CCC;
}

.xg_widget_main_index_index .xg_3col .xg_2col .module_groups .clist li img:hover {

opacity: 1;

/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));


/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}


 

Wanna make your ning site unique? Contact me bernardmax2@gmail.com

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • WOOOOOOOOOOOOOOOOW

    This amazing
    Thank you my friend
    Can you do this photo?

    • NC for Hire

      Yes it can be done with your photo album too...but you need to change the class...BTW, thanks.

      • ok I do

        • ?

          • NC for Hire

            .module_photo .body_list .clist img

            .module_photo .body_list .clist img:hover

            • ^ ^ I want the entire code and not part of it

  • NC for Hire

    very nice Bernard

  • greattttttttttttttttttttttttttttttt

    working at http://vustudents.ning.com/

    ya can you provide us the code for photo as you have on your on site..

    again thanks a lot :-) 

    • NC for Hire

      For photo please replace these 2 classes.. 

      .module_photo .body_list .clist img

      .module_photo .body_list .clist img:hover

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Suzie Nielsen replied to J.Ayvar's discussion
When Activity Feed. 3.0?
"How do I get these? THanks in advance!
 "
2 hours ago
Angela Soto updated their profile
19 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip: Build a Directory and Import It Into Your Community
"Opposite Trick/ Tip"
21 hours ago
⚡JFarrow⌁ posted a discussion
If you ever wondered what your community looks like in the mirror, here you go: :oƃ noʎ ǝɹǝɥ…
21 hours ago
Steve C replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Exactly!"
22 hours ago
⚡JFarrow⌁ replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if your N2 is migrated to a N3, one would think a backup could be made for you...no?"
22 hours ago
⚡JFarrow⌁ posted a discussion
Over the years, many Ning Creators have asked me the best way to build a directory for their…
yesterday
Roland Rupp updated their profile
Thursday
Gavin Brown and ⚡JFarrow⌁ are now friends
NC for Hire
Thursday
Rosas † Negras left a comment on Creatori NING Italiani
"La grafica è elementare e le attività nulle,sarebbe da lavorarci un Po,sono da oltre 15 su ning…"
Wednesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if you check this has been said there is a discussion, all for free and they think of everything"
Tuesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Yes,absolutely must be free as has been said, I have been on ning for 15 years and we have always…"
Tuesday
More…

Meanwhile, you can check our social media channels