Tweaking a WordPress Theme: Removing Banner Space

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.

  1. 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
  2. Removed the float and width on h1. Changed left to {right: 1em}.
  3. 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.)
  4. img is the header’s background image. It’s a 940×198 JPEG. Bah, should be a PNG?
  5. The {display: block}seems a trick to avoid some whitespace, presumably due to line spacing? Not sure. (Hmm, img is inline by default?)
  6. But, why is this /background/ image in HTML instead of CSS? Isn’t it a stylistic element?
  7. Divitis?


Comments are closed.