Support » Theme: Twenty Twelve » Logos, Headers & Footers

  • Hi, I’m very new to this side of wordpress – so please excuse my ignorance! I have made a Child theme and now have a style.css sheet to make changes. I am trying to:

    (a) increase logo size. I have used below code to replace text for an image, however I the logo has shrunk – how can I make this its proper size?

    .site-header h1 a {
        background-image: url(http://www.mynextpad.co.uk/wp-content/uploads/2014/08/mynextpadlogo-441x89.png);
        background-size: contain;
        background-repeat: no-repeat;
        color: transparent;
        line-height: 80px;
    }
    
    .site-header h1 a:hover {
        color: transparent;
    }
    
    .site-header h2 {
        display: none;
    }
    
    #site-logo {
     max-width: 100%;
    }

    (2) I would like to only show the header on the home page – is this possible?

    (3) I have removed the theme link at the footer using the below code but I would like to include the copyright info as standard text:

    .site-info {
       display: none;
    }

    Thanks in advance!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Can you please include a link to your site? It makes it easier to see what needs to be changed. Thank you.

    Thread Starter Maleego

    (@maleego)

    yeah, I haven’t got anything in place yet, but the url is http://www.mynextpad.co.uk
    thanks

    1) OK, the thing you have to understand about setting the background-image property of an object (in this case, the site-header link) is that for background images, the image will only be as big as the container, and the container will only be as big as the objects that it contains (unless it’s a block level element, in which case the width will stretch across the width of its containing element by default).

    So, even though you made the text color for “My Next Pad” transparent, the container (the anchor tag) will still be big enough to hold the text.

    You can see what I mean by temporarily making the text visible by setting it to red, then adding a font-size to this rule in your child theme’s style.css file:

    .site-header h1 a {
        background-image: url(http://www.mynextpad.co.uk/wp-content/uploads/2014/08/mynextpadlogo-441x89.png);
        background-size: contain;
        background-repeat: no-repeat;
        color: red;  /* changed from transparent */
        line-height: 80px;
        font-size: 80px; /* make font bigger */
    }

    You’ll see that if you adjust the font-size up or down, the background image will also grow or shrink, because the container will adjust to fit the text that it contains.

    So, there are a couple of ways that you can make the image bigger. You can either set the font size of the text to some large value so the container grows big enough to the size that you want, or you can explicitly set the size of the container using the width property. The logo image has a natural width of 441px, so you can actually just modify the rule to set the width of the container to match the size of the logo:

    .site-header h1 a {
        background-image: url(http://www.mynextpad.co.uk/wp-content/uploads/2014/08/mynextpadlogo-441x89.png);
        background-size: contain;
        background-repeat: no-repeat;
        color: transparent;
        line-height: 80px;
        width: 441px; /* set width of container */
    }

    2) Yes. The body element on the home page will contain a class called (appropriately) home, so by including it in the selector of whatever CSS rule that you create, the rule will only affect elements on the home page. So what you should do is hide the header by default, then add a rule that displays the header if it’s on the home page:

    /* hide header by default */
    .site-header {
       display: none;
    }
    /* display header on home page */
    .home .site-header {
       display: block;
    }

    3) Make a copy of the parent theme’s footer.php file into your child theme folder, then substitute the part of the code inside the site-info div with your copyright info. That is, change this:

    <div class="site-info">
    	<?php do_action( 'twentytwelve_credits' ); ?>
    	<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
    </div><!-- .site-info -->

    to this:

    <div class="site-info">
       Copyright 2014 My Next Pad
    </div><!-- .site-info -->

    Thread Starter Maleego

    (@maleego)

    Thank you CrouchingBruin – for the explanations behind the answer also – hopefully this will help me to learn!

    Regarding the header, apologies as I wasn’t clear enough – I only want to remove the header image from other pages – I want to keep the logo and the links, just not the image (currently sunglasses)?

    I have also pasted the footer info, but I still see the wordpress link?

    Thanks again!!

    OK, just change the CSS so it looks like this:

    /* hide header image by default */
    .header-image {
       display: none;
    }
    /* display header image on home page */
    .home .header-image {
       display: inline;
    }

    Regarding the footer, you can’t paste the footer.php code into your style.css file. You have to actually make a copy the footer.php file from the parent theme into your child theme’s folder, so you have a duplicate copy of a separate file. You can do this a couple of different ways. You can download a copy of the theme to your computer, find the footer.php file, and upload it into your child theme folder using an FTP client like FileZilla. Or, your host may have some sort of control panel application that you can use to copy footer.php over from the parent theme’s folder over to your child theme folder.

    The object is to have something that looks like this:

    /wp-content/themes/twentytwelve/footer.php
    /wp-content/themes/twentytwelve-child/footer.php

    Then you’ll make the code change to the footer.php file that’s in your child theme folder.

    Thread Starter Maleego

    (@maleego)

    Wow – fantastic! Thank you for all your help! All working! Much appreciated!!!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Logos, Headers & Footers’ is closed to new replies.