headertut

Customizing Twentyeleven, Let’s Start With Width and Smaller Header

I dig twentyeleven. It’s got a lot of fun features and it looks pretty good. There were a couple of things I didn’t like, however. The header is kind of GIANT. So I’m going to need to take care of that. Also, although it is flexible width, the maximum width was a bit too narrow for my taste. Also, I need wider sidebars, I don’t like things looking so cramped over there. While I’m messing with the header, I have my own logo for VoodooPress, no need for the site name to be up top. I’m going to get rid of that, and while I’m at it relocate the search and site description to overlay my header image. Finally, I like my widgets to have their own home, they need a nice box to seperate them from the content a little. It’s pretty easy to get this all done, check it out!

So the first thing I need to do, is to widen the max-width of the theme. You’ll notice some extra css in some of my examples. I also reduced margins in some places. Twentyeleven had too much white space for my taste. Some people love it that way, but hey, this is what I like! Before we get into this too far, make sure you have your child theme set up. If you forget how, run over here and check it out. Just remember, that tutorial is for twentyten. You’ll have to just adjust the header and import rule to refer to twentyeleven.

Here’s where the theme width is set up in twentyeleven’s style.css:

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}

Really all you need to do there is adjust the max-width in #page. Here’s my final view:

#page {
	margin: 1.5em auto;
	max-width: 1050px;
	border-top: 15px solid #bbb;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

Honestly, that’s it. You’ll see I have some extra stuff in there. I tweaked the margin to reduce the gutters on the side, and I added a think rounded border to the top. That’s just for my visual taste, When I remove all the info from above the header image, it looked a bit harsh. I liked the idea of just a little visual interest up top.

So with that out of the way, I realized that with a wider theme, I’d need a wider header image. This is super simple. I just made a functions.php file in my child theme and added (NOTE: this is new update code to add a filter, which is the preferred way to do this):

//CUSTOM HEADER SIZE
add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
function voodoo_header_height($param) {
return 175;
}
add_filter( 'twentyeleven_header_image_width', 'voodoo_header_width');
function voodoo_header_width($param) {
return 1050;
}

For informational purposes, below is the old function I used to adjust the header image. It worked, but one of our readers pointed out in the comments that we weren’t using the best method. So I recommend you use the above code, the code below is just kept for comparison.

//CUSTOM HEADER SIZE
add_action( 'after_setup_theme', 'voodoochild_theme_setup' );

if ( !function_exists( 'voodoochild_theme_setup' ) ):
function voodoochild_theme_setup() {
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) );
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) );
}
endif;

Don’t forget the opening php tag at the top if you are started a brand new functions.php file. OK, now with that above function I’ve altered twentyeleven’s header image from 1000x288px to a wider and shorter 1050x175px. Of course you can just do the width and leave the height line out, or use different values.

With the new header image in place, any new header you upload either through the header menu, or using the featured image uploader will be in that size. But I’ve had VoodooPress going for a bit, and it used to use twentyten, which had different header sizes. Chances are your site will not look right if you already have posts with thumbnails. No problem, I’ve got you covered! Check out this handy plugin here. It’ll regenerate your thumbnails and get everything looking so good once again.

One final thing I needed to deal with to get my headers to work properly. Sometimes I like to use images that are smaller than the header. By default if you do that, it won’t be used as your header image. Well, I copy header.php from twentyeleven and put it into my theme. I need to tweak some things further on it, so I need my own copy used. I found this bit of code toward the bottom of header.php:

	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!

I just deleted

&&
							$image[1] >= HEADER_IMAGE_WIDTH

So I was left with:

	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_HEIGHT ) ) ) ) :
// Houston, we have a new header image!

And that allows for featured images smaller than the minimum size to still be used. So we are getting pretty close to good here. We’ve got a wider theme, a wider header image to fit the theme and more options for our header image size. Tomorrow, we’ll finish this off. Tweaking the rest of the white space, readjusting the header some more, and prettying up the widget areas. After that, I’ll post up my header.php and style.css code in case I forgot anything, so you can peep my finished product so far. Once I have myself a nice basic child theme done to my liking, it’ll be time to look for new fun to be had.

83 thoughts on “Customizing Twentyeleven, Let’s Start With Width and Smaller Header”

      1. first, functions.php of the the child’s theme is loaded, and after that the file of the parent theme is loaded.
        so the code
        define( ‘HEADER_IMAGE_HEIGHT’, …
        is called twice, thus the second one should create an error, check your error logs .

        the way to solve this is with add_filter function

        1. Some code examples sure would be cool! But I’ll take your word for it. The thing is, all the tutorials I saw when I was looking for a solution used the above technique. I’ll look around the google for the method you are describing, but if you’d send me a pastebin of some code or something, that would save a lot of time? Thanks!!

  1. have you played with creating custom theme templates for twenty-eleven yet? playing with that now, and its not what I recall from last time I attempted it.

    1. What sort of templates? I’ve got a variety of them in use, nothing much has changed that I’ve seen. If you have specific examples/situations maybe I can help?

  2. I was wondering there is some code in the functions.php file that establishes the size height and width of the header why can we not just change those numbers in the child theme?

    This is the original
    // The height and width of your custom header.
    // Add a filter to twentyeleven_header_image_width and twentyeleven_header_image_height to change these values.
    define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘twentyeleven_header_image_width’, 1000 ) );
    define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘twentyeleven_header_image_height’, 288 ) );

    1. Functionally, that works. It’s actually how I used to do it. A VoodooPress reader informed me that way is improper as it causes php errors. And after some research, he was right. The problem is that The parent theme first defines those values, and then the child theme also defines those values, which is not allowed. If you do it that way, and then check your error logs you will see the errors. Adding a filter to adjust the values is the proper way to do it.

  3. First of all, when you look at my website, keep in mind that it’s a practice site, so the URL doesn’t match the content! Anyway, I’m trying to make the page content much wider. . . it’s way too narrow, so I adjusted the max-width in #page. margin: 1.5em auto;
    max-width: 1050px;

    just as you did. I don’t get any results. It’s still the same. I’m at the /* =Structure on my style.css. Can you give me any ides what I’m not doing or am doing wrong? Thanks.

    1. Just one tip for page width.

      Try to make site 980px wide. Its resolution that wont show you horizontal slide on 1024×768 resolution, which is most commonly used resolution.

      About your site:
      I just changed this and I got equal width,
      #primary {
      float: left;
      margin: 0;
      width: 100%;
      } line 93

      .one-column #content {
      margin: 0 auto;
      width: auto;
      } line 208

      Depending on design I try to make one big div to hold whole site, and one smaller with {width:980px;margin:0 auto}, and that keeps my site always in middle and proper width.

    2. Remember that changing to 1050 is only 50 more than original, so it’s not a dramatic change. Also, if you see no change, press ctrl+f5. Sometimes the browser cache needs reset to see css changes. Also, 1050 is the max width, so whether you see change or not is contingent on your browser. 2011 is a variable width theme up to 1000px (or 1050px with your edit). So it will appear the same size regardless of edits, if your screen size is under 1050.

  4. Hi! I’m new to WordPress but really loving the twenty eleven theme and trying to work with it to create the agency I work for website. I’m wondering if it’s possible to put an animation or slideshow of images where the menu sits and also not show the menu, topics, archive etc? Any help would be much appreciated!:)

    1. Yup, in the top example in this post, you can see #page has a margin of 2em and auto. the 2em is for the top and bottom, and the auto is for left and right. Reducing the 2 em to 1.5 or even 1 would reduce the spacing above the header and below the footer.

  5. Thank you for one of the most helpful design tutorial site i have seen…

    I am in the process of creating a twentyeleven-child theme

    and I was wondering if in the code bellow am i suppose to replace the word voodoo with something else, since i am not sure where it is referenced in my blog code?

    1 //CUSTOM HEADER SIZE
    2 add_filter( ‘twentyeleven_header_image_height’, ‘voodoo_header_height’);
    3 function voodoo_header_height($param) {
    4 return 175;
    5 }
    6 add_filter( ‘twentyeleven_header_image_width’, ‘voodoo_header_width’);
    7 function voodoo_header_width($param) {
    8 return 1050;
    9 }

    also i wasn’t sure what the following is referring to please explain:
    “Don’t forget the opening php tag at the top if you are started a brand new functions.php file.”

    1. Well, if you notice in that code, on line 2, we add a filter and on line 3 we have a function. Same goes for line 6 and line 7. So you could change voodoo to anything you want. What we are doing is defining a function in lines 3 and 7, and applying those filters in lines 2 and 4. Since we are defining our own functions, we call them anything we want. So I try to make mine descriptive, thus header_height and header_width. The best practice when writing your own functions is to add some prefix, that way you can be sure your function won’t have the same name as another core, or theme/plugin function. So I always prefix my functions with voodoo. So in line 3 and 7 where we define the function, we can name it anything we want, as long as in lines 2 and 4, we use the exact same name. What you can’t change, is the twentyeleven_header_image_height. Line 2 basically says to take the filter named voodoo_header_height and apply it to twentyeleven_header_image_height. Make sense?

      As for “don’t forget the opening php tag”, well, in a child theme when you start out, there is no functions.php. You can’t simply copy one from twentyeleven as it will crash the child theme. So you start with a blank file. It just needs to have that opening php tag that all theme php files have.

      <?php
      code goes here;
      //maybe a comment
      etc...
      

      Hopefully that also makes sense now.

      1. thank you for explaining the function architecture. I am new to functions… I love your sight cant believe that it took me so ling to find you. Have you thought of having a go to meeting tutorial class online? or simple a group skype meeting every once in awhile? I would be in! Since the real beauty of the web is community. BTW I made film called Y Yoga Movie which i would love to share with u…Please send me an email of your email and i will send you a free digital download as my gift for your help…

        in love light and peace,
        in gratitude,
        Arthur

        1. I’m glad you found that reply helpful! I have no time right now to do much reliable meeting or anything. I’m working a lot of overtime in a non-WP related field, and working on my Masters. Once things settle down, I’d love to dedicate more time to WP stuff. If you’d like to send me a link for your video, my contact form is up on my menu bar (I may forget to email…my memory is terrible). My wife would be very interested in that!! Thanks for the generous offer!

  6. is there a way to move search box where it is on twenty ten and to move the second header to right justified? There are many things that i like about eleven but also much that i miss of ten… thanks

    1. http://cdn.rvoodoo.com/ Is this something like what you are looking for? It’s my test site I was messing around with.

      If that’s what you are looking for, I simply added:

      #branding #searchform {
      	display: none;
      }
      #site-title {
      	float: left;
      	margin-top: -25px;
      }
      #site-description {
      	clear: right;
      	float: right;
      	margin: 2.25em 0;
      	
      }
      #branding img {
      	height: auto;
      	margin-bottom: 7px;
      	width: 100%;
      	float: left;
      }
      

      To my child theme style.css, and then put the search widget in my sidebar.

      1. hi, very interesting but when i paste

        add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
        
        	function voodoo_header_height($param) 
        		{
        			return 165;
        		}
        

        in my functions.php file in the child theme i see nothing (white screen). i don’t understand what is the problem. My site is vega.marionegri.it and i use wordpress 3.2.1 with twenty eleven child theme

        1. I hope I can help you! What does your functions.php look like in your child theme? Do you have other functions, or was it blank, a new file you created? If blank, did you put an opening php tag at the very top?

          <?php

          Here’s an article I stumbled on yesterday with info about pasting into a functions file
          http://vudu.me/func

          1. ok, it’s solved but i’ve used the old version:

            //CUSTOM HEADER SIZE
            add_action( 'after_setup_theme', 'voodoochild_theme_setup' );
            
            if ( !function_exists( 'voodoochild_theme_setup' ) ):
            function voodoochild_theme_setup() {
            	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) );
            	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) );
            }
            endif;
            
            

            i don’t know why the new version doesn’t work on my web site

          2. That’s very strange that the normal code won’t work. The old code is fine pretty much. It is redeclaring a define, so it generates errors, just so you know. They won’t display unless you turn debugging on.

  7. For some reason this doesn’t work for me? Not sure why, I’ve added the code as you have it. I stubbed my files to print to see the width and height values before and after, and they don’t change. I didn’t try the old way thought I’d ask first what might be wrong since I’d prefer to do it this way instead.

    1. Does it have something to do with how I’m using doaction(…). Does this have to happen at some other time slice in code that I miss by calling it this way, so add_filter is called early enough.

      function ask_widgets_init() {
      	// Custom header width
      	add_filter( 'twentyeleven_header_image_width', 960);
      	function ask_header_width($param) {
      		return 960;
      	}
      	
      	// Custom header height
      	add_filter( 'twentyeleven_header_image_height', 215);
      	function ask_header_height($param) {
      		return 215;
      	}
      
            // removal of some sidebars and the ephermera widget
      }
      add_action( 'widgets_init', 'ask_widgets_init' );
      
  8. Oh I see, I can just place them in my function.php anywhere, don’t need to wrap it in anything and perform an action. Right, sorry I seem to be answering my own questions or trying to on your blog. Thanks for the post :)

  9. I don’t know why I don’t remember to check your site first. I was searching part of the day yesterday to find out how to do this exact thing and couldn’t find it till I saw a link for your site today. I really need to remember to check your site first when I want to make changes. I’m sure you’ll have already written about what I want to do. :) Thanks for your work.

  10. Well Hello! So this is where all the WP knowledge is stored! ;-D
    So, maybe you could tell me….
    Is it possible to change the images in the slide show running in the header of Twentyeleven?
    I would like to keep the slide show function but have my own images displayed. I have been trying to find the location of the images and thought I would just replace them, but I just don’t know where to look.
    Perhaps there is some magic VoodooPress-formula to solve my problem! :-)

    1. Well I’m sure glad you found us here!! I can help you out. We could swap out the images in twentyten, however, I’d like to point out the best way to handle this for you! First up, do you have a child theme going? IF not, check out http://vudu.me/child
      That’s an article on my personal blog about child themes. It’s not recommended to ever edit WP themes (especially ones which are shipped with WP, frameworks, and actively developed themes)
      The reason being, themes get updated with new features, security updates, and bugfixes. If you directly edit the theme, then when the theme gets updated, you lose all your hard work. It gets overwritten by the new updated original theme.
      So we make a child theme, and edit from there. Now, back to your question. Check out this article:
      http://vudu.me/ph
      That is an article about how to add in more default headers, and remove the stock ones if you don’t like em. I hope that gets you started!

  11. When I create a new functions.php file in my child them folder with the above code and then try to insert an image as the featured image, I get this error:

    //CUSTOM HEADER SIZE add_filter( ‘twentyeleven_header_image_width’, ‘voodoo_header_width’); function voodoo_header_width($param) { return 1100; }
    Warning: Cannot modify header information – headers already sent by (output started at /home/trueno11/public_html/blog/wp-content/themes/twentyeleven-child/functions.php:6) in /home/trueno11/public_html/blog/wp-includes/pluggable.php on line 866

    1. That only kind of works. Let me explain the issue for you. First up, the terminology. The code you provided is css code, not php. Now here is the problem. 2011 looks for the header image to be 1000px by 288px. So your css code chops the image down to 160px, however, WordPress still thinks your header image is 288px tall. So when you upload a new image to use as your header, or if you attach a featured image to your post, WordPress crops the image at 288px. Your css hides the bottom of the image. So, while it works to narrow the displayed portion to only 160px, you are actually chopping off the bottom portion of the image.

      When setting a featured image, WordPress crops from the center to make an image 288px tall, your css then chops the additional amount off of the bottom to make a 288px image fit into a 160px space. If you go to appearance->header, you will see that WP is still expecting a 1000×288 image.

      The php I provided above changes this. So if you were to use the php code I provided and set it to be 160px height, WordPress would only look for a 1000x160px image. That way you get a crop of the exact rigt size that you want.

  12. Total noob lost in woods here. It appears have some problem with my function.php syntax. Below is the string that appears above the header when I preview my 2011 child theme following your excellent advice. Note the “warning” at end about missing a valid callback. How did I mess this up?

    //ADD NEW DEFAULT HEADER IMAGES function wptips_new_default_header_images() { $child2011_dir = get_bloginfo(‘stylesheet_directory’); register_default_headers( array ( ‘image1′ => array ( ‘url’ => “$child2011_dir/images/image1.jpg”, ‘thumbnail_url’ => “$child2011_dir/images/image1-thumb.jpg”, // 230 x 66px ‘description’ => __( ‘Image Description’, ‘child2011′ ) ), // if you have more than one image you will need a comma between all of them, except for the last one ‘image2′ => array ( ‘url’ => “$child2011_dir/images/image2.jpg”, ‘thumbnail_url’ => “$child2011_dir/images/image2-thumb.jpg”, // 230 x 66px ‘description’ => __( ‘Image Description’, ‘child2011′ ) ) // the last image does not get a comma )); } add_action( ‘after_setup_theme’, ‘wptips_new_default_header_images’ ); //Voodoopress.com “customizing twentyeleven, lets start with width and smaller header” //CUSTOM HEADER SIZE add_filter( ‘twentyeleven_header_image_height’, ‘voodoo_header_height’); function voodoo_header_height($param) { return 175; } add_filter( ‘twentyeleven_header_image_width’, ‘voodoo_header_width’); function voodoo_header_width($param) { return 1050; }
    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘wptips_remove_header_images’ was given in /home/content/29/8209729/html/marxbrothersmeet/wp-includes/plugin.php on line 405

    1. That all spits out at the top of your page? Let’s start basic here for troubleshooting, do you have an opening php tag at the start of your functions.php file?

      <?php
      // all of your code starts here
      
        1. code needs to be wrapped in language tags in square brackets…. [ php ] and [ /php ] without the spaces. There’s a little note at the bottom of my commets form there….. :)

  13. Hoping you could answer a quick question. I am hoping to add some new divs to the top of the header.php. I have a child theme designed, but when I copy over the header.php file from twentyeleven I lose all my styles for my page. http://trayerdesignstest.com/blog I have been reading up on the child themes and I am not sure whether the full header.php file can be moved from the parent theme or if I need to make other adjustments. Your guidance would be greatly appreciated.

    1. <link rel="stylesheet" type="text/css" media="all" href="../twentyeleven/http://trayerdesignstest.com/blog/wp-content/themes/upriverunited-2011-child/style.css" />
      <link rel="pingback" href="../twentyeleven/http://trayerdesignstest.com/blog/xmlrpc.php" />
      <!--[if lt IE 9]>
      <script src="../twentyeleven/http://trayerdesignstest.com/blog/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
      <![endif]-->
      

      Looks like you have a goofy setting or somethin, check out the URL there from your source. You can copy over the header.php to your child theme no problem… that’s what I do on VoodooPress

      1. Thanks VooDooPress…. Sorry for such a lame one – I should have checked that, but everywhere I was reading it wasn’t showing any reference to the use of the header.php So vs spending more hours searching I just wanted to ask… Thanks much… I straightened that out and it still appears that I have some additional possibly similar stuff going on because the header image is not showing, but I am in good shape…. Thank you greatly for your time… Oh and thanks for all your work – I have found answers to many things already through your various posts….

        1. I see you are using one of the standard 2011 images now. Are you using the child theme header.php? When your image wasn’t displaying, how were you bringing it in? Was it just an image you uploaded through the admin, or did you code it in?

          1. It was actually an image that I had uploaded. The Url was the culprit…. I am good to go now – I just have to make my adjustments to my header.php file and all is good…. I did run into trouble though – maybe you have seen this – I upgraded to 3.3.1 and I lost the backend formatting and functionality – I took it back to I believe it was at 3.13 because I did not have time to surf that while in the designing phases, but just thought I would see if you have seen that before – this particular site is actually hosted on GoDaddy and I was working on it on the client site when this happened vs my testing site… Thanks again… Much appreciated….

        2. I know that 3.3.1 works on Godaddy, as I was recently hosted there. As for losing formattng on the backend, I’ve seen a few things that can cause this.
          1. A hack … run the URL through securi’s checker to test for that
          2. a jQuery conflict. I’ve actually had this happen when using Google cdn copy of jQuery instead of the WP version
          3. Similar to #2, some themes or plugins may buncle in a jQuery that causes a conflict with WP

  14. Cool… Thanks for the info… Life is a learning lesson everyday… Thanks for your expertise and wealth of information…. Much appreciated…. Enjoy your day….

      1. :) Good… I am glad that you are always happy to help because I could use your expertise once again…. I have my child in place on my client site and I have lost the ability to do the random images in the header area in the control panel. I figured it may be that something is going haywire in the function.php. Because I did change the height of the header image. I went back in and pulled all the header information to be certain that my function file wasn’t the culptit, but I am still having the problem. Can you tell me what would cause that option to disappear from the screen? The site can be viewed at http://www.UpRiverUnited.org I am still working on things, but it is getting there…. Thanks once again….

        1. OK, I just tested VoodooPress, since I have a 2011 child theme here. The random function exists and works fine on my site. So, all I can think of is that a plugin is interfering, or it’s something to do with your child theme. I would say the easiest thing is to switch to 2011 momentarily just to rule out a plugin thing. If on 2011 the option comes back, we have narrowed it down to your child theme and can go from there!

          1. Thanks greatly!! My guess now is a plugin… It is never good working into the wee hours of the morning, but I did actually set it to the theme twentyeleven to see if it had been removed prior to checking the function.php and it wasn’t present then either. So I believe you have guided me in the right direction – it must be a plugin – now to figure out the culprit because I have used many on this one…. Thanks again…

    1. It’s gonna take a bit of math on your part! http://vudu.me/p4
      Is my next article in this series, I go into a bit more depth about adjusting the theme. So you may want to widen up your theme, you’ll need to adjust the secondary div to accomodate that 300px. You may want to assign it a min-width of 330px or something, and then adjust the percentage. Or just fix the width, but fixing the width can wreak havoc on 2011′s responsive design. Widen the theme a bit, reduce a little of the white space in the theme, maybe reduce the content area. Hopefully that article I linked can get you thinking in the right direction!

  15. Hi, Voodoo!
    The question may sound a bit off-top, but what about multiple H1 tags on the home page in Twenty Eleven? What do you think? I changed them in my site, but I’m curious if they are able to harm it in any way in terms of search visibility?
    I see you left them as they are here, on your site, so if you don’t mind, could you share what is your experience?

    1. They shouldn’t harm search results any. I”m no SEO expert, but since the advent of HTML5, multiple h1 tags are acceptable within that spec. Each element can have an h1, so, the overall page, each article, etc. From my understanding through a bit of research, the multiple h1 are fine.

      1. Thanks for the reply! Well, probably I shouldn’t worry about this so much – it’s just the lack of my personal experience with the new standards.
        By the way, thank you for the great tips here – I used some of them to tweak my Twenty eleven child themes.
        Regards,
        Den

  16. hi

    i really liked the way your widgets looks in the twenty twelve theme.
    can you explain how to change the background color of the widgets?

    thanks

  17. Once again, my friend you have done it again. How succinctly you explain things! Again you have helped me in a big way. I was customising the twenty eleven theme for a friend and ……………. Your explanation on copying lines from the parent style.css into your child theme’s style.css was a big wow moment for me. Well, I have been doing it wrong all this time. All I can say is “keep up the good work”. You are helping people from all the world in a kind way. Greetings from Australia.

  18. Hi, On my word press site all my images seem smaller and I think my page has gotten narrower, anyone know what I may have done to cause this/how to get it back to normal/larger images? Today I changed from default to showcase then back to default and added a Pinterest plugin…help http://www.college-cooking.com

  19. The width CSS properties worked for me, and were a huge help! I looked a quite a few sites, and most writers seem only to want you to attend a course on CSS, rather than actually address the issue. Great and all, but I just don’t have the time.

    Much gratitude.

    Now I just wish I could get full page width on mobile phones! ;-)

    1. You would just have to tweak margin/padding values at the appropriate width in the responsive portion of the css. Have you taken a look in there to see if you can find what you are looking for?

  20. Hi, Thanks for the tutorial. I’m a “newbie” and trying to figure all of this out. I have 2 sites using twentyeleven. One of them has the width which is wide and the other has a narrow width. I don’t know what the issues are.

    I changed the code in the narrow to match the wide in style.css but nothing happened. Followed your instructions as well, but nothing happened.

    Also – am trying to remove the space between the navigation bars and the text. Tried many different suggestions to change or add code in the header.php and style.css etc… but nothing.

    Appreciate your assistance. Thank you.

    1. Are you using any sort of development tool at all? Firefox has the firebug addin, IE and Chrome have built in tools. Either way, they allow you to dig into your webpage to see exactly what css rules to edit to affect various parts of your page. They also allow you to temporarily adjust the css to see what works. Learning your way around something like that could quickly help you be able to make the modifications you like. Now, which site specifically is the one not following your css edits?

      1. Hi. Thanks for the reply. I have downloaded firebug light (using Safari). The site that is not following the edits is http://www.globalpartnershipsgroup.com. Regarding firebug, when I click on the Inspect CSS, the following error comes up: Access to restricted URI denied. The stylesheet could not be loaded due to access restrictions. more…

        I am very very new to all of this and appreciate your patience if I’m asking basic questions.

        Separately, is it possible to have different header pictures that keep changing or do I have to use the default ones? I’d like to have different pictures on each page….just not the pictures that are currently up there.

        Thank you.

        1. I’m taking a look at your child theme now. It appears you just copied the styyle.css from 2011, is that correct? YOu haven’t even changed theme names – I would definitely recommend you change the theme name in there. Also, is there a particular reason you copy the whole style.css? Do you plan on making major modifications? I usually recommend just making a child theme and using the @import line of code and then only copying over the rules you intend to change. It keeps your child theme’s style.css file nice and short, only containing the relevant rules. Also, because you are using the single column page template, you haven’t edited the width of that template so this rule is still holding true

          .one-column #page {
          	max-width: 690px;
          }
          
          1. Hi. Yes, I did copy and paste the whole css.style as this is what one of the tutorials on wordpress said to do. Agree that less is more but was just following the instructions. I am not looking to make any major changes – just what’s there now and maybe a few small others. Example: remove search box, change footer, widen header, remove space between naming bar (don’t know the proper name, sorry) and text, remove the page name under the naming bar.

            Any thoughts on if it’s possible to change the images but still have them “revolving/changing”. I’d prefer to have 5-6 of my own images revolving that the default ones.

            Thank you.

  21. Just to add to the chorus of approval! I am struggling to change the width or gap between the main “blog” content section and the widgets. Wondering if you have a pointer for where I might go to work that out. I take it this would be by editing the .css file

Leave a Reply