"TIP" Update 2 Make your latest activity and statuses Updates stand out With beautiful graphical FX's

Your input will have a mouse over FX

Border Hover FX for each activity

and status updates will have comic style Bubble's and they They have A mouse over zoom affect

For your entire network place this code in your NC custom code box. For individual profile place the code in your design studios advanced css..

Or with rounded borders

If you use this code Please leave a link to your network in the comment so we can see what it looks like on your Network. thank you have a great day

click here to see it live

Tags: FX, activity, bubbles, css, effects, feed, hover, statuses

Favorite

0 members favorited this

Attachments:

GC_activity_feed.css, 4 KB

▶ Reply to This

Replies to This Discussion

Permalink Reply by Armani Rouse on July 19, 2012 at 11:24am

Hey George! im always siked to see you post some cool CSS tricks! Thanks in advance dude you got some skills lol what I was wondering is I had placed some code in my advanced css box in my design studio and this code created like a pop out of the status updates in the latest activity when a user would hover it and I erased it by accident and cant remember where I even started with this code! I need your assistance, what im looking to do is to have the actual status itself sort like bounce up closer, basically when a user would use their mouse to hover over like your code here how when you hover the status kind of twist itself, I want my status post to kind of bounce up so its easier for the user to read...any siggestions?

▶ Reply

Permalink Reply by George H. Compton IV on July 19, 2012 at 11:36am

hello Armani. Thank you for the compliment :D try this I believe it's what you're looking for.

.xg_module_activity .feed-story-status .status-update:hover{background-color:#14135E;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;opacity:0.83;z-index:999999;}
.xg_blog_detail .object-detail{width:235px!important;}

▶ Reply

Permalink Reply by Armani Rouse on July 19, 2012 at 11:49am

George youre the man! thats exactly what I had before except your code is actually more efficient because before the hover was a bit too much and the corners of the status bubble would get in the way of other things but with your code its smooth and doesnt hinder one from seeing other things on the page when they do hover on the status, thanks a bunch George, I have something else for you to help me with, if you have a paypal I can drop you some cash for these tips, Im in no way someone who would take awesome things for nothing so let me know bud! But your site has a lot of fun features and cool little perks. Id like to minimize the modules on the home page to give my site a very clean look. We actually release different versions of the site every now and then when we update it and add new features so were currently on Well Kunnected 2.3 and we want to release 2.4 by August. Id like for 2.4 to consist of a lot of CSS and what i am calling "Konvenient Buttons" (lol) these buttons will be like the share icons you see on my home page now where if a user clicks the facebook button it gives them the option to share whatever page their on to facebook. I would like to really minimize the ning navigation bar and like the ultimate bar you created which I used as well ;) I want the navigation to be cleaner like what you gave me with your ultimate bar. Is there any way to take the modules like music, videos, blogs, photos and just make them their own pages or put the url of those modules into Konvenient Buttons with an icon of what each one represents and have them at the top like in your ultimate bar?

▶ Reply

Permalink Reply by George H. Compton IV on July 19, 2012 at 2:18pm

I accidentally Added the bottom line to that code. But I have updated the codes in this discussion so the zoom effect is there and I also added some buffer to the numbered comment button so it looks better now replace the code that you're using with the updated code in this discussion.

And I also wrote this code for the right column on your entire network I think you'll like it. The main reason I was writing this code was to fix your welcome pitcher The puzzle one that says "Well Kunnected" Now it fits in the box.. I also added Some animation and effects for that right column. The code will be at the bottom of this reply.

I don't have a PayPal account but I will be more than happy to give you a hand In any way I can. That's what I'm here for LOL :-)

I'll be busy today but send me a message letting me know everything you would like done to your network and I'll see what I can do.

here's the code for your right column. I think you'll like it :-)

.xg_span-7 DIV.xg_module_body.xg_signup.xg_lightborder img {
   width:260px;
}

.xg_span-7 IMG.align-full{
   border-radius:21px 25px 8px 25px;
   border:1px solid #aaa!important;
   -moz-border-radius:21px 25px 8px 25px;
   -webkit-border-radius:21px 25px 8px 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_span-7 IMG.align-full:hover{background-color:#14135E;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;opacity:0.83;z-index:999999;}

.xg_span-7 DIV.xg_module.module_members ul.clist li {
   border-radius:21px 25px 8px 25px;
   border:1px solid #aaa!important;
   -moz-border-radius:21px 25px 8px 25px;
   -webkit-border-radius:21px 25px 8px 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_span-7 IMG.photo{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_span-7 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_span-7 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_span-7 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;}

.xg_span-7 .module_blog .blogpost:hover,.xg_widget_main .module_forum div.vcard div.topic:hover{background-color:#14135E;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;opacity:0.83;z-index:999999;}
.xg_blog_detail .object-detail{width:235px!important;}
div#welcomecenter,div.xg_signup,div.user-info,div.account-links ul,div.topic,div.blogpost{vertical-align:middle;color:#fff;border:1px solid #ccc;background-color:transparent;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;-webkit-box-shadow:6px 6px 10px #ccc;-moz-box-shadow:6px 6px 10px #ccc;box-shadow:6px 6px 10px #ccc;margin-right:12px!important;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');padding:1em 2em;}
.xg_span-7 DIV.postbody {text-align:left;color:#bfc7bf;}

.xg_span-7 IMG.xg_lightborder: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);

A.xj_expandable {
text-align:center;
color:#15c708;
font-size:17px;
padding-left:15px;
padding-right:15px;
border-style: solid;
border-width: 1px;
border-color: #C1C1C1;
border-radius:35px 75px 30px 67px;
background:transparent url(http://api.ning.com:80/files/J2XR*k6*l9WVW3DmFEvOGWRssQGzkP8Pl1osTjYS3HHwt7Wglb8P6NN2VjeNY2TMiJa2bHOKZgBy8laIEJF9q95S*kq0IQ16/continuereading.png)
}

▶ Reply

Permalink Reply by Intimate StRaNgEr on August 18, 2012 at 8:12am

Hi george..,

i have tried this code in my site..,

bcoz im very new to the social site..,i have so many doubts..

in this code how to change the blue colour of the mouse over zoom effect on forum headings in the main page??

and also there is no mouse over zoom effect on blog lists on the main page even after adding this code in the advanced css box..,can you please add that also so that i can have this efect to both blogs and forums.

thank you george..

▶ Reply

Permalink Reply by George H. Compton IV on August 18, 2012 at 10:15pm

Just change the color code #14135E in this code below to any color you want.

if you'd like Instead of using the color code #14135E You can replace that with the actual name of the color.

Example

( background-color:#14135E ) can be changed to this ( background-color:Blue )

this code is for your forum.

.xg_widget_main .module_forum div.vcard div.topic:hover{background-color:#14135E !important;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;opacity:0.83;z-index:999999;}

and this is the code For blogposts. You could change the zoom effect background color the same way as the forum.

.xg_widget_main DIV.blogpost.vcard:hover{background-color:#14135E !important;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;opacity:0.83;z-index:999999;}

add these two codes to the bottom of the code above your reply.

you have a great day stranger :-)

▶ Reply

Permalink Reply by Intimate StRaNgEr on August 19, 2012 at 4:16am

Hi George..,

Thanks a lot!!!!

i managed to change the colour..but still no zoom over effect on the blog list even after adding this code(may be this code is not suiting my site)

i messaged you the details of my site..im sure you will have a look there..

Thank you george for spending time to listen my problem..,

Im so happy that i met you here...god bless you man..!!!

keep up the good work..!

▶ Reply

Permalink Reply by George H. Compton IV on August 19, 2012 at 10:08am

here's the code for Blog posts on your site. I'm still working on the navigation tabs I'll send you that code in a message.

.xg_widget_main .module_blog .blogpost:hover,.xg_widget_main .module_forum div.vcard div.topic:hover{background-color:#14135E!important;-webkit-transform:scale(1.20)!important;-moz-transform:scale(1.20)!important;-webkit-transition:all .8s ease-out!important;-moz-transition:all .8s ease-out!important;opacity:0.83;z-index:999999!important;}

▶ Reply

Permalink Reply by Intimate StRaNgEr on August 19, 2012 at 10:38pm

wow!!!! Thanks George!!!!!!

It works perfectly in my site..

George you are rocking!!!

Thanks again..:) :) :)

Permalink Reply by john s. on August 21, 2012 at 7:09am

Hey George, great tips. I managed to change the background color for the zoom in status update, but how do I change the text color from white to black? Which part of the code do i Change?

▶ Reply

Permalink Reply by George H. Compton IV on August 21, 2012 at 10:59am

Well you should be able to change it in the design studio. But if you want to change the Font color on the hover effect code only you can just add this color:#cccccc!important; to that part of the code to change the font color

example I just added it to the end of the hover effect for the status updates code

.xg_module_activity .feed-story-status
.status-update:hover{background-color:#14135E;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all
.8s ease-out;-moz-transition:all .8s
ease-out;opacity:0.83;z-index:999999;
color:#cccccc!important;

}