• Hi – looked everywhere to try to find an answer – I’m sure its here but I’m suffering from overdose of CSS!

    I have 2012 theme – I want to add a thumbnail/ small picture to the header right justified next to the title. This is a smal (50px tall) picture of me which I would see as right aligned with the WP page and moving with the margin when the page is resized. I’ve read all sorts of stuff, created a child theme but nothing works. Any ideas?

    Nick

Viewing 15 replies - 1 through 15 (of 31 total)
  • Link to your site?

    Thread Starter njevans

    (@njevans)

    First you need to fix your theme so it’s a valid child theme – your style.css file should only contain changes to the CSS which go after this:

    /*
    Theme Name: Twentytwelve Child
    Description: Child theme for the twentytwelve theme
    Author: Your name here
    Template: twentytwelve
    */
    
    @import url("../twentytwelve/style.css");

    Then you’ll also need to put a copy of the header.php file in the child theme – and make changes to that file to add the thumbnail.

    Thread Starter njevans

    (@njevans)

    Hi – cant get the child theme to work – says it can’t find the parent. I’ll look at that this afternoon, hopefully I’ll find a solution there are a lot of similar threads after all. If I do though, any idea how I get this thumbnail happening? 🙂

    Thanks
    Nick

    Thread Starter njevans

    (@njevans)

    child theme working – it didnt like numbers or spaces 🙂

    any help on thumbnail would be appreciated

    Okay, good job on fixing that. The easiest way to add the image will be as a background in the CSS – so add this to the child theme style.css file:

    @media screen and (min-width: 600px) {
    .site-header h1 {
        background: url('http://image file path goes here') no-repeat right top;}
    }

    Upload the image first and then copy the file path to the url space above.

    See how that works…

    If you want to use thumbnails you need to know the wordpress loop.
    On one of my website I have a full page made out of a 3 by 3 grid of post. Each post show the thumbnail I have for the post, the excerpt and the title. My full code for that function is bellow.
    I used the multiple blogpost thumbnails to set a second smaller image on each blogpost to be displayed along with the excerpt.
    The code showing my thumbnails is just that:
    <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>

    Then just style everything with css

    FULL CODE:

    <div id="gallery">
    
    <?php
    $args = array( 'orderby'         => 'post_date', 'numberposts' => 9 );
    $lastposts = get_posts( $args );
    foreach($lastposts as $post) : setup_postdata($post); ?>
    <div class="container">
    	<div class="beschreibung" style=" font-size:13px;"><strong><?php the_excerpt(); ?></strong>
        <div class="sociable">
        <?php if( function_exists( do_sociable() ) ){ do_sociable(); } ?>
        </div>
    		<a href="<?php the_permalink(); ?>" style="color:#11b1f4"> Read More...</a> 
    
            </div>
    	<a  class="image">
    		<img height="200" width="300"<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
            <p> <?php the_title(); ?></p>
    	</a>
    
    </div>
    
    <?php endforeach; ?>
    <div id="clearboth"> </div>
    
    </div><!--end of gallery-->
    Thread Starter njevans

    (@njevans)

    thanks guys – I guess I confused things talking about thumbnail. Its not thumbnails as in file thumbnails – just one picture of me thats in the header but thumbnail size (ie small).

    I added

    @media screen and (min-width: 600px) {
    .site-header h1 {
    background: url(‘http://image file path goes here’) no-repeat right top;}
    }

    after the import statement in style.css but can’t see any change. Surely even if the URL was wrong I would see a broken link?

    Thread Starter njevans

    (@njevans)

    oh I did put a file in there – whole style.css file reads

    /*
    Theme Name: twentytwelvechild
    Description: Child theme for the twentytwelve theme
    Author: Nick Evans
    Template: twentytwelve
    */
    @import url(“../twentytwelve/style.css”);
    @media screen and (min-width: 600px) {
    .site-header h1 {
    background: url('http://ftp.managingdelivery.com/nickevans.jpg&#039;) no-repeat right top;}
    }

    (Not your mistake – he obviously did not read the thread – I considered deleting the post earlier…)

    Looks like the file path is funky – this is what shows up in the child theme style.css file:

    ('http://ftp.managingdelivery.com/nickevans.jpg')

    On the media library page, find that image and then on the right side – there’s the file path box – click in there and copy that URL to the CSS.

    Weird – that’s not what i put there – the forums parser parsed it – LOL – but you should not have the ftp in there. I’ll try this again:

    url(“'http://ftp.managingdelivery.com/nickevans.jpg'&#8221;) no-repeat scroll right top transparent

    url("'http://ftp.managingdelivery.com/nickevans.jpg'") no-repeat scroll right top transparent
    
    Thread Starter njevans

    (@njevans)

    ah – I copied the path from the media library before I saw the second post 🙂

    Maybe we’re getting in each others way – I’ll stop doing things – if you want me to, say so

    Thread Starter njevans

    (@njevans)

    BTW I put the ftp in there – I ftped the file manually to the server and that where the ftp client told me it was. Didnt event know there *was* a media library! 🙁

    Thread Starter njevans

    (@njevans)

    but its up there now. FYI all the files dotted around the server called nickevans.jpg are the same – I thought WP needed an absolue path name

    Yes, you should use an absolute file path. And you should be using the media uploader – not FTP – it’s not visible for me – so that’s likely just because you’re on the site.

    Try uploading it using the media uploader – and then inserting it per the above.

    And BTW, it’s fine for you to try things :)! (Once in a while, someone will drive one of us helpers crazy, doing random stuff while we are trying to look at something – but you’re fine so far – LOL)

Viewing 15 replies - 1 through 15 (of 31 total)

The topic ‘add thumbnail to header in 2012’ is closed to new replies.