WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change the content width on only one page (10 posts)

  1. bquik
    Member
    Posted 11 months ago #

    I'm looking for a way of extending the content width of a single page.

    I wanted to remove the sidebar on this specific page(it is visible on all the other pages) and did so by creating a new .php file called "blank" which did not include the sidebar. So far so good, but the space where the sidebar used to be is still occupied and blank. How do I make the content full witdh on this page only?

    Here is a link to the page which I want to change:
    http://bquik.se/om-bquik-redovisning/

    I really appreciate your time

  2. lemu
    Member
    Posted 11 months ago #

    add this to your stylesheet

    .page-id-6 .site-content{
        width:100%;
    }

    This CSS will only apply to the page with ID: 6. Be aware that if the ID changes that the CSS won't work anymore.

  3. bquik
    Member
    Posted 11 months ago #

    It works!

    Thank you so much!

  4. bquik
    Member
    Posted 11 months ago #

    One more additional question:

    How do I re-write it if I want to have more pages the same way?

  5. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    You can find the page specific class in the body tag for the page - for example your home page shows:

    <body class="page page-id-6 page-template page-template-Quikportal-php">
  6. bquik
    Member
    Posted 11 months ago #

    I'm sorry but I did not understand that.. (I'm not very good at codes etc)

    Where can I find this? And what would I use it for?

    What I'm looking for is for example I want the pages with ID 6, 7 and 8 to have 100% width. I can do that for only the page with ID 6 with the code lemu wrote. Now I'm looking for a way to re-write the code so that it works for multiple page-ID's.

    I.e this one so it works for 7 and 8 as well:

    .page-id-6 .site-content{
        width:100%;
    }
  7. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Sure, try this:

    .page-id-6 .site-content,
    .page-id-7 .site-content,
    .page-id-8 .site-content,
    {
        width:100%;
    }

    You have to look in the generated HTML code for the pages you want in the body tag - using a browser tool like Firebug or View Source in a browser shows you the code. Find the body tag as I posted above and see what the the page-id-# is.

  8. bquik
    Member
    Posted 11 months ago #

    Oh ok :)

    I tried it but it does not work..

  9. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Which page(s) are you trying to change?

  10. bquik
    Member
    Posted 11 months ago #

    I got it to work by writing it

    .page-id-247 .site-content
    {
        width:100%;
    }
    
    .page-id-246 .site-content
    {
        width:100%;
    }

    :)

Reply

You must log in to post.

About this Topic