sidebar options

Featured Theme Forums CSS and PHP sidebar options

This topic contains 10 replies, has 4 voices, and was last updated by  Zeaks 1 year, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #13270

    mikecooper
    Participant

    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?

    #14767

    Zeaks
    Participant

    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

    #14768

    mikecooper
    Participant

    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

    #14769

    Zeaks
    Participant

    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

    #14770

    mikecooper
    Participant

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

    #14771

    mikecooper
    Participant

    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.

    #14772

    Zeaks
    Participant

    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.

    #14773

    Megan
    Participant

    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%;
    }

    #14774

    Zeaks
    Participant

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

    #14775

    Hozey
    Participant

    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

    #14776

    Zeaks
    Participant

    Answered you in your other post

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.