WordPress.org

Forums

[resolved] Putting a logo image into twentyten heading (4 posts)

  1. Robin W
    Member
    Posted 2 years ago #

    This forum is an awesome resource, and I've learn't lots thorugh looking.

    Hopefully I have a simple one that my brain can't quite fathom

    site is http://www.gospbc.co.uk

    I have badly put a logo into the header.php of my child theme.

    I would like the logo to be more on the right (about another 4cm right, so it is aligned wityh the right hand side of the main header picture, and higher, so that the gap between the title and description is smaller - hope that makes sense.

    The bit of header.php that I have amended is as follows:

    '<body <?php body_class(); ?>>
    <div id="wrapper" class="hfeed">
    <div id="header">
    <div id="masthead">
    <div id="branding" role="banner">
    <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    <<?php echo $heading_tag; ?> id="site-title">
    <span>
    " title="<?php echo esc_attr (get_bloginfo( 'name', 'display') ) ; ?>" rel="home"><?php bloginfo( 'name' ); ?></span>
    </<?php echo $heading_tag; ?>></div>

    <div id="site description"><img class src="/wp-content/uploads/2013/03/logo.png" alignright width="100" height="66"/></div>
    <div><?php bloginfo( 'description' ); ?></div>'

    Lousy coding I suspect, but if one of you great people can improve this, so that I can manoever the logo that would be great !

  2. kevinhaig
    Member
    Posted 2 years ago #

    Give your logo img a class name class="logo"
    Then in the css add

    .logo {
        float:right;
        margin-top: 10px;/* or whatever off set you want*/
        margin-left: 10px;/* or whatever off set you want*/
    }

    Then for your description either give your description a in-line style as below, or give it a class name (preferable) and apply your css there

    <div style="float:left;">Patron: HRH The Princess Royal</div>

    You will then have to play with your header title margins, etc to move the description up.

    Firefox has an excellent tool to test these kind of changes out called Firebug....highly recommended.

  3. Robin W
    Member
    Posted 2 years ago #

    Kevin,

    Thanks, perfect just what i wanted, problem solvec. Now off to check out firebug!

  4. kevinhaig
    Member
    Posted 2 years ago #

    Your welcome

Topic Closed

This topic has been closed to new replies.

About this Topic