WordPress.org

Ready to get started?Download WordPress

Forums

Tiny Forge
[resolved] Content width and Fixed Site-Navigation etc (7 posts)

  1. milkyco
    Member
    Posted 5 months ago #

    Hi Tomas, great theme, just what I've been looking for to switch my friend's Blog from Twenty Eleven onto.

    I actually have a couple of questions if you have the time to consider them.

    1, I plan to make the #Primary a bit wider and the #Secondary a bit narrrower. I know how to do it, but as you're % values are quite specific at the moment, I wondered if there were any guidelines about what %'s to increase and decease the divs by in relation to each other to keep the site flowing nicely?

    2, I have been trying for a couple of days to make the site-navigation fixed. I can do it but, I cannot seem to make the width responsive. The site-navigation aligns with the left inside of the enclosing div but it overhangs the page on the right hand side. I don;t suppose you can help at all?

    Many thanks, David

  2. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    Do you have the site live, so I could look at?

    At this time we have:

    .site-content width: 65.104166667%;
    .widget-area width: 30.5%;

    You can try old rules from twenty twelve:

    .site-content width: 65.104166667%;
    .widget-area width: 26.041666667%;

    Otherwise, just change the values and visually check if the sidebar doesn't become too close to content.

  3. milkyco
    Member
    Posted 5 months ago #

    Hi Tomas. Yes my test site is live but password protected. Can I send you a private message with the password? Many thanks, David

  4. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    Sure, my email is in readme.txt

  5. milkyco
    Member
    Posted 5 months ago #

    Hi Tomas, thank you very much for your help. I will make a donation to you to say thank you.

    I tried using the waypoint jQuery but I'm afraid that even though I managed to get it to load via the child functions.php, I could not get it to work and it is way beyond the scope of my knowledge. It looks excellent though.

    I did get another simpler jQuery script to work though to give me a fixed sidebar instead. It's not as elegant as the smooth drop down menus via waypoint but it does the trick for now.

    I also opted for a "position: fixed" top header with elusive icon links for small devices where the sidebar is at the bottom of the page using @media queries and editing the header.php to add a #top-header div. Still got a lot of work to do but it's getting there.

    I have one further question regarding the content width by the way:

    In the functions.php file on line 79, it has this code

    // 1.0 - Set up the content width value based on the theme's design and stylesheet.
    if ( ! isset( $content_width ) )
    	$content_width = 625;

    I assume I should update that with the new #primary width when I have set it? It's 1 pixel larger than the #primary width as it stands isn't it?

    Could you tell me exactly how I would overide the the orginal width in the child functions.php please? Or do I just add the exact same code to the child functions.php and edit the width?

    Many thanks, David

  6. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    If you changed (made bigger) the width not a lot, I would leave it as it is. You see, $content_width does only one thing - it prevents images and videos to overflow the content container boundaries. That's it.

    Here is discussion:

    http://wordpress.stackexchange.com/questions/11766/what-is-the-role-and-history-of-the-content-width-global-variable

    So if you would add very big image to your post, it would auto-sized to the $content_width value. If you think that your design needs to make max. image width bigger, only then you would need to consider the change.

    In that case you will need to override it:

    // Override content width (for photo and video embeds)
    $content_width = 500;
    
    // Display 1000px width content if full width page template
    function mytheme_content_width() {
        if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() ) {
            global $content_width;
            $content_width = 1000;
        }
    }
    add_action( 'template_redirect', 'mytheme_content_width', 11 );

    I found this good tip here: http://zeaks.org/2012/twenty-twelve-theme-three-column-layout

  7. milkyco
    Member
    Posted 5 months ago #

    Hi Tomas, thank you very much, that's a great help. Very good to know about that and very interesting articles too.

    All the best, David

Reply

You must log in to post.

About this Theme

About this Topic