Home Forums Academy Academy – how to get different page widths for Home page vs others

Academy – how to get different page widths for Home page vs others

  • metaphysician

    hi Ihor! i’m in the process of working on redoing our site and i can’t seem to set a page width template that goes to 100% full width, but only does it on the homepage. i want the rest of the site to have 85% page width but not the homepage content. header/footer stays at 100% width which is fine. i see a lot of templates available in the Editor but the results aren’t really what i’m looking for.

    is it possible to override default page width just on one page only? i’m mainly editing .row width via CSS to get the desired page width on a page. but then that affects the home page as well which i would not prefer. any help or advice appreciated!

    ihor Staff

    Please sign in or register to view replies from the support staff.

    metaphysician

    hmm – well it sort of works, but it resizes the whole page on the header as well as the content. here’s what i put in:

    body.home{
    width:100%;
    }

    body:not(.home)
    {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color:#DDD;
    }

    so home page is this:
    http://staging-redesign.gameaudioinstitute.com/

    and content page is this:
    http://staging-redesign.gameaudioinstitute.com/schoolsnew/

    ideally i want the header and footer to stay exactly the same width and only the content width to change. i’ll keep working on it but let me know what i need to do to make this happen.

    metaphysician

    okay this has been solved (worked around really) by using a Multi theme plugin. i set the Homepage to one copy of the Academy child theme, and the rest of the pages to the other copy. it’s pretty close to convincing. thanks for your quick response!

    ihor Staff

    Please sign in or register to view replies from the support staff.

    metaphysician

    well, multi theme plug in seemed to work fine for me. i actually deleted the body:not selector code – i left body alone and instead changed .row element width for WordPress, so one child copy of Academy has row width set to to 100% for the home page and the other child copy handles the rest of the site at row width 85%. i had to make a few CSS header adjustments but because i had access to two separate CSS inline style sheets i was able to get it pretty close, and using row meant that the header didn’t resize as well. anyway this seems to work fine for my purposes.

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

You must be logged in to reply to this topic.