»
S
I
D
E
B
A
R
«
Web Nerds PLS HALP
April 25th, 2009 by angyl

Ok, this webby stuff is totally not the form of nerd I speak. See the theme I have on this blog? Ahisma. I LOVE it — BUT. Well, not the colors, but I can change colors. What I hate is that bar on the left. I HATE BARS ON THE LEFT WITH A GREAT PASSION. Yet, I love this theme so much otherwise, I thought I’d ping my peeps and see if you could advise me on:

a) Can it (the sidebar) basically be mirrored over to the right?
b) How much work would this involve for, say, you?
c) Can you do it?
d) How long would it take / what kind of bribe would I need to offer you?
e) The author claims it’s kinda weak under the hood.  Do you know of something with a similar feel that’s better built under the kimono?

The ideal solution will come in the form of you telling me “go to this file and where it says:

BLAH FOO BLAH MOSH

replace it with

BLAH BAR.FOO.dance-magic-dance MOSH

Also okay would be “install this other theme (link)”.

Thanks! <3


  • If you move the sidebar to the right, you will also have to move the tab to the right, to make it look right. Its not that difficult to do actually... I don't have the time right now to look at the code, so speaking off the top of my head ;-), you will have to edit header.php and move table cells marked sidebartab to after the other cells. I will post better instructions tomorrow, but if you don't hear from me, please send me email.

  • Oh another thing: you will also hae to change which borders are curved (right, rather than left) for the tab. More tomorrow...

  • See, this is why I ask rather than trying it myself! :)

  • I took a look at the source code and it shouldn't be hard. All you need to do is move the location of a few table elements and change the css code to reposition the rounded corners. The JS is all based on the id of the table

    for the css it is just: (see line 263 in your style.css file)

    -moz-border-radius-bottomright:8px;
    -moz-border-radius-topleft:8px;

    instead of

    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-topleft:8px;

    then, on line 281, change the

    -moz-border-radius-bottomleft:30px; to -moz-border-radius-bottomright:30px;

    Let's see. For the html, header.php file, you need to move the line:

    <td class="sidetabs"> </td>

    from line 164 to below the </td> on line 175 (but above the <tr>!!)

    Next, you'll need to copy the entire section from line 183 - 194 and remove it from the header.php file. Then go to the footer.php file and paste the code inbetween the </tr> on line 3 and the </table> on line 4.

    That should now reposition the sidebar onto the right side. The first html move was to adapt the crappy table-based layout to compensate the header for the sidebar being moved and the second is to actually move the sidebar. Oh, you might also want to switch the order of the <td> that you pasted into the footer.php file. That way the sidebar text will be on the outside of the content :). Hope that helps and all the code shows up! If not, I will kick it.

  • There are a couple of typos above (bottomleft should be bottomright) but otherwise seems to be on the right track. The next release of Ahimsa will have an option that you can set to take care of this. I might even have support for multiple sidebars.

    Regarding "crappy table based layout", don't even get me started. I spent many many days with an initial pure CSS based layout before giving up and moving to a table, especially for cross-browser support. Of course criticising tables for layout is all the rage, so enjoy the glow while it lasts.

blog comments powered by Disqus
»  Substance: WordPress   »  Style: Ahren Ahimsa