Justine Larbalestier

reading, writing, eating, drinking, sport

New Look (Maybe)

As you can see I’ve been experimenting with a new look for the blog. Basically what I wanted was the old look plus an extra column. Sadly I couldn’t figure how to change the old template. (Css skills=zero.) So I mucked around with another template trying to get it to look like my old one. This is as good as I’ve managed.

There are many things I’m unhappy with:

  • the bullets in the sidebars
  • how tight the space between the three columns is
  • the disappearance of my blogroll
  • navigation between posts gone
  • header not clickable any more

I’m off to see the Liberty take on the Sacramento Monarchs at Madison Square Garden. Maybe I’ll figure out how to fix these problems when I get back. If any of you wise folks have suggestions I’d love to hear it!

Let’s go Liberty!

Posted by Justine at 14:51, 8 July 2007 under Bloggery | 19 Comments »

Comments

  1. Ally Says:

    I love it!

  2. Rebecca Says:

    here’s a good site for learning css (and pretty much anything). i’m alooking at the page source. dunno if any of this will work but:

    - you should just be able to remove the ul and li tags to get rid of the bullets. i think you’ll probably be fine just getting rid of the ul tags, b/c deleting all the li tags would be tedious.

    - add margins to the divs. you’ll have to do this with css though, b/c divs don’t take many attributes. looks like you’ve got an external stylesheet, so you’d need to access that. here’s the section:
    #colOne ul {
    margin-left: 0;
    padding-left: 1em;
    }

    so to change that, you’d just change the margin. if you want to change the margins for all sides of the column, just type “margin:” instead of “margin-left:”

    - i do not know where your blogroll has gone, and that is sad. it may be getting suppressed by this particular template. if you’ve got the code for it still, you could try just sticking it into one of the columns. (or you may have to rewrite it.)

    - dunno about the post navigation.

    - find the header code (div id=”header”) and just put a href tags around it. it’s the very first div in the body of the code.

    (p.s. BUGGER! your blog is kicking me out as spam again.)

  3. Rebecca Says:

    your blog thinks i’m spam again. i emailed you the comment.

  4. Dawn Says:

    Interesting new look. All that really matters to me is if I can comment or not, so as long as that works…it’s a-ok!

  5. Little Willow Says:

    Let’s see if the new blog likes me…

  6. Gabrielle Says:

    I don’t know why, but the header with your name and stuff at the top looks kinda empty to me. I can’t really remember how it looked like before, though…
    I think the bullet points at the right aren’t bad. I like how they aren’t full, and they look more like circles, in opposition to the bullet points at the bottom right.

  7. Peter Says:

    Welcome to the nightmare of web design and css. I suspect you’ve been looking at your blog in Internet Exploder? Have a look in Firefox and you’ll see what Gabrielle above is talking about – the header isn’t there, I think(? – if it’s meant to be an image or something), there’s just the text.
    I may be wrong though! But there are endless problems getting the different varieties of IE to match up with Firefox :(

    Meanwhile, the blogroll has probably disappeared because it’s not being put there anymore by WordPress. This page tells you what code to put in the template in order to display it:
    http://codex.wordpress.org/Template_Tags/get_links_list
    You put that bit of php code in whichever column you want – read it all so you know what to put in for “order” by the way!

    And regarding the bullets, you’re going to have to do that with css, because WordPress likes to create the lists using ul and li tags. So you’ll have to redefine those tags using css so that they don’t use bullets. You can probably do it with:

    li { list-style: none; }

    But if you only want it to be in the side columns then something more like this would do it:

    #colOne li { list-style: none; }
    #colThree li { list-style: none; }

    Or similar… Fingers crossed! Hope the code comes out ok in this post…

  8. Peter Says:

    Code came out ok but note that your columns are divs with id colOne and colThree, with One and Three starting with a capital letter! The CSS will, I suspect, be case-sensitive.

    Oh – it looks like your headers doesn’t have an image. Cool. For what it’s worth, I think the page design is really lovely! I meant to say that in the previous post!

  9. 9. Justine Says:

    Thanks for all the advice! Tragically I’ve not been able to get any of it to work. :-(

    Gabrielle & Peter: There’s not meant to be any image up top. I like things plain.

  10. Rebecca Says:

    i think what they’re worried about is that there’s a huge space up top with nothing in it. about 200 pixels, looks like. i do not know why, as i can’t see anything in the code that appears to be causing it.

    also, in the evil internet explorer, your right column gets shoved all the way down to the bottom of the page, below the last entry. it did that on the previous template too. however, i don’t have the latest version of ie.

    yanno, if you like the old template better and all you want is the extra column, you might just be able to copy the code for the old column and then tell it to float left instead of right. you’d probably have to narrow the entries column or expand the width of the whole thing overall. without seeing the old code, i dunno anything for sure.

    also, in ie, there’s a space between the navbar up top and the main content. but not so in firefox.

  11. marrije Says:

    Justine, you could try adding ‘list style: none’ to the #colone ul, not the li, comme ca:


    #colOne ul {
    margin: 5px;
    padding-left: 1em;
    list-style: none;
    }

  12. Jessica Says:

    Oh! I’m sad about the missing blogroll.

  13. marrije Says:

    Although what Peter said should work, and is probably better, seeing as how it’s the li you want to style and not so much the ul…


    #colOne li {
    list-style:none
    }

  14. marrije Says:

    hey! you did it!

  15. hereandnow Says:

    I like the new look! And I have nothing to add re: css, sorry. *fails at the internets*

  16. Peter Says:

    There are still a few stray dots which may require a list-style:none, so you could marrije’s suggestion too :)

    It is lovely looking. I was indeed confusled by the big blank space, but I’m not disturbed by it, if that’s what you want! It could be the height: 160px; instruction in the #header section of the css, if you want to play with that…

  17. Gabrielle Says:

    Rebecca’s right. I don’t care if there’s no image, but I didn’t quite know exactly what was wrong before Rebecca pointed it out. If you can, you should take out at least about 50 pixels out. I think that would be good.

  18. 19. Justine Says:

    Thanks everyone for the suggestions. All the probs I mentioned above are now fixed. The blog has everything I want it to have. I declare myself happy.

    It wouldn’t have happened without Chris McLaren. Bless you! And Bennett Madison. Thanks so much for all your help.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

<-- -->