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.
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';
}
add_action('thematic_header','add_stuff',6);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:
http://bluemandala.com/thematic/thematic-structure.html
Wow, very helpful thanks!! Will give it a go!
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;
left:50%;
position:absolute;
top:92px;
height: 61px;
width:169px;
}
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
Thanks, here's my function code:
function add_stuff() {
echo '<img src="library/img/header/imago-visual-logo-right.png">';
}
add_action('thematic_header','add_stuff',6);
The 'scroll top' effect for the rollover can be seen here: http://themeshaper.com/thematic/ 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.
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>';
}
add_action('thematic_header','add_stuff',6);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;
bottom:-57px;
display:block;
height:127px;
position:absolute;
right:40px;
text-indent:-9000px;
width:197px;
}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.
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!
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.
This topic has been closed to new replies.