widthtut

Finishing Twentyeleven: Adjusting Margins, Widgets, and the Header

Let’s finish what we started yesterday. We’ve started up a new child theme, and made a few customizations to twentyeleven through our child theme already. We’ve got a wider theme, a wider header image (but shorter), and we’ve allowed ourselves to use little images for our featured image header if we want. Let’s finish this up by reducing white space, adjusting the header some more, and wrapping the widgets.

Once my theme was wider, I wanted to get myself some more widget space. I did this by reducing margins. So picking around twentyeleven’s style.css I was looking for widths, margins, etc to reduce, or expand as appropriate. Here’s the original css from twentyeleven that I’m going to hack up:

#branding hgroup {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}

That’s from the structure area. Down from the footer area we have:

#supplementary {
	border-top: 1px solid #ddd;
	padding: 1.625em 7.6%;
	overflow: hidden;
}

In the content area I found some margins to shrink:

#main {
	clear: both;
	padding: 1.625em 0 0;
}

I also decided I wanted my single post view to stretch out a bit so I found this:

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 68.9%;
}

And while I’m at it, there’s too much space above the post titles so I’m finding:

.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}

I think that covers finding everything I need to edit. Remember, if I missed anything, I’ll have a review post tomorrow with all the code directly out of my child theme. So now that we’ve found what we need to adjust, bring it into your child theme. I’m using the @import rule in my child theme css, so I just copy over the rules and adjust them. Here’s my css edits to what we have above. Remember, you don’t have to bring over the entire definition for an item, just the line you want to change. Sometimes I bring over the whole block anyway, sometimes just the one line. Probably not the best thing to do. The cleanest way to do it would be to only have things that you’ve changed in your style.css. Anyway, here’s the goods:

#branding hgroup {
	margin: 0;
}
#main {
	clear: both;
	padding: 0.625em 0 0;
}
#primary {
	float: left;
	margin: 0 -32.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 32% 0 4%;
	width: 62.4%;
}
#secondary {
	float: right;
	margin-right: 4%;
	width: 24.8%;
}
#supplementary {
	border-top: 1px solid #ddd;
	padding: 1.625em 4%;
	overflow: hidden;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 75%;
}
.entry-title {
	padding-top: 5px;
}

That’s it for my layout. I’m happy with that. I have wider widgets, more post space, less white space…it’s all good. You may want to do some work with the access div, and the actual menu if you aren’t happy with how that looks. I’m still making my mind up about that one.

And now for something completely different…. let’s attack that header. We’ve already got a nice header image from yesterday’s post. And I added a nice border to the top of the header. If you followed along with that yesterday, it probably looks like butt. That was just in preperation for today. That border will become the very top of my page. So I’m going to hide the site name, and relocate the description and search form. This will take just a bit more work, we have to chop up header.php a bit, which means it needs to be in your child theme. But if you followed yesterday, it’s already there. Let’s do it!

What I need to do, is grab the header info, and move it in the code, so I can get that stuff out of the very top of the page, and overlay it over my header image. Toward the top of the display portion of header.php we have this business:

	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>

I’m going to cut it right out of there, and move it down several lines. It’s actually going to go underneath the code for the search form. So in twentyeleven’s header.php, I found this:

				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>

And added that hgroup right in there, so the two combined look like this:

				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<hgroup>
				<h1 id="site-title"><?php bloginfo( 'name' ); ?></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>

			<?php endif; ?>

You’ll notice that in the h1 I hacked off the link. I didn’t need them so I got rid of them. THere’s no reason for you to do that honestly. But since I’ll be hiding the text, why not remove the extra junk. So that’s it for the setup. If you look at your site now it should look perfect! Perfectly bad anyway. We still have to adjust the css. So I need to further adjust some margins. Relocate the search form and description, and highlight the description a bit to make it stand out over the header image. CSS time again.

Here’s the original bits from twentyeleven’s style.css affecting what we need changed:

#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}
#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}
#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 7.6%;
	text-align: right;
}

Those are the rules I need to change. Most come from the header section. The last one comes from the searchform section. Here’s the new stuff I came up with for my theme:

#branding img {
	padding-top: 10px;
	border-top: 2px solid #333;
}
#site-title {
	text-indent: -999em;
	padding: 0;
}
#site-title a {
	color: #111;
	font-size: 1px;
	font-weight: bold;
	line-height: 3px;
	text-decoration: none;
	height: 1px;
}
#site-description {
	margin: 0;
	font-size: 14px;
	position: absolute;
	right: 40px;
	top: 20px;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
	font-style: italic;
	font-size: 1.2em;
	background: #fff;
	background: rgba(158, 151, 134, 0.6);
	border: 4px double #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 5px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
}
#branding #searchform {
	position: absolute;
	top: 150px;
	right: 40px;
	text-align: right;
}

ANd that is it for the header. Just to finish up I dropped this in to style our widgets a bit, and to center the tag cloud (it’s the only thing I like centred).

.widget {
	background: #9e9786;
	background: rgba(158, 151, 134, 0.6);
	border: 4px double #ffffff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 5px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	list-style-type: none;
}
.widget_tag_cloud .tagcloud {
	text-align: center;
}

Alright, we are done homey! What do you think? Obviously you may not like my choices here. This is just my personal taste. Change up the colours, play with the margins, etc. On a flexible theme, you have to be careful with your math. Remember, nothing can be wider than the containing element. So when adjusting margins, if your content area and your sidebar area (remember to consider padding and margins) get to be too big, you’ll find your sidebar showing up under your content area. Ya gotta get your math right. I sometimes have a hard time and it turns into trial and error when working with percentages.

Just remember to use the tools available to you. Maybe that’s firebug for firefox, or the built in tools in chrome. These tools can help you know what div is where, where are your margins? Why don’t things fit? Use the tools to discover. And another favourite tool is kuler. That one is great for finding colours. Use it to grab hex codes, or rgba codes for your css rules. Use it to find complementary colours, etc.

So that’s it for the basics of getting started with tweaking twentyeleven through the use of a child theme. Of course there is a million things you can do. But we wanted to start with getting familiar. I mean if you look at it, you’ve now tweaked a layout, used a child template (header.php) to override the parent with customizations, and even used a function to adjust a parent. You’ve got a nice foundation going. Tomorrow I’ll post up the cumulative code so far in case I missed any tiny details here.

56 thoughts on “Finishing Twentyeleven: Adjusting Margins, Widgets, and the Header”

  1. I’m playing with twentyeleven myself at the moment. I’ve got a routine in functions.php to add my own header images as a child theme – but I have yet to be able to de-register the default images.

    Have you managed that yet?

  2. This is what I have – but the images are still there….. the first bit, adding my images, works fine…. the second bit (unregistering), does not. Most frustrating – this is where I got to before my original comment – but had tried a few other things before coming back due to your comment. (I’ve cut out most of my images as not relevant, but left two to give the flavour).

    add_action( ‘after_setup_theme’, ‘murkytheme_setup’, 11);
    function murkytheme_setup(){

    /* Add additional default headers */
    $murky_dir = get_bloginfo(‘stylesheet_directory’);
    register_default_headers( array (
    ‘Wasps’ => array (
    ‘url’ => “$murky_dir/images/wasps.jpg”,
    ‘thumbnail_url’ => “$murky_dir/images/wasps-thumbnail.jpg”,
    ‘description’ => __( ‘TWasps by murky’, ‘murkytheme’ )
    ),
    ‘seagull’ => array (
    ‘url’ => “$murky_dir/images/seagull.jpg”,
    ‘thumbnail_url’ => “$murky_dir/images/seagull-thumbnail.jpg”,
    ‘description’ => __( ‘Bridge by murky’, ‘murkytheme’ )
    )

    ));
    unregister_default_headers( array(
    ‘Wheel’,
    ‘Shore’,
    ‘Trolley’,
    ‘Pine Cone’,
    ‘Chessboard’,
    ‘Lanterns’,
    ‘Willow’ ,
    ‘Hanoi Plant’)
    );
    }

      1. OK, it was simple really. Use two different functions. Both on after_setup_theme. But use priority 11 on the removal, and don’t set priority on the addition.

        // REMOVE SOME DEFAULT HEADERS
        function voodoo_header_out() {
        unregister_default_headers( array(
        'wheel',
        'shore',
        'trolley')
        );
        }
        add_action( 'after_setup_theme', 'voodoo_header_out', 11 );

        //ADD NEW DEFAULT HEADER
        function voodoo_header_in() {
        $vp_dir = get_bloginfo('stylesheet_directory');
        register_default_headers( array (
        'voodoopress' => array (
        'url' => "$vp_dir/images/voodooheader.jpg",
        'thumbnail_url' => "$vp_dir/images/voodooheader-thumb.jpg",
        'description' => __( 'VoodooPress', 'twentyeleven' )
        ),

        ));
        }
        add_action( 'after_setup_theme', 'voodoo_header_in' );

        1. Thanks! The trouble was, I was using the capitalised version in ‘description’ rather than the uncapitalised version.

          I’ve referenced this URL in the comments….. I am grateful to you, sir! (or madam!)

  3. Once this is done (if this is done!) the next thing will be to try and work out how to choose a particular header image based on category/tag (with some priority if multiple categories/tags have headers associated) – unless a post has a featured image.

    ….or to say ‘if this/these tags/categories, choose from these images’.

    I.e. cat X has images A, B, C
    tag Y has images B, D, E

    A post in cat X or with tag Y would have any of A,B,C,D,E as a header image (unless a featured image was chosen).

    Similarly, category pages and tag pages would have appropriate images applied.

    Whereas the above issue *should* work, and it’s frustrating when it doesn’t, this second thing is something upon which I have no clue how to start!

      1. I can see how to do it for a theme (if statements), but not for a *child* theme…. and then there’s making it userfriendly!

        E.g. I could imagine having a bunch of images for categories that you wouldn’t want in the main random rotation.

        1. Well….. to conditionalize the header from a child theme…. you would obviously need a version of header.php within the child theme. That’s what I always end up doing anyway. I try to bring as few files over from parent to child as I can, but I always need to hack header.php up so much that I just copy it over.

          1. Sure, that’s one way to do it, but it’d be a pain updating (potentially).

            I’ve been looking at header.php – the key looks like this:
            if ( is_singular() &&
            has_post_thumbnail( $post->ID ) &&
            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
            $image[1] >= HEADER_IMAGE_WIDTH ) :
            // Houston, we have a new header image!
            echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
            else : ?>
            <img src="” width=”” height=”” alt=”” />

            So, at least for non singular pages with a post_thumbnail, the routine header_image() is used.

            Perhaps in functions.php a hook or a filter that checks for particular category/tag pages, and returns appropriate image, otherwise returns the unfiltered header_image() ?

            I’m thinking it through on a conceptual level – if it’s possible to latch onto header_image() then it should be possible….. but I’m still a bit hazy with hooks/actions/filters etc.

            More reading!

  4. Hey Rev. Voodoo – many many thanks for this article! Great work, you helped me adjust where I needed to.

    Thank you!

  5. Hey, this is super great info. I plan to dig back through lots of this stuff, I just have a related question. I am actually looking to set a min-width because if I drag the window to small, my menu bar items start to wrap. I think that’s blunder in the template… I copied in your #page to my child and have max-width 1080px and min-width 1080px, but as far as I can tell, I can still drag the window too small. I’d like to set the min-width to be whatever doesn’t allow the menu bar to wrap. Ideas?
    Thanks again for all your 2011 posts, I will archive and dig through them!
    Carol

  6. Thanks Rev,
    I didn’t really want a static page, I just wanted the minimum to be set to not wrap the text. I put in min-width and it actually did not stop anything from getting smaller, far as I could see, so I was forced to static width. I might try again. It just ignored min-width entirely.
    Carol

  7. Hi. I am working with the twenty eleven theme and I would like a fixed or floating header. I am new to web design, do u have any suggestions on how to do this? Thank you.

    1. How much of the header? Just the image? Or all of the header (Which includes the site name and stuff above the image, the image, and the nav menu). I can probably fix the header simply enough… the problem is, it will be pretty hard to keep 2011′s responsive layout after doing that (The ability to resize to work on phones, etc)

  8. I want to get rid of the portion above my header image, and have my title and description on the image itself. And the search box moved to my menu, is there a way to do that?

      1. I’m using custom menus, so hopefully that will be easy. So I have to add a header.php to my child theme and move the coding there first, before changing it with the CSS coding? I think the coding you broke up in the header.php is what is confusing me.

        1. Using custom menus, you’ll be able to use the snippet of code provided in that link. It’ll add the search to your primary menu, which is the main nav in 2011. You do need to juggle the code around just a bit for header.php, so yep it needs to go in your child theme. YOu may be able to leave the hgroup where it is in the code and just do css edits. I think I moved mine down in the code because positioning it just worked better. I’m guessing you would also want to delete the search form code from header.php as well if you are going to put it in the menu.

          1. Well, I thought I was using the custom menu, but maybe I’m not. That coding didn’t work at moving my search box. Plus, no matter what I do all I can do is move my header & description either below my header image or above, but not on it. I can’t figure out what I’m doing wrong.

  9. Oh my goodness, so very easy. I’m sorry I didn’t understand that first. Could I ask you one more question? If you look at my site, http://wgcreates.com , there is a space above the menu and below the image, I’m not sure what coding to change to remove that.

    1. Adding this:

      #site-title {
          padding: 0;
      }
      

      Right at the top of your css rules (above #site-title a, below @import) worked for me!!

      What happens here is, we’ve absoltely positioned the a link. That breaks it out of the ‘flow’ of the code. When you apply a ‘posiion’ to an element, it breaks it out of the layout and allows you to move it around. So the a link was inside of the sitte title div, and we broke it out to move it where you wanted it. However, the div which the a link was inside is still down below, with nothing left in it. So we just had to remove the padding that was originally applied to it by 2011.

      1. THANK YOU so much. I have my site looking exactly the way I want. I learn so much from you and this site. Thanks for taking the time to teach newbies like me. :) I’m really starting to like WordPress more and more.

  10. This is all so helpful. Thank you.

    I have widened my site and seem to have it mostly behaving.

    What I can’t seem to figure out is how to reduce the right margin on my post pages.
    If I change the overall margin, then the Title disappears into the menu bar and the “posted on” meta text gets pushed way off the main page.

    Here is a page I’m trying to work with
    http://truenorthalliance.com/blog/team-viscosity/

    As well, I want to ensure that whatever changes I make on Posts doesn’t necessarily change my single column pages.

    1. Alright. I think I fixed just about everything.

      My posts are the way I want them. My home page looks like I want it to. However my single column pages have the right pull block quotes floating off the page. I’m hesitant to change the block quote right pull setting overall, because they look good on my posts pages.

      Any way to change that just for my single column pages?

      http://truenorthalliance.com/blog/about-chess/

      really appreciate the guidance here.

      1. If you take a look at the html output for your page, the body class gets a variety of classes added to it depending on what page/type of page is being viewed. So for example,

        <body class="page page-id-73 page-template-default logged-in admin-bar custom-background singular two-column right-sidebar">
        

        I believe page-template-default is the standard page template, with no sidebar. So if you get specific using that in your css, you can target just the pages.
        So like

        .page-template-default blockquote {
             css: rules;
        }
        
  11. First off, thank you so much for this website, it’s so incredibly useful, and so easy to understand as well, which is a rare feat for these kind of blogs, it seems.

    I wanted to wrap my widgets like you’ve done, and I understand the coding and whatnot, but I can’t work out exactly where to put it? I tried inserting it at the bottom of both the stylesheet and the custom stylesheet, but to no avail. Do you know what it is that I’m (obviously) doing wrong?

      1. Yes, I’m working using a child theme. I’ll try putting it under the @import, thank you.

        Oh, and also, before I forget: is your ‘Keep Up with Voodoopress’ social media widget in the sidebar a standard plug-in that you can just install, or is it custom code you’ve done yourself?

    1. Here’s a basic question that I’ve seen a few people bang their foreheads off a desk about. Is your child theme active? You can’t just make a child theme and put your edits there, you also have to activate it! If it is, clear your browser cache (Ctrl+f5 keys). Sometimes you need that cleared each time you make css edits.

      1. Yes, that’s the puzzling thing. It’s active and I’ve made numerous edits regarding page width, layouts, columns, menus and whatnot, but for some reason, this widget thing just won’t appear! It’s so strange.

          1. Sure, we just have to get a little more specific with the css! If we look through the source code we can see some major css blocks; that #primary surrounds the main content, #secondary surrounds the sidebar, and #colophon surrounds the footer area. So to target the widget titles in the sidebar only we would use

            #secondary .widget-title {
                 css: rules;
                 go: here;
            }
            
  12. The problem is that this looks like total crap on handheld devices. Test your theme in a responsive design viewer. Google responsive design test.

    1. Well you’re right … sort of. Did you actually look at my site on a handheld? I just did on a tablet, a kindle fire, and my phone. It looks fine, except the login box – I’ve just been to busy to bother with it.

      What parts do you think aren’t working? The search box might be a bit big, but I’m cool with that.

      Following my original instructions for 2011 doesn’t account for responsive design … but this particular tut that you commented on doesn’t seem to have any bearing on responsive elements. Later on when I really tweak the header – that looks messed up a bit. BUt I bring that up over here: http://vudu.me/2nb

  13. This tutorial really helped me out a lot. But I have one question: how do you change the margins in the footer area of TwentyEleven?? I have made the margins in my posts/pages to be 30px but the margins in the three footers are much wider than that. I’d like them to match. Thanks!!

  14. Thanks very much for this page, I find myself returning again and again to your page here figuring stuff out which FINALLY gives some clear and easy to read answers. Keep it up! Thanks alot!! ;-)

  15. Hey, thanks so much for your tutorials! I was able to widen my total page content and header following your instructions. I’m stuck now. If you look at this page http://www.carburetor-blog.com/?page_id=157 I want to get rid of the white area that is on the left of my content. I’ve tried adjusting margin numbers all over the place and nothing seems to work. The margin on my homepage is perfect, but any of the inner pages has that huge white area. Can you help? Thanks! Oh, I’m very new to CSS!

  16. This newbie managed to add a left side column to twentyeleven. Unfortunately the comment box is no longer centered under the post. Could you please point me in the right direction on how to move it back? Thanks

  17. Hi voodoo.

    I have some trouble with my navigationbar on the twenty eleven theme. I want my site to be compatible for the tablet to but the nav is split in two vertically…. I want it horizontally and aligned in the center. Please can you help me? It took me 5 hours already…

    Thank you!

    Louis(Amsterdam)

    http://www.pxdrums.nl

Leave a Reply