"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 DTM on October 10, 2012 at 7:13pm

OK George, what's the CSS code to change the horizontal lines out on the main page center module? :D (Ning classic layout)

▶ Reply

Permalink Reply by George H. Compton IV on October 11, 2012 at 8:15am

Here is the original code for that line

.feed-story {
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color: rgb(192, 192, 192);
}

Here's what I am using to change that and add to it

.feed-story {
    border: 1px solid #E4E4E4!important;
    border-radius:21px 60px 8px 45px;
    border:3px solid #aaa!important;
    -moz-border-radius:21px 60px 8px 45px;
    -webkit-border-radius:21px 60px 8px 45px;
    #ccc;-moz-box-shadow:6px 6px 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');
    clear: both;
    min-height: 48px; padding:10px;
    position: relative;padding-right:15px!important;
    word-wrap: break-word;}

if you want it to just deal with the Main page add this to the front of the code

.xg_widget_main_index_index

And add this to the beginning if you only want to affect the activity feed in the center column

DIV#xg_network_activity.xg_module.xg_module_activity.indented_content.column_2

(example) if you add them together it will look like this

.xg_widget_main_index_index DIV#xg_network_activity.xg_module.xg_module_activity.indented_content.column_2 .feed-story {
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color: rgb(192, 192, 192);
}

▶ Reply

Permalink Reply by Planeta Balada on November 6, 2012 at 10:18am

Its cause the status box is higher?

Because when you put the mouse still appears white square box that overlays the effect.

▶ Reply

Permalink Reply by George H. Compton IV on November 6, 2012 at 3:24pm

here you go add this to fix it.

.xg_module_activity TEXTAREA.text.xj_hint.xj_status_input.hint {
margin: 12px 20px 0px!important;
width: 80%!important;
}

I'll also add this to the codes in this discussion.

▶ Reply

Permalink Reply by Planeta Balada on November 6, 2012 at 3:56pm

In my network remained the problem

▶ Reply

Permalink Reply by George H. Compton IV on November 6, 2012 at 4:02pm

Try changing the margin and/or the percentage of the width

or send me your link and I'll write the code for your network

▶ Reply

Permalink Reply by Planeta Balada on November 6, 2012 at 4:09pm

Thank you!

<style>

.xj_status .input-container{
border-radius:21px 60px 8px 45px;
border:3px solid #aaa!important;
-moz-border-radius:21px 60px 8px 45px;
-webkit-border-radius:21px 60px 8px 45px;}
.xj_status .input-container:hover {
-moz-border-radius:47px 41px 147px 25px;
-webkit-border-radius:47px 41px 147px 25px;
border-radius:47px 41px 147px 25px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;}
.feed-story {
border: 1px solid #E4E4E4!important;
border-radius:21px 60px 8px 45px;
border:3px solid #aaa!important;
-moz-border-radius:21px 60px 8px 45px;
-webkit-border-radius:21px 60px 8px 45px;
#ccc;-moz-box-shadow:6px 6px 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');
clear: both;
min-height: 48px; padding:20px;
position: relative;padding-right:15px!important;
word-wrap: break-word;}
.xg_module_activity .feed-story-status .status-update{
vertical-align:middle;color:
#fff;border:1px solid
#ccc;background-color:#14135e;
border-radius:35px 75px 30px 67px;
-moz-border-radius:35px 75px 30px 67px;
-webkit-border-radius:35px 75px 30px 67px;
-webkit-box-shadow:6px 6px 10px #ccc;
-moz-box-shadow:6px 6px 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');
margin:0 0 5px 1px;padding:1em 2em;}
.xg_module_activity .feed-story-status .rich-detail{
background:transparent url(http://api.ning.com:80/files/sYeHMTEA60IuvKna*jPCPYam0yLsDfvL2SGs4aXjjZLBn-VIthnTF7Gv0zJ2Zq4kdAYUuM2*8xWKGP4UgG6i-oLNBsOuB3p4/bubbles.png)
no-repeat;padding:0 1em 0 .8em;}
blockquote {
padding: 10px;border: 1px dashed #303030;
border-radius: 10px;}
.xg_module_activity DIV.xj_comment.inline-comment.xg_shaded {
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;}
.xg_module_activity DIV.xj_comment_controls.comment-controls.xg_shaded {
width:145px;
background-color:#14135e;
border-radius:21px 60px 8px 45px;
border:1px solid #aaa!important;
-moz-border-radius:21px 60px 8px 45px;
-webkit-border-radius:21px 60px 8px 45px;}

.xg_module_activity .feed-story-status
.status-update:hover{background-color:#14135E;-webkit-transform:scale(1.40);-moz-transform:scale(1.40);-webkit-transition:all
.8s ease-out;-moz-transition:all .8s
ease-out;opacity:0.83;z-index:999999;}
.xg_module_activity SPAN.comments-number {
padding-left:15px;
padding-right:15px;
background-color:#14135e;
border-radius:21px 60px 8px 25px;
border:1px solid #aaa!important;
-moz-border-radius:21px 60px 8px 25px;
-webkit-border-radius:21px 60px 8px 25px;}
DIV.xj_add_comment.add-comment.xg_shaded {
border-radius:21px 25px 8px 25px;
border:2px solid #aaa!important;
moz-border-radius:21px 25px 8px 25px;
-webkit-border-radius:21px 25px 8px 25px;}
DIV#xg_network_activity.xg_module.xg_module_activity.indented_content.column_1 DIV.xg_module_body.activity-feed-skinny DIV.feed-story-body.dy-clearfix DIV.dy-content-thumb-link.xg_lightborder img {min-width: 148px}
DIV.module.module-feed SPAN.event-info-timestamp.xg_lightfont {margin-left: 10px;}
.feed-story.xg_separator.xj_activity_item {padding-top:30px!important;}
DIV.xg_module_body.activity-feed-skinny .feed-story.xg_separator.xj_activity_item DIV.rich-thumb a :hover{background-color:#14135E;-webkit-transform:scale(2.20);-moz-transform:scale(2.20);-webkit-transition:all .8s ease-out;-moz-transition:all .8s ease-out;opacity:0.83;z-index:999999;}
.xg_module_activity .feed-story-status .rich-detail {
background: url("http://api.ning.com:80/files/XGz5Xvmuna-HKq8z9sfr6CxqjH-oze6t3-mafH0nNjRX0ehVY94WVZZsJE7xkI4cNMwbVFYoSyMLUlHs-wgPNNUKxPnsfk9X/planetaterragifanimado7705_40x40.gif") no-repeat scroll 0% 0% transparent;
padding: 1px 1em 1px 1.8em;}
.xg_module_activity TEXTAREA.text.xj_hint.xj_status_input.hint {
margin: 12px 20px 0px!important;
width: 80%!important;
}

</style>

▶ Reply

Permalink Reply by Planeta Balada on November 6, 2012 at 4:18pm

The problem appears only before being clicked inside the text box by clicking inside the box outline square ends.

But always before clicking inside the box, is the square outline.

▶ Reply

Permalink Reply by George H. Compton IV on November 6, 2012 at 4:40pm

try it like this. add this code to the bottom of your NC custom code box and in the ad box in the footer. This is just to make sure nothing else overwrites it.

What browser are you using?

▶ Reply

Permalink Reply by Planeta Balada on November 6, 2012 at 4:57pm

Its OK now in Chrome e IE!

Thank you!

▶ Reply

Permalink Reply by George H. Compton IV on November 6, 2012 at 4:59pm

You're welcome you have a great evening :-)

Permalink Reply by Imran Baloch on March 13, 2013 at 12:14pm

Hy George!

i want to display this style on whole network like blog post, Forum, Events along with Latest Activity module. My Website is http://www.vulearners.com/

thanks...