Jump to content
Sign in to follow this  
highreach

How do you change the sidebar width on just the home page?

Recommended Posts

highreach    1
highreach

Hello, I have read several similar forum topics for a while, but have not found any solutions yet. So far I have been able to change the sidebar width on every page, but not on just one page. I want to make the right sidebar wider on just the home page. Any ideas on how to do this? Thanks a ton.

Share this post


Link to post
Share on other sites
Rob    547
Rob

When you say you've been able to change the sidebar width on every page, do you mean individual pages with unique widths or globally?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
highreach    1
highreach

I have been able to change it globally. If I get the homepage width I want, it changes on every page. I would like to change the sidebar width on the home page, but have it remain the same everywhere else.

Share this post


Link to post
Share on other sites
catrina    103
catrina

You can change the width in only the homepage by adding this to your Custom Code > Custom CSS:

body.home div#sidebar2 div.scolumn {width: 500px;}

^ Change 500 to the pixel width you want.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
highreach    1
highreach

Hey Catrina, Here is all the code that I have been using in Pagelines >Settings> Custom Code. I have not been able to get it to work yet. I am sure I am missing something. Any ideas? body{} #bp-adminbar-visitrandom-menu {display:none;} body.home div#sidebar2 div.scolumn {width: 500px;}

Share this post


Link to post
Share on other sites
catrina    103
catrina

Try this instead:

body.home div#sidebar2 div.scolumn-pad {width: 500px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
highreach    1
highreach

still no luck :/ I put the code the "custom code" section of the pagelines settings tab, but it ended up cutting off the right side of all of the posts in the right hand column. Any other ideas?

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

You will probably need to declare the width for the content section as well. Make sure you've downloaded Firebug for Firefox and check out W3 Schools for more info. Also please be sure to watch our Firebug video tutorial here.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
highreach    1
highreach

Simple_mama, Thanks for the resources. Heres where I am at so far: body.home div#sidebar2 div.scolumn-pad {width: 500px;} p { border-style:solid; border-right-width:15px; } This keeps the cutoff content in the right sidebar and adds a thick black line to the right of each post excerpt. I think the first part " body.home div#sidebar2 div.scolumn-pad {width: 500px;}" is good because it seems to make the content extend further to the right. The next thing that needs to be figured out is how to make the left hand side of the right sidebar extend further to the left. I'll keep plugging away to see if I can come up with it. If anyone has any additional suggestions / resources / easier ways to do this, please send them my way.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Would it be possible to provide a screenshot or concept image of how you would like your homepage to look please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
highreach    1
highreach

Below is a screen shot of what my home page looks like. What I would like to do is take the right hand sidebar and make it wider. (Doing this will also make the content area smaller) I would like the make the right hand sidebar about 500 pixels wide so that it comes out somewhere around the word "China" in the post titled "Gutter Oil: Food Quality In China". Let me know if this description helps. If not, I can try another method of explanation. As always, Thanks a bunch for all of your help. 2506u87.png

Share this post


Link to post
Share on other sites
Rob    547
Rob

I believe this is a customization that's going to need a pro developer's attention. I'd suggest you seek out one of our Pros at http://www.pagelines.com/pros and seek a quote for this. Unfortunately it's outside the scope of normal forum support. Alternatively, do you have any WP developers available? They may be able to help you with this.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
highreach    1
highreach

Bummer. I'll post how I was able to change column widths once / if I am able to figure this out. Final questions: Jenny recommended I check out a website called w3 to learn how to code so I can change the column width on my pagelines site. Does anyone have any recommendations on what topics / area of website coding I should focus on to allow me to do this? So far I have been focusing on CSS, but have found it to be a very broad topic. Any additional recommended search terms would be really helpful. Also, do any of the developers know if the ability to change column width on a single page without the need to learn to code is coming to pagelines anytime soon? I am sorry for my ineptitude at figuring out this coding and truly appreciate the attempts to help me make the site we need. Cheers

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Highreach, I have compared your concept image and your websites homepage and they look the same or have I missed something ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
highreach    1
highreach

Nope, you didn't miss anything. The picture is what my homepage looks like. Above the image I had included a description of what I am trying to do, attempting to use "landmarks" (pagemarks?) on the page to give readers an idea of what I wanted to move where.

I would like the make the right hand sidebar about 500 pixels wide so that it comes out somewhere around the word "China" in the post titled "Gutter Oil: Food Quality In China".
Sorry for the lack of clarity. I have added some additional info to the pic below. Essentially, i want to make the right hand sidebar wider on the home page. 29blt1d.jpg

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Try adjusting these 2 values:

.two-sidebar-center #pagelines_content #column-wrap {
	    width: 82.1856%;
	}
	.two-sidebar-center #pagelines_content #sidebar-wrap {
	    width: 17.8144%;
	}
And to make them specific to that page, you'll have to throw a
.home-page

in front. ;-)


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
highreach    1
highreach

Okay Pagelines. You win. simple_mama and the rest of the gang, I sincerely appreciate your help with this. I have run with these suggestions as far as I can. I simply can't get this to work. Assuming I have tapped all the resources available to do this myself, does anyone have a recommendation on how much this will cost to pay someone else to do? Thanks.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×