I feel a bit daft asking this amongst so many more indepth and technical questions..but hopefully an answer may help others as well as myself.
All I'd like to do for now is hide the blog title and description, and use a full width header image with a height of 230px. And also change the colour of the pale blue menu bar.
I've fiddled with the CSS for a while now with no joy. I'm still learning!
Can anyone make any suggestions?
monkeymartin
Member
I added this code to the end of my style.css file
#branding {
background:transparent url(images/banner.jpg) no-repeat scroll center top;
background-position: bottom;
height:210px;
position:relative;
z-index:10;
}
Then I created an image (size 940px wide by 210px)
I called this image banner.jpg and uploaded it to the images folder inside the Thematic theme
That'll do it. :)
That code worked perfectly for the header image. If I want to add an image to the footer, what would change in that block of code?
If you're adding a header image and you want it clickable …
/* The rest of the header may need margin and padding removed
for this to work properly--play around with it */
#blog-title a {
display:block;
text-indent:-9000px;
height: XXpx; /* height of your header, like 180px */
width: XXpx; /* width of your header, like 940px */
background:url(images/something.gif) no-repeat top center;
}
#blog-description {
position:absolute;
left:-9000px; /* We avoid display:none because it's bad for SEO */
}For the footer, it depends. Maybe something like …
#footer {
background:#some-color url(images/something-else.gif) no-repeat center top;
}Again, it depends on the image, what you're doing with it. Etc.
Let me know how it works out.
Also, mchapoton, you should set a blog title and description in WordPress. Absolutely necessary for Usability and SEO. Use CSS to hide that sort of thing. I think the example above should take care of everything for you.
Thanks so much, I'll play around with it. One more thing (that may already be covered in the above code). When I create new pages, I don't see a way to get back to the original blog page?
That's because you've hidden your blog-title link, typically used as a home link. That said, I discuss adding an explicit home link to the menu here: How To Protect Your WordPress Theme Against Upgrades
Ian, thanks again. Hate to bother you with fundamentals, but I think I am missing something simple. I have read the info on creating a Child Theme and have done so to add customized code. I created a new directory 'modifythematic' in the themes folder and included a style.css and functions.php file.
However neither one of them seems to be having any effect on the site, so I think I'm missing something simple to get everything to jive. (Theme URI path maybe?)
Did you set modifythematic as the active theme in the Themes panel?
Aha! No I didn't, but I just did and saw my yellow box and home page link. Of course those were the only styles set, so I will just have to copy over the entire thematic style sheet. Thanks so much, feel free to delete my long comment with the code if it's too cluttered.
Ian, I pasted monkeymartin's code at the end of my style.css file and it came out all funky. Don't know what happened. I'd basically like the background color of my header to be all white with my logo clickable. Not working out that way though. Ugh......
#header {
background:#fff; /* Makes the background white */
}
#blog-title a {
color:#000; /* Makes the name black */
}ok, did that but, i guess this is my real question (sorry), i have a logo (image.jpeg), that i would like to use instead of the text in the header and i would like it to be clickable. how do i replace the original header text with my logo, keep it clickable (for home page navi) and still keep my site name and description in my title without screwing up any SEO? Phew, that was a mouthful. Thanks Ian! This theme and your support are awesome!
#blog-title a {
display:block; /* We do this so we can add a background image */
text-indent:-9000px; /* Hides the text--but not from search engines */
height: XXpx; /* height of your logo, like 180px */
width: XXpx; /* width of your logo, like 940px */
background:url(images/something.jpg) no-repeat top center; /* adds in the logo image */
}That should do the trick.
Also, you'll want to re-style your description now.
#blog-description {
color:#000;
}Thanks Ian, I'll give that a shot!
gracestanat
Member
this is very close to what i'm looking for, but not quite.
i'd like to redesign the top header to a linked pic to the right, but i'd ideally like to leave the original Thematic titles basically intact.
my current layout looks like this:
www.stanats.com/blog01
but what i'd really like is something more like this:
www.stanats.com/blog01_support/example1.jpg
(obviously, the upper-right pic is clickable)
i would love to be pointed in the right direction to figure out where to insert the new html for the header. i've poked around a lot, but haven't yet managed to figure it out.
thanks in advance!
(and again, i'd really like to give some props to Ian for being the man!)
You could absolutely position that widget into the header if you know it'll always be the same size. You may have to move a few {postion:relative} declarations around to do it though.
gracestanat
Member
i can certainly make sure that it is always the same size. can you get me started in the right direction in terms of learning how to position the widget into the header?
i'm assuming that you mean that i should basically just use the Text widget (without a title). i'm afraid i don't yet know how to insert widgets somewhere that you haven't programmed into Thematic. sorry if this is a rookie question!
gracestanat
Member
lol... okay... thanks. :) and the file that i should be editing? i can't figure out if i should be editing something in your library folder or if i can do it all from the styles.css file. thanks again.
You'd have to do it in the style.css of your Child Theme. It may just be a simple matter of making the sidebar {overflow:visible;} and moving the widget up.
gracestanat
Member
Awesome. I'll fiddle around with that - as always, thanks for your help, Key Master! :)
gracestanat
Member
Argh. I fear this task may be beyond my current skill set. :( Is there simply a way to change the code in the header by hand without losing my "upgradability"? I'm hoping that if I can just figure out where the branding section is coded, I can change it into a table that does what I want it to do. Or add a div. At this point, I'm worried that explaining this to me might be too much trouble, so if this is the case, I totally understand. But if there is a brute force way for me to safely change the header without losing the elegance of the rest of the theme, that would be great. Thanks again.
gracestanat
Member
okay... nevermind. think i figured it out. i decided to move the secondary aside. had to learn some new css stuff, but that's good for me. :)
seems to be working well: www.stanats.com/blog01.
thanks very much for the help - very pleased with Thematic. :)
Did you move that with CSS alone? Awesome.
czarg
Member
Hello -
Question: If I perform adding the code to my styles.css and create a banner.jpg - will this replace the dandy little tab that a user can click on and sign-in? I'm liking this feature (slicker than snot) - Regards George
Do you mean: can I style the sliding-meta-panel-thing from my child theme style.css?
Yes. You can.
czarg
Member
No Ian - I'm sorry I need to be a little more specific..
I read the top of this thread. I wanted to place a banner on my site - rather than the default.. So I created a banner.jpg and placed the code in my styles.css (monkeymartin). I was curious that if I did this - will the sliding meta panel still be there? - Seriously, I've come a long way in 1.5 days and I just don't wanna mess anything up... I'll be a backup hound just to be safe--- Regards George
This topic has been closed to new replies.
