sidebar options

[mikecooperParticipant]

Hi Zeaks,

Im using twenty ten options 1.5.

Is there any way in which i can have multiple sidebar options? Something like, on my homepage a left sidebar but on individual posts have two sidebars one primary sidebar to the left and secondary sidebar to the right?

[ZeaksParticipant]

You can use conditional CSS, each page has it’s own body class, you’ll simply have to use that class, then whatever CSS after it so it will be page specific. Do a search on these forums for conditional CSS for some examples.

Here’s a good post on the codex about body classes with a link to conditionals http://codex.wordpress.org/Function_Reference/body_class

[mikecooperParticipant]

Hi Scott hope you are well.

Im trying to get a bit of spacing between my left sidebar and the posts. I used firebug and played around with the css then when i got it how i wanted it i then went and entered the code into my style sheet but nothing changed? this is what i entered:

element.style {
border-right-width: 0;
padding-left: 10px;
width: 510px;
}

element.style {
margin-left: -10px;
}

The top piece of code is meant to put some padding between the content and left sidebar? I know the “element.style” part can’t be correct but im not sure what it should be?

Also the second part of the code is meant to move the left sidebar to the left by ten pixels which , which it does in firebug but just like the previous part when i paste the code into my style sheet nothing moves.

Any advice?

http://test.ftpcrepair.com

[ZeaksParticipant]

It’s the classes you’re using, they don’t target anything. Find out what the element.style are for, then use the proper classes. I don’t remember the classes and Ids of Twenty Ten off the top of my head, but I think they are #primary #secondary. The site you linked isn’t loading for me

[mikecooperParticipant]

Thanks Scott i will check those out. Sorry for the wrong link, should of been http://test.ftpcrepair.com

[mikecooperParticipant]

Nearly there but not quite. I now have used this:

#content {
border-right-width: 0;
padding-left: 10px;
width: 510px;
}

Which has given me some spacing between left sidebar and content. Now i just need to be able to move the #main left by ten px.

[ZeaksParticipant]

Hi Mike.

#main – everything listed below, is inside this area
#primary – left sidebar
#secondary – right sidebar
#content – the center content

If you want to increase the space between the left sidebar and the content you have to do 1 of 2 things.
Decrease the width of the left sidebar and increase the margin.
or
Decrease the width of the content and increase the margin.

Lets take a look at the layout

Width of #main 960px
Width of each sidebar is 200px, with a 10px margin on each, so thats s 210px width for each sidebar.
The content is 520px wide, so 210px+210px+540px = 960px
Since you have Ads in your side you probably want to keep that sidebar width, so we’ll decrease the width of the content and increase the space between the sidebar and content.

Here is the current CSS for the content

Code:

#content {
float: left;
margin-left: 210px; /* we’ll increase this */
overflow: hidden;
width: 520px; /* we’ll decrease this */
}

The content is 520px wide with a 210px left margin. That margin is the distance between the left side of #main, and the content (basically it’s the width of the #primary sidebar + 10px margin)
Decease the width by 10px, and increase the left margin by 10px.

Here is your final CSS and all you should need to change.

Code:

#content {
float: left;
margin-left: 220px;
overflow: hidden;
width: 510px;
}

Hope this helps with visualizing the layouts, It makes it easier when you can picture how everything is put together.

[MeganParticipant]

WOW this is sooo close to helping me, I can feel it! Unfortunately, I’m too much of a novice to fully grasp this (although I think I’ve got the big picture). So, what do I change in the PHP file for my three column template, in order to get the page to react to changes in my stylesheet? Right now, my left column is on top of my main content area, but when I tried adjusting the sizes in the style sheet, nothing happened. I believe it has something to do with me not calling to the correct classes on the page template??? I just have no idea how to fix it. After days, I would be so grateful for any help! Below is my template and the CSS code I’m trying to call to in the stylesheet. Thank you!!

< ?php
/**
* Template Name: Three Column Template
* Description: A Custom Page Template
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

< ?php get_sidebar(); ?>

< ?php the_post(); ?>

< ?php get_template_part( 'content', 'page' ); ?>

< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

.three-column #page { max-width: 1000px;}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.three-column #content {
margin: 0 34% 0 26.4%;
width: 40.4%;
}
.three-column #secondary {
float: right;
margin-right: 2.6%;
width: 20.8%;
}
.three-column #extra-sidebar{
position:relative;
float: left;
width: 15.8%;
margin-left: -70%;
}

[ZeaksParticipant]

Link your site please and I’ll take a look.

[HozeyParticipant]

Would someone please take a look at the attached pictures and the data below. I’m totally lost and confused. I’m working on this locally, so I can’t provide a site link. I’m using the NomNom 2 child.

/*THIS IS THE ORIGINAL CODE IN NomNom Child Folder/style.css*/

/* Three Column layout – left and right sidebars

---

*/
.three-column #page { max-width: 1000px;}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.three-column #content {
margin: 0 34% 0 26.4%;
width: 46.4%;
}
.three-column #secondary {
float: right;
margin-right: 2.6%;
width: 20.8%;
}
.three-column #extra-sidebar{
position:relative;
float: left;
width: 20.8%;
margin-left: -70%;
}

/*THIS CODE GIVES THE RIGHT WIDTHS but LEFT MARGIN OF LEFT SIDEBAR IS TOO FAR TO THE RIGHT*/

.three-column #page { max-width: 1000px;}
.three-column #content {
margin: 0 34% 0 15%; /*decreased margin to 15%*/
width: 55%; /*increased */
}
.three-column #extra-sidebar {
float: left;
margin-left: -70%;
position: relative;
width: 15%; /*decreased*/
}
.three-column #secondary {
float: right;
margin-right: 2.6%;
width: 23%; /*increased width to 23%*/
}

/*THIS CODE GIVES EXTRA WIDTH TO RIGHT SIDEBAR BUT DOESN’T DECREASE LEFT SIDEBAR AND OUTSIDE MARGINS ARE TOO WIDE*/

.three-column #primary {
float: left;
margin: 0 -27.6% 0 0;
width: 100%;
}
.three-column #content {
margin: 0 23% 0 24.6%;
width: 41.4%;
}
.three-column #content {
margin: 0 23% 0 24.6%;
width: 43.4%;
}
.three-column #extra-sidebar {
float: left;
margin-left: -70%;
position: relative;
width: 20.8%;
margin-right: 2.6%;
}[ATTACH=full]124[/ATTACH][ATTACH=full]125[/ATTACH][ATTACH=full]126[/ATTACH]

Thank you,
Hozey

[ZeaksParticipant]

Answered you in your other post

[Author]

Posts