ThemeShaper Forums » Thematic

[closed]

Full Width Custom Design on Homepage

(8 posts)
  • Started 3 years ago by andycheeseman
  • Latest reply from helgatheviking
  • This topic is resolved
  1. Hi,

    I want to create a custom homepage design that displays full width.

    I understand that I can associate the default full width template with a page within WP, however I also want to add some custom html into the homepage.

    Is it a case of associating the existing full width template with the homepage and hooking the content into the design using functions.php? Or is there a better way to do this?

    Thanks,
    Andy.

    Posted 3 years ago #
  2. why not create another template that is also full-width? which would require copying over the CSS from thematic's full-width template into your style.css as the body class generated by your new template will be different and thus thematic's css won't apply the full-page width stuff.

    OR

    just copy thematic's template-page-fullwidth.php into your child theme folder. then add your custom html. this has the benefit of not needing duplicate the CSS, but it also means that this custom would always be on the full-page template so depending on what you are doing you might not be able to use it for anything else.

    Posted 3 years ago #
  3. Thanks for your response.

    When I duplicate the full width template and add it to my child theme's directory, the newly created homepage.php still displays #container with a width of 620px and #content with a width of 540px.

    Using firebug I can see these values are being drawn from 2c-r-fixed.css.

    How can I make the #container fill #main using this method?

    Thanks,
    Andy.

    Posted 3 years ago #
  4. as i said you can either copy it and keep the same name, in which case you will automatically get the dynamic body class of .page-template-template-page-fullwidth-php that will trigger the full-width code in the 2c-r-fixed.css

    /*
        Full Width Template
    */
    
    .page-template-template-page-fullwidth-php #container {
    	margin:0;
    	width:940px;
    }
    
    .page-template-template-page-fullwidth-php #content {
    	margin: 0 0 0 10px;
    	width:940px;
    }
    
    .page-template-template-page-fullwidth-php #comments {
        width:540px;
    }

    OR if you copy it , but RENAME it then you no longer get that dynamic body class. if you have renamed it to homepage.php then your dynamic body class will be

    .page-template-homepage-php

    you could see this at work with firebug.

    thus the above style rules don't match b/c you don't have the right body class.

    you'd need to copy those style rules into your own style sheet and use the appropriate body class

    /*
        Home Page Template
    */
    
    .page-template-homepage-php #container {
    	margin:0;
    	width:940px;
    }
    
    .page-template-homepage-php #content {
    	margin: 0 0 0 10px;
    	width:940px;
    }
    
    .page-template-homepage-php #comments {
        width:540px;
    }
    Posted 3 years ago #
  5. Magic.

    I think I've come up with a solution by mixing the two options.

    I.e. I've assigned the default full page template to my 'homepage' page in WP, copied the three '.page-template-template-page-fullwidth-php' CSS rules into my childs CSS and modified their values to suit (overiding the default values) and finally hooked the necessary CSS into the homepage at 'thematic_abovecontent' using the following code.

    I'm unsure as to if I've chosed the right hook or exactly how the '.page-template' thing gets selected, but its a great learning curve.


    // Custom Homepage Above Loop
    function custom_homepage_above_loop() {
    if (is_home() || is_front_page()) {?>

    CODE FOR THE HOMEPAGE BEFORE THE LOOP GOES HERE

    <?php
    }
    }
    add_action('thematic_abovecontent', 'custom_homepage_above_loop');

    Thanks again,
    Andy.

    Posted 3 years ago #
  6. i'd probably try if(is_page_template('page-template-template-page-fullwidth.php'))

    check the wordpress codex for conditional tags

    Posted 3 years ago #
  7. mrmikeman
    Member

    how do i assign the full page template to my home page seeing is my home page is not static, i need my home page/category archive search etc, to be full width but all my other pages/posts to have the side bar like normal..

    Posted 3 years ago #
  8. http://forums.themeshaper.com/topic/remove-sidebar

    just insert your own brand of conditional logic

    see the codex for more on conditional logic
    http://codex.wordpress.org/Conditional_Tags

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.