Intending to hack this theme (Twist of Ten) to pieces, so have nothing much to gain from overriding with a child theme. Forked it instead by renaming its directory.
- Relevant markup:
html body.blog.home.rtl #wrapper.hfeed #header #rss-subscribe #masthead #branding {position: relative; width: 940px} h1#site-title {z-index: 1; position: absolute; top: 50px} span #site-description img {display: block} #access -- navigation bar
- Removed the float and width on h1. Changed left to
{right: 1em}
. - To superimpose the h1 text on the image, it’s taken out of the flow with
{position: absolute}
, and given{z-index: 1}
. The{position: relative}
on its parent div is to specify relative to which parent the h1 is positioned. (The names of the CSS properties are all wrong. Can’t find a reference to that article. Nu.) - img is the header’s background image. It’s a 940×198 JPEG. Bah, should be a PNG?
- The
{display: block}
seems a trick to avoid some whitespace, presumably due to line spacing? Not sure. (Hmm, img is inline by default?) - But, why is this /background/ image in HTML instead of CSS? Isn’t it a stylistic element?
- Divitis?