Group module 3-columns

Learn this 2 simple steps on how to expand group module in 3 columns.

Demo:

see it in action click here and scroll down all the way to the bottom of the page.

 

Step 1: Make sure that group_module is placed at the center column and is at the bottom

of the page.

 

Step 2: Add this CSS codes in your advance tab.

.xg_widget_main .xg_2col .module_groups .clist li {
margin:0 1px 8px 3px;
}

.xg_widget_main .xg_2col .module_groups .clist {
display:inline;
clear:none;
}

.xg_widget_main .xg_2col .module_groups {
left:-250px;
width:954px;
}

 

Hit save and your all set! ;)

check your homepage.

Tags: 3-column, Group, Group module 3-column, module

Views: 95

Replies to This Discussion

Permalink Reply by Ashary on October 17, 2010 at 10:24am

Perfect!

Salamat sa tip kabayan.

Mabuhay ka!

Permalink Reply by vaqzツ on October 17, 2010 at 10:07pm

glad u liked it tatay! :)

mabuhay ka too!

Permalink Reply by Expansion Technology on November 1, 2010 at 12:26pm

Vaqz,

How r u? Musta?

Is the theningfordummies.ning.com still active or hinde na?

 

I still have my ning site, which is for my company paid by them, here is the http://expansionsystem.com

 

Regards

Permalink Reply by vaqzツ on November 14, 2010 at 9:33am

Hello Sir Ariel,

Sorry late reply. Anyways Ning4dummies is no longer active

since the new plans started. Glad to know that u were able to continue with your network.

Im good btw, how bout u?

 

-vaqz

Permalink Reply by JenSocial on October 17, 2010 at 2:04pm

Very nice Vaqz! Thank you for adding this great tip!

Best,

Jen

Permalink Reply by vaqzツ on October 17, 2010 at 10:09pm

Your welcome Ms. Jen

thank u for featuring this tip and for featuring me too! :)

 

-vaqz

Permalink Reply by ISN (Yshatar) on October 18, 2010 at 10:58am

Man this would be awesome if it were at the top of the page :) Is there anyway to put it at the top of the page?

Permalink Reply by JenSocial on October 20, 2010 at 9:14pm

Robert,

I've only stretched the photo module across 3 columns on extra wide sites. Follow the same steps, with photo module at bottom, in center wide column. Also, select thumbnails, not slideshow.

 

You'll have to tweak this code for a normal width site.

.xg_widget_main .xg_2col .module_photo {margin-top:30px; height:230px;}
.xg_widget_main .xg_2col .module_photo .clist li {margin:5px;}
.xg_widget_main .xg_2col .module_photo .clist li img {border:1px solid #e6e6e6;}
.xg_widget_main .xg_2col .module_photo .clist {display:inline;clear:none;}
.xg_widget_main .xg_2col .module_photo {left:-250px;width:1100px;}

 

Best,

Jen

Permalink Reply by JenSocial on October 20, 2010 at 9:59pm

In theory, yeah that should work. These type of hacks can get a little weird, depending on other CSS. Let me know how it goes.

Best,

Jen

Permalink Reply by HittMakr on October 21, 2010 at 5:07am

Will this work for the video module

Permalink Reply by Mikes Designs on October 24, 2010 at 12:16am

works perfectly! thanks!

Permalink Reply by BREAK9 RECORDINGS INDUSTRY on November 21, 2010 at 4:27am

I have a similar question how would you do this for video as well as it would look cool tnks

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips