Tip: Give a different look to your specific group page.

[Bernard Lama]

This will widen the first column, hide the right column and change the background color of group description in the specific group page. You may want to adjust the width  and background color to your preference. This code is made for New Design Studio.

Instructions: Be sure to change your group page name as my group page name is classified. How to find the group page name? See example here: http://www.ksnonline.org/group/classified

After replacing your group page name, copy and paste the code into custom Code.

You are done!

<script type="text/javascript">
if (window.location.href.split('group/')[1] == 'classified') {
x$('.xg_span-16').css('width','982px');
x$('.xg_span-4').css('width','183px');
x$('.xg_span-12').css('width','790px');
x$('.xg_span-5').css('display','none');
x$('.nopad').css('background-color','#eef2d5');
x$('.xg_user_generated').css('width','500px');}
</script>

<script type="text/javascript">
if (window.location.href.split('group/')[1] == 'classified?xg_source=activity') {
x$('.xg_span-16').css('width','982px');
x$('.xg_span-4').css('width','183px');
x$('.xg_span-12').css('width','790px');
x$('.xg_span-5').css('display','none');
x$('.nopad').css('background-color','#eef2d5');
x$('.xg_user_generated').css('width','500px');}
</script>

If you want to change your regular group to classified group or some other kind of group, I'm available for hire or contact me at [e-mail]

Try our Private Support ( Instant and Full Support)

Live Preview: Here

Preview:

[classic]

You are an excellent developer Thank you I hope interested in the development of images ^ ^

[Bernard Lama]

Hi classic,

Thank you. BTW, can you explain me clearly what is development of images?

[classic]

*I mean it to come down in private developments pictures

[Bernard Lama]

I still didn't not get you. sorry my friend.

[Michael Thompson]

Bernard, This worked great on the groups I tried it on. However, it pushed everything over in the footer on those group pages, making it skiny. Have a look here at the footer. 

[Bernard Lama]

Hi Michael,

It pushed nothing. Your all modules are in the first column except members module. 

Thanks

Bernard

[Michael Thompson]

Hi, Bernard,

I am talking about the information in my footer. If you scroll down to the footer, that information is now moved over to the left in this group and another group where I used your tip. 

Then look at the links in the footer on all the other pages as it normally should be. 

Do you see what I mean?

[Bernard Lama]

Gotcha. I will try to fix this issue and get back to you.

Thanks Michael.

[Alex 小正正]

Thanks Bernard. This is a very great tip. I modify the code a little bit to fit my site.

Because the url of the group I want to change is 

http://www.iyoume.net/group/metemple#axzz1wnWPGiPM

or 

http://www.iyoume.net/group/metemple?xg_source=activity#axzz1wnWPGiPM

( #axzz1wnWPGiPM is traffic tracking code, changes all the time. "metemple" is the real group page name.)

So I just modify one line of the code above to this and remove the second part of the <script> tag.

if (window.location.href.split('group/')[1].split('#')[0] == 'metemple' || window.location.href.split('group/')[1].split('?')[0] == 'metemple') {

It's only affect the specific group and looks very nice.

It's pity that every group page don't have it's own unique id or class name. Otherwise we can use pure CSS instead of Javascript. ^^

[Bernard Lama]

Hi Alex,

Glad you like my tip. That's right Alex every group page doesn't have its own unique  ID. So ultimately we have to use javascript code.

[Alex 小正正]

You are very welcome Bernard. I'm thinking the performance maybe better if using regular expression instead of split(). :)

[JFarrow]

Bernard, could we list multiple groups by listing the group ids as  classifieds,anothergroup,anothergroup  ?