Wanted: CSS guru/wiz to help with new template/theme dev

  • I’m by no means a noob when it comes to CSS, or to building themes/templates for WP, but this one is kicking my arse. I’ve got a design idea that I would like to use for my site (the current one has been in use for 2 months, time for a change). It’s a “simple” two col side with the sidebar down the left. What’s different about this is that the side bar runs form the top of the page downward. You’re probably asking your self: Huh? Most templates are set up so that the side bar begins _below_ the header section. In this case I plan to make the header only as wide as the main part of the page, and let the header run full on from top to bottom. So I need the sb to be *visualy* placed before the header….. but…. I want to keep the sidebar *last* in code…. There’s a couple of other tricks that I’ll need help on, but the sidebar is the biggest thing. If anyone cares to help, drop me a line (via my contact page).

    I’ve tried to take existing ones that were close to what I wanted, but in every case, it was done by putting the menu in code before the header and other main content…. and in one case tables were used…. shudder….

    -tg

Viewing 8 replies - 1 through 8 (of 8 total)

  • Absolute position for the header.
    Float position for content and sidebar, and play with their top margins.

    You might try to get some inspiration from this page:
    https://www.positioniseverything.net/ordered-floats.html
    Although it’s about 3 column, but disregarding the 3rd column and moving the header… might get you somewhere.

    Thread Starter TechGnome

    (@techgnome)

    alphaoide – I was trying to avoid absolute pos divs…. I’ve never had much success with it, but I think in this case it maybe unavoidable…..but I’m thinking the side bar be absolute postitioned….with the rest of the page having a margin to match – the sidebar would then go into the margin.

    Sounds nasty, but it might work.

    -tg

    If I am not mistaken this is the layout you want….

    +————–+————–+
    + Header        + Side bar       +
    +————–+                     +
    +                     +                     +
    +                     +                     +
    +                     +                     +
    +                     +                     +
    +————–+————–+

    While I would say try to avoid “divitis” you could wrapper the header and the main body in a div that is floated left and the sidebar in a separate div that is floated right. Is that the right layout?

    Thread Starter TechGnome

    (@techgnome)

    almost…. only the sidebar on the left….I tried a little experimenting and found that if I absolute postition the sidebar to the left side, I can move the main content to the righ by setting a margin-left to nudge it over past the sidebar…. seems to work quite well.

    Turns out the “classic” theme had what I needed in it to give this a try….. So I think that’s what I’m going to do. Still going to create it from scratch – I need to add a few features that aren’t in the classic – but at least now I know what I need to do.

    -tg

    edit: Here’s what I’m after: https://tannagh.com/test.htm
    This was created in MS Publisher (used to be FrontPage) but it 1) Uses tables and 2) Uses alot of what I call junk css and conditionals that bloats it. So what I want to do is to take it apart and created using pure standard CSS.
    -tg

    @techgnome, about your solution with absolute-positioned sidebar: Imagine if the sidebar is longer than the content. The footer won’t clear that sidebar; the footer will overlap with the sidebar. And that’s exactly why we used to curse the Classic Theme a lot.

    krugerusa’s solution will work, too. It’s just it’s not that “semantic,” if you care at all.

    My solution, well, it’s working perfectly inside my head.

    Thread Starter TechGnome

    (@techgnome)

    semantic is importaint…. and I don’t care about the footer clearing the sidebar – the footer will only be as wide as the main content part of the page anywho (that isn’t real clear in the test page I tossed up); but that reminds me of why I’ve proly had problems with the absolute pos in the past…. and in my head, it all “just works” too!

    -tg

    edit: I need to sleep on it (I need to sleep period) but I think what you said makes sense and I think I know how to make it work too….
    -tg

    Thread Starter TechGnome

    (@techgnome)

    Woof! Turned out to be far easier than I expected.

    Here is the original

    Here is my shot at it.

    Comments? It’s still not quite done, and I’ve only got place holders for everything, but you get the idea of how it’s going to look. What surprised me the most was how minimal the CSS was (especialy when compared to the original! – take a peak, view the source on both.)

    -tg

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Wanted: CSS guru/wiz to help with new template/theme dev’ is closed to new replies.