JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Remove Right Column from All Pages - New Design Studio

Remove Right Column On All Pages - New Design Studio

The tip to remove the right column for all pages has been on JenSocial for quite some time. With the new Ning Design Studio, the code has changed significantly. I decided instead of messing with the original tip, to add a new one.

Select the CSS based on the Design Studio Layout you are using:

A1 & A4
.xg_widget_page .wpage {width:965px!important;}
.xg_widget_page .xg_column div.xj_canvas {width:980px!important;}
.xg_widget_page .xg_span-5.xg_last{ display:none!important;}

A2 & A3
.xg_widget_page .wpage {width:965px!important;}
.xg_widget_page .xg_column div.xj_canvas {width:980px!important;}
.xg_widget_page .xg_column.xg_span-5 { display:none!important;}

B1 & B4
.xg_widget_page .wpage {width:965px!important;}
.xg_widget_page .xg_column div#xg_canvas {width:980px!important;}
.xg_widget_page .xg_span-7.xg_last{ display:none!important;}

B2 & B3
.xg_widget_page .wpage {width:965px!important;}
.xg_widget_page .xg_column div#xg_canvas {width:980px!important;}
.xg_widget_page .xg_span-7{ display:none!important;}

Old Editor:

.xg_widget_page .xg_span-16 {width:945px!important;}
.xg_widget_page .xg_column .xj_classic_canvas {width:980px!important;}
.xg_widget_page .xg_span-4.xg_last{ display:none!important;}

Add the CSS for your selected layout, to your Advanced CSS.

Save and you're done.

Enjoy!

Jen

1 member favorited this

Replies to This Discussion

Permalink Reply by Ashary on May 17, 2011 at 2:01am

Hi Jen,

I am puzzled with how my two networks - http://globalmsuans.net and http://gapon.net - display the pages. The former displays pages properly (without the right column) while the latter displays pages but doesn't remove the right column. Screenshots below. Any idea?

How can I do the same on Notes?

As always, thanks a lot Jen. May your tribe increase.

God bless!

Permalink Reply by JenSocial on May 17, 2011 at 10:51am

Wow, the engagement icons look great on your site!

I can't access the site where it's not working, due to private site. Can you email me a test username/password so I can sign in?

Are the layouts the same in Design Studio?

Best,

Jen

Permalink Reply by Susan Kay Daniels on May 30, 2011 at 12:19pm

Thanks for this great tip. This will help me a lot. You are the best!

Warmly,

Susan

Permalink Reply by Mr Schmooze™ on July 8, 2011 at 5:55am

i guess this tip s no longer useful, since ning now offers the option to use the full page width.

But it's worth noting that this one of the most valuable tips i've come across on Jensocial. So here i am to pay homage and say bye-bye to the tip....

Well done Jen! More grease to your elbow!

Permalink Reply by JenSocial on July 8, 2011 at 11:39am

True. And thanks! But, I think it's still good to have it around for the class names and structure. I will close it soon. Thanks for the reminder. ;-)

Permalink Reply by Neuerotica on July 22, 2011 at 8:07am

What full page width? How do you do that? I want to make room for group pages by ridding myself of the columns. Not sure if it's possible with the two column theme, however.

In the meantime, I'll dig around and figure how turn this function on. Thanks. Jen and Mr. Schmooze.

Permalink Reply by Neuerotica on July 22, 2011 at 8:58am

Never mind. I figured it out, and I reread the title of this post. I thought it was in reference to our network pages in general. I have the two column layout, and my interest is in removing the left column for the home page of all groups. Is this at all possible?

I also seem to recall there had been a way to theme a groups CSS that would differentiate it from the rest of the network, no?

Permalink Reply by JenSocial on July 22, 2011 at 12:07pm

Hi Thunder,

The only thing I've been able to do without messing up the Groups is to widen the main Group page. But, it shoves the members and controls to bottom of page. You see how it looks in my Groups here. That is a tip in the VIP Group. And yes, you can style a Group by including your CSS in the Group Text Box. I haven't done it in a long time, and don't think I've ever written a tip to do it. Maybe I have, just found this on my hard drive.

How to Style a Group with CSS:

You will need to know how to:

Write simple CSS for a Ning site.
How to upload your CSS file to a server, or via a Ning blog.
How to copy/paste (grab) the CSS file path.

When your CSS is ready, replace the CSS path with the file path for your CSS.

Instructions:
1. Create your custom style sheet (CSS).
2. Using the code below, replace the CSS file path with your CSS file path.
3. Add the code to the main text box of your Group.

<link rel="stylesheet" type="text/css" media="screen,projection" href="yourfile.css">

Create a Simple Style Sheet (add background image):
The example below will show you how to create CSS to add add a background image to your specific group.

Create, or have a background image ready.
Upload your background image to an image server, or to Ning via a Blog.
Instructions on how to add image via a Ning Blog are bulleted below.
- Add a new Blog.
- Click on "Attach File" to the right of the camera/photo icon.
- Browse your Computer and locate the image file.
- Upload/Add File.
- After the file is uploaded to the blog, click on the HTML tab.
- Locate the image path immediately following: a href=".
- Copy the full link not including the quotes or other HTML, by pressing Ctrl + C (for copy).
Add the following code to a text file using a Text Editor like notepad.
Change the image file path to your image path. You can press Ctrl + V for paste.
Save your CSS file.
Follow the exact same instructions to upload the CSS file via a Blog, and use that file path (URL) to insert in the code above.
You should see your background image in the specific Group where you added code to the Text Box.

body {
background-color:#000000;
background-image:url(yourbackgroundimage.jpg)!important;
background-repeat:no-repeat;
}

This code would be saved to a CSS file.

Hope all the steps are there,

Jen

Permalink Reply by Neuerotica on July 22, 2011 at 12:35pm

Oh! Didn't mean for you to have to post all of this. I thought maybe a link to a post here, since I do recall reading it from you last year I believe. What I wanted to know is if a member could use these instructions and theme their group. From what I gather from reading your tutorial here, it seems it is possible.

Thanks just the same, Jen.

Permalink Reply by JenSocial on July 22, 2011 at 1:01pm

Oh no problem, I had the information in a text file. You may want to test adding code in text box, as an Admin instead of the Creator. Admins cannot add scripts or iframes to Groups, for security reasons. I'm not sure about linking a CSS file.

Best,

Jen

Permalink Reply by Neuerotica on July 22, 2011 at 1:02pm

Thanks again, Jen!

Permalink Reply by Mandy G. on March 6, 2013 at 3:31pm

thanks, this was helpful. ..is thre any way to also get rid of the 2nd column (b1) layout in the pics/vids section? been looking for that everywhere =)

thanks, Mandy