Changing width for BlogNews Theme

Community Forums Forums General Discussion Changing width for BlogNews Theme

This topic is: resolved

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Draceadan 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #106910

    Draceadan
    Member
    Post count: 20

    I tried modifying the width of my theme (Genesis BlogNews from WP-Canada), but there seems to be some problems.

    If I change the width for the whole theme, then the theme floats to the left.
    If I change the width independently for the header, body and footer, then the header and body remain centered while the footer floats to the left.

    I changed the width of the body, but it floats to the left. If I disable the “float: left” options of the theme, then all my posts and widgets get messed up.

    Anyone?

    http://ethink.ro
    #106911

    Len
    Participant
    Post count: 23

    Hi Draceadan.

    If you want to change the width of the theme you need to change it in 3 different places:

    • .site-container
    • .footer-widgets .wrap
    • .site-footer .wrap

    Now, the width for the .site-container is currently defined in the style sheet as max-width: 1180px; Normally this is all you would need to change however if you take a peek in the functions.php file you’ll see that I moved both .site-footer and .footer-widgets out of the .site-container. Thus the width of .site-container doesn’t affect them because they don’t reside within .site-container.

    Actually both .site-footer and .footer-widgets span the full width of the page. If you apply a background colour to either one you’ll see what I mean. What I’ve done with both of those is create a wrap for each one and centered it which gives it the illusion they are both sitting within the .site-container.

    So, you need to adjust …

    .site-container {
    	background-color: #fff;
    	clear: both;
    	margin: 32px auto 0;
    	margin: 3.2rem auto 0;
    	max-width: 1180px;
    	overflow: hidden;
    	padding: 40px;
    	padding: 4rem;
    }

    and …

    .footer-widgets .wrap {
    	background: #3b5998 url(images/lines.png);
    	clear: both;
    	margin: 0 auto;
    	max-width: 1180px;
    	overflow: hidden;
    	padding: 40px;
    	padding: 4rem;
    }

    and …

    .site-footer .wrap {
    	background-color: #fff;
    	margin: 0 auto 32px;
    	margin: 0 auto 3.2rem;
    	max-width: 1180px;
    	overflow: hidden;
    	padding: 40px;
    	padding: 4rem;
    }

    Obviously after changing those you’ll need to do a bunch of fine tuning to get everything looking nice such as paddings/margins, content width vs sidebar width etc


    #106918

    Draceadan
    Member
    Post count: 20

    Hello, Len!
    I ve been trying to contact you on google plus.
    Observation:
    1) Yes, I saw that the site footer and footer are outside the site container. I don’t know why some thought that this is a good ideea, but…..! This is the problem I am facing.
    If I change the width separetly to all these parts, then the site floats to the left. And, I assume, that the problem lies in the footer part of them, because:
    a) If I change the the width of the full them, then it floats to the left
    see: http://i1071.photobucket.com/albums/u502/Ethinkro/Width-all_zpsdcce072f.png
    b) if I change the width in each section then the footer goes to the left, the header and body remain centered.
    see: http://i1071.photobucket.com/albums/u502/Ethinkro/width-individualy_zpsb21baa8b.png
    So…..
    How do I make the footer not flow to the left?

    #106942

    Draceadan
    Member
    Post count: 20

    It worked… in the end.

    Thanks!

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

The topic ‘Changing width for BlogNews Theme’ is closed to new replies.