ThemeShaper Forums » Thematic


Adding a second header image opposite.

(9 posts)
  • Started 12 years ago by Tarquin
  • Latest reply from helgatheviking
  • This topic is resolved


  1. I've been struggling to find an easy way of adding a second logo to my header. I'd like to add a second logo image to the header on the right hand side of the site. I currently have my main logo on the left working perfectly through CSS.

    Any help would be greatly appreciated.

    Posted 12 years ago #
  2. add something to one of the empty spots in the thematic header

    function add_stuff() {
    echo '<img src="image.png">';
    echo 'Maybe you prefer text';

    spot 2 goes before the current title, 4 goes after the title, 6 goes after the blog description (all still in the #branding div) and spot 8 goes after #branding but before #access.

    see the map:

    Posted 12 years ago #
  3. Wow, very helpful thanks!! Will give it a go!

    Posted 12 years ago #
  4. Tried adding the function, but not having any luck. :( I'm trying to implement a logo with roll-over effect using the 'scroll top' effect with CSS. Do I simply add a CSS class like this?:

    #add-stuff {
    background: transparent url(../img/header/imago-visual-logo-right.png) no-repeat scroll center top;
    display: block;
    float: right;
    height: 61px;

    Posted 12 years ago #
  5. post your functions code. the code i gave you does not create a div called #add-stuff. i dont know what the scroll-top effect is. but a:hover will work if it is a link. or you can hover any element in a modern browser

    Posted 12 years ago #
  6. Thanks, here's my function code:

    function add_stuff() {
    echo '<img src="library/img/header/imago-visual-logo-right.png">';

    The 'scroll top' effect for the rollover can be seen here: at the bottom of the page used for the 'Back to top' icon. Basically uses one PNG for both roll-over states and the image simply 'scrolls' when hovered over.

    Thanks again.

    Posted 12 years ago #
  7. ok. by scroll top you just mean hover... with sprites. and i dont mean to be an ass, but if that is what you are trying to achieve why havent you copied their markup?

    function add_stuff() {
    echo '<div id="back-to-top"><a href="#" rel="self" title="Take me to the top of this page">Back to top</a></div>';

    that wrapper div is not totally necessary, especially if you give the link an id
    then css:

    #back-to-top a {
    background:url("images/shapely-back-to-top.png") no-repeat scroll center top transparent;

    the important parts are display: block; so that text-indent:-9000px can throw the text so far off the left that you won't see it. and the position parts are important to essentially 'crop' the full image to just the sprite you want to use on the 'down' state.

    then for the hover you change the background position to whatever is appropriate

    #back-to-top a:hover {
    background-position: center bottom;

    i just lifted their css so it is obviously not going to be exact for you.

    Posted 12 years ago #
  8. I don't think I've said this to anyone. I...I think I love you!

    I'm a designer learning to code and its kinda slow at times so thank you for bearing with me on this one. I'll be sure to send you the link when we launch the site in a week or so.

    Thanks again for all the help, problem solved!

    Posted 12 years ago #
  9. Someone else said he wanted to kiss me. Perhaps I should be more careful about the advice i dispense here!! :) as a designer who also taught herself code (and now probably does more coding than designing) i can completely relate. glad you rpblem was solved! i'm sure we'd all like to see your site when it is up.

    Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.