help with CSS to move titles on Wu Wei template

  • Author
    Posts
  • #591601

    jakethy
    Member

    I barely grasp CSS, so I don’t know how hard or not this would be to do. I’m using the Wu Wei template and I’d like to move the title of each post from the left of the post’s body to a position above it. http://winkypedia.net/ has done this successfully – you can easily see the difference between those titles and the layout on my blog.
    Any input or advice would be greatly appreciated.

    The blog I need help with is playwithmyfood.com.

    #591716

    This will do it.

    .post-info {
    margin: 0 1.667em 20px 0;
    width: 38.333em;
    }

    [opinion]
    For the life of me I cannot understand why people want to take this theme and turn it back into a standard theme when it would actually in many cases be much easier to start with a standard layout and give it the characteristics of Wu Wei.

    {shakes head and mumbles}
    [/opinion]

    #591717

    jakethy
    Member

    HA! You’re amazing – thank you. Yeah, if I’d had the forethought to consider the practical nature of the layout rather than just the aesthetic, I would’ve known better. But then, that’s the case with a lot of things in life.

    That worked great – is there now a way to center the entire body in relation to the header, so there’s no dead space to the right? (that noise is the sound of me pushing my luck)

    – Jake

    #591720

    Try this and see if this is what you want.

    #header img {
    margin: -144px 0 0 -220px;
    }
    #591722

    jakethy
    Member

    hmmmm, that moved the header so that IT is centered about everything below. I was hoping to move the body of the posts to the right so that THEY are centered below the header, leaving it where it began. Using the code above still leaves a lot of empty space to the right. Third time’s the charm?

    #591724

    I’m not totally sure I understand what you are wanting, so this is a guess.

    .center-column .hentry, .center-column .page {
    padding-left: 2.3em;
    }
    #591725

    In addition to the above, you could add this.

    .center-column {
    width: 42.334em;
    }
    #591745

    jakethy
    Member

    TSP – Thanks for all your help tonight. That’s so much more than I thought would be possible. There’s several more things I’d love to tweak – font color, that pesky white line, etc. – but I’m feeling very accomplished and it looks a lot better already.

    It was so nice of you to take the time to assist me in my trivial pursuit.
    sincerely,
    Jake

    #591752

    You are welcome, and if you run into issues with the other changes, you know where we are.

    #591930

    jakethy
    Member

    Uh, me again. I should’ve noticed this the other night when we made those changes – the tags & categories that’re listed at the bottom of each post are getting cut off at the left. I don’t know if it’s possible to rescue them AND keep the existing changes we made to the placement of body of the posts?

    #591932

    Try this and see what you think.

    .post-meta-data {
    margin: 0 0 0 -2.2em;
    }
    #591933

    jakethy
    Member

    Must be magic! Looks great. Thank you :D

    Someday I’d love to reverse the color scheme for the fonts in the side bar and of each post’s title so that the oranges are instead the light grey and vice versa. How hard would that be?

    #591934

    Not hard at all.

    h1 a:link, h1 a:visited {
    color: #FF8A00;
    }
    
    h1 a:hover {
    color: #959EA1;
    }
    
    a:link, a:visited {
    color: #FF8A00;
    }
    
    #footer-widgets li .widgettitle {
    color: #FF8A00;
    }
    
    a:hover {
    color: #CCCCCC;
    }

    I might also suggest lightening up the content copy as does not have enough contrast in my opinion.

    body {
        color: #AAAAAA;
    }
    #591935

    jakethy
    Member

    Good thinking on lightening up the content. Lookin’ better to me.

    I like the name of each category in the sidebar being orange, but the lists under them are still orange too. I was imagining them being the shade of grey that the header’s were before.

    #591936

    Oops, messed up on the color code.

    a:link, a:visited {
        color: #959EA1;
    }
    #591937

    jakethy
    Member

    *gasp* I am so, so happy with that result! Thanks again for your attention – I can now end the day with a huge smile. You’re a genius.

    – Jake

    #591938

    You are welcome, and it is looking very good.

The topic ‘help with CSS to move titles on Wu Wei template’ is closed to new replies.