• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Changing width for BlogNews Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Changing width for BlogNews Theme

This topic is: resolved

Tagged: float, theme, Width

  • This topic has 3 replies, 2 voices, and was last updated 9 years, 4 months ago by Draceadan.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 26, 2014 at 10:45 pm #106910
    Draceadan
    Member

    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
    May 27, 2014 at 12:12 am #106911
    Len
    Participant

    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

    May 27, 2014 at 2:48 am #106918
    Draceadan
    Member

    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?

    May 27, 2014 at 5:29 am #106942
    Draceadan
    Member

    It worked... in the end.

    Thanks!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Changing width for BlogNews Theme’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble