WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change width of content for certain page (8 posts)

  1. burrit0s
    Member
    Posted 2 years ago #

    Hello, I am using theme Grey White Black and the page in question is here http://ilovelightshows.com/community/.

    On this page I am integrating a forum and I want it to be much wider than the other pages. I am using a custom page template for the forum page because I didn't want the sidebar. How do I go about making this page wider and not the other ones?

    Thanks.

  2. mattmagi
    Member
    Posted 2 years ago #

    You will notice that each page has a POST id.

    The best way to find this is view source and search for "</head>" just after that you will see a line that looks like this "<body class="page page-id-366 page-template page-template-page-forum-php">"

    In this case your page id is 336.

    You can then edit your style.css file.

    So if you use the CSS class:

    .page-id-366 {
    width: 400px; (for example)
    }

    it will modify only that page's container width. you can put any css in there that you want only applied to that page, even change background or text color etc.

  3. burrit0s
    Member
    Posted 2 years ago #

    Thanks for the quick response, but entering in that code only makes the entire page wider for that page. I want the content in the middle to be wider.

    I entered in:

    .page-id-366 {
    width: 1200px;
    }

    and all it did was make me able to scroll horizontally more. What can I put in there so it knows to only make the content or main area wider?

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    you can also use the body class specific to that page template:

    example:
    .page-template-page-forum-php .content { width: 1200px; }

  5. burrit0s
    Member
    Posted 2 years ago #

    Worked perfectly alchymyth! Thanks to both of you for helping :)

  6. mattmagi
    Member
    Posted 2 years ago #

    well right now your css is not related to anything.

    I believe this is what you want:

    .page-id-366 #spMainContainer {
    width: 1400px;
    }

    .page-id-366 .content {
    width: 1400px;
    }

    Let me know if that works.

    Or you could do what was mentioned but note that will change ALL the pages using that page template.

  7. burrit0s
    Member
    Posted 2 years ago #

    Mattmagi, I tried

    .page-id-366 .content {
    width: 1400px;
    }

    and it worked too! Thanks

  8. mattmagi
    Member
    Posted 2 years ago #

    cool, no problem that way it will only adjust that ONE page.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.