Hello there,
I'd like to replicate the effect I've created in my header image in Power Blog by using CSS.
Currently, my header image actually has a white square as part of the image itself, because I couldn't work out how to do it any other way. It causes issues when people zoom in or out.
I think the best way would be to create a div around blog-title and blog-description and style it from there. Can someone show me how, or suggest a better way? My site is http://digitalcortex.net
Tom
snack
Member
have a look at this diagram of thematic css
http://bluemandala.com/thematic/thematic-structure.html
i'm guessing you want something like this:
#branding {
background:#FFFFFF;
padding: 10px 10px 10px 0;
}
though you might choose to give the bg to #blog_title / #blog_descrtiption instead...
Hi Snack,
That's is the sort of styling I want to do, but moving the background image out of the branding div isn't something I'm comfortable with.
Were the blog-title and blog-description in their own div I could style it without affecting the rest of the header structure.
Where can I edit the functions called in thematic_header and add the new div?
Tom
snack
Member
why not put the image as a background of #header ?
if you're really attached to changing the markup, i think you can just insert
<div id="new_div">and then later on
</div>carefully in the right places in header.php (which you should first copy from thematic into your child theme).
Thematic Power Blog is a near-perfect theme, and changing the markup as you suggest would risk affecting the way all of the various elements line up.
I realise that I need to create a div at a certain point, but in looking at my child theme's header.php (Power Blog is a child theme) and indeed in the header.php in Thematic's core files, only the following relevant code is referred to:
<div id="header">
<?php thematic_header() ?>
</div>
How do I modify the the thematic_header to create my new div?
I can't find the section in either my child theme or core functions.php.
All thoughts welcome, thanks in advance,
Tom
snack
Member
tom, i think if it says thematic_blah(), it means it's one of the thematic hooks. which means it's prolly in the file hooks_filters.php, and you would modify it safely in your child theme's functions.php.
but you should just stick that image in the background like i suggested above.
the answer to the question you ask above (how do you modify the header) is:
<div id="header">
<div id="new_div">
<?php thematic_header() ?>
</div>
</div>
#new_div{ background: url(blah); }but that's not the right way to go about it. you should modify the core templates as little as possible, and when you do, you should do so as safely as possible (ie, in a child theme if not in functions.php)
Thanks for your effort, but I've now come up with a far safer way that doesn't require a change to the header structure, and has the required effect:
#blog-title, #blog-description {
background:#ffffff none repeat scroll 0 0;
margin-right:715px;
}I think sometimes it's possible to overcomplicate matters once we get used to how flexible Thematic really is. A bit of lateral thinking and CSS are often the only thing we need.
Check out the final effect at http://digitalcortex.net.
Tom
snack
Member
wow. good idea.
You must log in to post.