Same sidebar with different width depending on page

  • spinosa2

    (@spinosa2)


    12 years, 7 months ago

    Hello,

    I have a sidebar on the right that I want to set different width depending on the page.

    If the page is a regular page then I want the regular width for both the sidebar and the content area.

    But if the page is an article then I want a lower width for that same sidebar. Also, since the sidebar would have a lower width, the freed space should be taken by the content area.

    Is it possible to do this?

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • CharlesClarkson

    (@charlesclarkson)

    12 years, 7 months ago

    If your theme uses the body_class() function to add classes to the <body> tag then each page has a unique body class for that page. You can use a CSS selector that identifies the page.

    For example, on my web site, the home page has this <body> tag:

    <body class="home blog logged-in admin-bar no-customize-support custom-background header-full-width full-width-content">

    The home class is unique to the home page of the web site. No other page has a home class in the body tag.

    So, any CSS selector that begins with body.home will only affect the home page.

    Thread Starter spinosa2

    (@spinosa2)

    12 years, 7 months ago

    Hey, thank you for your answer.

    I want to do this for the blog section of my website (individual articles and the blog archives page)

    Here is the body tag of an individual post:

    <body class="single single-post postid-1102 single-format-standard logged-in admin-bar no-customize-support custom-header header-image sidebar-content-sidebar">

    and here is the body tag of the blog archives:
    <body class="archive category category-blogue category-6 custom-header header-image sidebar-content-sidebar">

    And the sidebar has div id sidebar.

    For the single post page I tried:

    .single #sidebar {
width = 50px;
}

    but it did not do anything

    CharlesClarkson

    (@charlesclarkson)

    12 years, 7 months ago

    CSS doesn’t use equal signs (=):

    .single #sidebar {
    width: 50px;
}
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Same sidebar with different width depending on page’ is closed to new replies.