WordPress.org

Ready to get started?Download WordPress

Forums

[closed] How to change the height of header on twenty eleven (25 posts)

  1. Mia1031
    Member
    Posted 1 year ago #

    Hi, I'm having trouble re-sizing the header to have a smaller height?

    I'm still new at this and would be great if someone can help me write the CSS for this?
    I have this so far.

    <body <?php body_class(); ?>>
    <?php if (function_exists('AWM_generate_linking_code'))AWM_generate_linking_code(); ?>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    			<hgroup>
    				<h1 id="site-title"><span><a>" 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>
    
    			<?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( $header_image ) :
    					// Compatibility with versions of WordPress prior to 3.4.
    					if ( function_exists( 'get_custom_header' ) ) {
    						// We need to figure out what the minimum width should be for our featured image.
    						// This result would be the suggested width if the theme were to implement flexible widths.
    						$header_image_width = get_theme_support( 'custom-header', 'width' );
    					} else {
    						$header_image_width = HEADER_IMAGE_WIDTH;
    					}
    					?>
    			<a>">
    				<?php
    					// The header image
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					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 :
    						// Compatibility with versions of WordPress prior to 3.4.
    						if ( function_exists( 'get_custom_header' ) ) {
    							$header_image_width  = get_custom_header()->width;
    							$header_image_height = get_custom_header()->height;
    						} else {
    							$header_image_width  = HEADER_IMAGE_WIDTH;
    							$header_image_height = HEADER_IMAGE_HEIGHT;
    						}
    						?>
    					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
    				<?php endif; // end check for featured image or standard header ?>
    			</a>
    			<?php endif; // end check for removed header image ?>
    
    			<?php
    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    
    			<?php endif; ?>
    
    			<nav id="access" role="navigation">
    				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    				<div class="skip-link"><a href="#content">"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    				<div class="skip-link"><a href="#secondary">"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav><!-- #access -->
    	</header><!-- #branding -->
    
    	<div id="main">

    Where do I fix the height?

  2. Dave
    Member
    Posted 1 year ago #

    You would alter the height of your theme's header in the theme's "style.css" file.

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    If I'm not mistaken, the header size adapts to the chosen image.

    So if you alter your image ahead of time and set it as the header, it should fit the image size....

  4. deirdrekelly
    Member
    Posted 1 year ago #

    I'm trying to do this right now - so glad ya'll are talking about this.

    I made a custom image but when I upload it, the template automatically stretches the image to fit the width of the template and I want to control the width. (Mostly because it looks too big - but also because it moves the Search Box down into the menu bar which looks awful. Anyone know how to get rid of the Search Box or move it at least?)

    http://teacherpress.ocps.net/deirdrekelly/

    Also - anyone know how to increase the width of the single-column in Twenty-eleven?

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    @deirdrekelly

    please start your own topic.

  6. udaraaka
    Member
    Posted 1 year ago #

    Mia1031 In your style CSS file in twentyeleven theme try to find out the section

    #branding img {
    height: auto;
    margin-bottom: -7px;
    width: 100%;
    }

    around line 531 and modify height:auto to height:100px( or some other value as required) Then it ll appear as

    #branding img {
    height: 200px;
    margin-bottom: -7px;
    width: 100%;
    }

  7. Mia1031
    Member
    Posted 1 year ago #

    Hi Udaraaka,

    Thank you for your help but I can only find the #branding img under print.
    Is this correct? And even if I changed the branding img to the following like you requested, it doesn't do anything.
    Can you please help me again?

    [please mark any code according to forum guidelines - http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

    /* =Print
    ----------------------------------------------- */
    
    @media print {
    	body {
    		background: none !important;
    		font-size: 10pt;
    	}
    	footer.entry-meta a[rel=bookmark]:link:after,
    	footer.entry-meta a[rel=bookmark]:visited:after {
    		content: " [" attr(href) "] "; /* Show URLs */
    	}
    	#page {
    		clear: both !important;
    		display: block !important;
    		float: none !important;
    		max-width: 100%;
    		position: relative !important;
    	}
    	#branding {
    		border-top: none !important;
    		padding: 0;
    	}
    	#branding hgroup {
    		margin: 0;
    	}
    	#site-title a {
    		font-size: 21pt;
    	}
    	#site-description {
    		font-size: 10pt;
    	}
    	#branding #searchform {
    		display: none;
    	}
    	#branding img {
    		display: none;
    	}
    	#access {
    		display: none;
    	}
    	#main {
    		border-top: none;
    		box-shadow: none;
    	}
    	#primary {
    		float: left;
    		margin: 0;
    		width: 100%;
    	}
    	#content {
    		margin: 0;
    		width: auto;
    	}

    Thank you!

  8. Mia1031
    Member
    Posted 1 year ago #

    Btw this is from style css.

  9. udaraaka
    Member
    Posted 1 year ago #

    @Mia1031 can you post a link to a sample page of your website? Then may be I can help you.

  10. Mia1031
    Member
    Posted 1 year ago #

    Hi udaraaka,

    which php file did you want to see?

  11. udaraaka
    Member
    Posted 1 year ago #

    Mia I didn't ask for any php file just post a link to a page of your current site, so I can examine the header and help you to solve your problem.

  12. Mia1031
    Member
    Posted 1 year ago #

    Hi udaraaka,

    Thank you so much for your support.
    Here is the link to a page of my website

    http://tokyoluxe.com/?page_id=18

    I hope this helps.
    I think it's set to the original pixel HxW for twenty eleven.
    I need to make it half this size.

  13. udaraaka
    Member
    Posted 1 year ago #

    in your dark.css file find the area

    #branding {
    border-top: 2px solid #0a0a0a;
    }

    around line 57.

    #branding {
    border-top: 2px solid #0a0a0a;
    height: 100px;
    overflow: hidden;
    }

    and modify that area as above - modify height as needed. But remember, this will only hide the lower part of the image if you keep it the same size. You better crop your images to fit with the height you specify above.

  14. Mia1031
    Member
    Posted 1 year ago #

    Sorry, where is the dark.css file?
    The only #branding img { I have in my css file is under print.
    See below.

    /* =Print
    ----------------------------------------------- */

    @media print {
    body {
    background: none !important;
    font-size: 10pt;
    }
    footer.entry-meta a[rel=bookmark]:link:after,
    footer.entry-meta a[rel=bookmark]:visited:after {
    content: " [" attr(href) "] "; /* Show URLs */
    }
    #page {
    clear: both !important;
    display: block !important;
    float: none !important;
    max-width: 100%;
    position: relative !important;

    }
    #branding {
    border-top: none !important;
    padding: 0;
    }

    #branding hgroup {
    margin: 0;
    }
    #site-title a {
    font-size: 21pt;
    }
    #site-description {
    font-size: 10pt;
    }
    #branding #searchform {
    display: none;
    }
    #branding img {
    display: none;

    ------------------------------------------

    Please advise? Even if I change this to the previous height that you have mentioned, it didn't change anything...

  15. udaraaka
    Member
    Posted 1 year ago #

    http://tokyoluxe.com/wp-content/themes/twentyeleven/colors/dark.css

    You can find it in your file manager in your control panel or ftp client at
    wp-content/themes/twentyeleven/colors/dark.css

  16. Mia1031
    Member
    Posted 1 year ago #

    Wow Udaraaka,

    Thank you so much! It worked!!
    So I'm assuming this dark. css is the original copy so when I need to edit something I can adjust the size like the width and height to customize it.
    Am i correct?

  17. udaraaka
    Member
    Posted 1 year ago #

    Yes it is a original file comes with the twentyeleven theme and you can customize it. However, make sure you have a backup of the original files or create a child theme and edit it.

  18. Mia1031
    Member
    Posted 1 year ago #

    Thank you Udaraaka,

    Just one more question, since I changed the header, is there a reason why some of my headings are cut?
    If you see the category under services, there should be three services and not just the spa. Is there a way to fix this so that all three categories show as a drop down heading?

  19. udaraaka
    Member
    Posted 1 year ago #

    The problem is that actual image height is 1000px. WE have hidden the bottom part of the image but still it overlaps with the menu. Try to reduce the size of the image file by cropping it or resizing it.

    You can also try to change the HEADER_IMAGE_HEIGHT; values in your first post to constant 388;. Make sure you have a backup of your original header.php before you modify it.

  20. Mia1031
    Member
    Posted 1 year ago #

    Hi Udaraaka,

    Thank you so much for your help. Every time you help me, I'm one step closer to getting my website complete. Can you kindly advise me to fix the space between the header and the content slider? Since I adjusted the height and cropped the header, It seems like there's a big gap between the header and the content slider now. Can you tell me how to fix it since I haven't included any spacings or paragraphs in my css.

  21. udaraaka
    Member
    Posted 1 year ago #

    Remove the padding in the foloowing areas so they ll appear as follows.

    line 628
    #main {
    clear: both;
    }

    line 1020
    .singular .hentry {
    border-bottom: none;
    position: relative;
    }

    line 1035

    .singular.page .hentry {
    }

  22. Mia1031
    Member
    Posted 1 year ago #

    Thank you Udaarka,

    It worked but still i have a little gap in between the header and the content (slider) below. Is there a way to reduce this gap or is this the limit since there's a drop down menu?

  23. Mia1031
    Member
    Posted 1 year ago #

    Hi,
    Can someone tell me how to reduce the gap between the header and the actual content?

    http://www.tokyoluxe.com is my website.

    Thank you!

  24. cartwrightk
    Member
    Posted 1 year ago #

    Hello,

    not sure where to go to start a new thread. can't find that area in the drop downs.

    Situation:
    I'm trying [desperately] to dramatically increase the height of my footer image in my child theme. Does anyone know the css to do this? I inserted a new footer image and it has somehow become much smaller than the original footer image - strange no?
    http://www.sergiosalina.com
    Please advise!
    Thank you,
    Kel

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try creating a thread here or the Twenty Eleven theme http://wordpress.org/support/theme/twentyeleven#postform

    Also make sure your website URL is correct

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.