Grow your CSS skills. Land your dream job.

CSS help with WordPress theme

  • Tam
    # January 30, 2010 at 9:27 am

    Hello everyone,

    I am having some trouble getting my head around the CSS for my WordPress theme i’ve been making with the help from the Designing for WordPress screencasts.

    The theme as it currently stands is live, so can be seen over here: http://www.tamoose.co.uk/posthocblog.

    I have also taken a screen grab and labelled the bits i am trying to fix.
    [img]http://www.tamoose.co.uk/images/posthoc/blog_help.jpg[/img]

    Here’s the problems:
    1 – I can’t seem to get that light yellow colour to fill the entire menu-bar. I have an image that is set to it’s background value but it is only filling that top small strip.

    2 – I want the title of the posts to be the darker yellow, but the links within the post the lighter yellow. I can’t figure out how to set only the title links to the darker yellow.

    3 – How do i get rid of the bullet points in the sidebar list?

    4 – How can i fill the entire sidebar area with the light yellow? I want the yellow to continue right down to the header.

    5 – I can’t figure out where these bullet points are coming from? Any ideas?

    Here is my CSS file:

    Code:
    /* css file for post hoc blog by thomas finlay

    colour scheme
    yellow = #FFF978
    light yellow = #FFFDCA
    footer green = #438531

    */

    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    html, body { height: 100%; }
    body { font-size: 62.5%; font-family: Arial, sans-serif; color: #272727; background: url(images/body-bg.png) top center repeat-x white; }
    ul { list-style: square inside; }
    ol { list-style: decimal inside; }
    a { outline: none; text-decoration: none; }
    a img { border: none; }
    img { vertical-align: middle; padding: 5px 5px 0 0; }
    table { border-collapse: collapse; }
    #box ul li {list-style:none;}

    /* utility
    */
    .floatleft { float: left; }
    .floatright { float: right; }
    .clear { clear: both; }
    .button { border: 1px solid #B991FF; background: white; padding: 3px 8px; }
    .button:hover { background: #A978FF; color: white; }

    /* Typog
    */
    p, li { font-size: 1.2em; line-height: 1.2em; margin: 0 0 30px 0; }
    a { background:#FFF978; color:black; }
    a:hover { background:#FFFDCA; color:black; }
    h1 { font-size: 3.0em; font-family: Georgia, serif; font-weight: normal; }
    h2 { font-size: 2.0em; font-family: Georgia, serif; font-weight: normal; }
    h3 { font-size: 2.0em; font-family: Georgia, serif; font-weight: normal; margin: 0 0 10px 0; }
    h4 { color: black; font-size: 2.0em; margin-bottom: 15px; }

    /* structure
    */
    #page-wrap { width: 780px; margin: 0px auto -50px;
    min-height: 100%; height: auto !important; height: 100%;}
    #push { height: 50px; }

    #sidebar { width: 180px; float: left; background: #FFFDCA; }
    #main-col { padding-left: 5px; width: 595px; float: right; }

    /* header
    */
    h1#logo { height: 150px; width: 780px; background: url(images/header-bg.jpg) no-repeat;
    list-style: none; text-indent: -9999px; }
    h1#filler { height: 4px; width: 780px; background: url(images/filler-bg.png) no-repeat;
    list-style: none; text-indent: -9999px; }

    /* menu
    */
    #menu-bar { padding-top: 11px; margin-bottom: 20px; background: url(images/menu-bg.png);}
    ul#main-nav { width: 780px; float: left; margin: 5px 0 10px 0; }
    ul#main-nav li { display: inline; }
    ul#main-nav li a { background: #FFFDCA; color: black; font-size: 1.2em; padding: 3px 8px; }
    ul#main-nav li a:hover { background: #FFF978; color: black; }

    #fill-bar { padding-top: 10px; }

    /* blog entries
    */
    .datebox {width: 36px; float: left; padding: 2px; background: #FFF978; color: black; text-align: center;
    margin: 0 10px 0 0; }
    .day { font-size: 1.2em; font-weight: bold; margin: 0; }
    .month { font-size: 1.0em; font-weight: bold; text-transform: uppercase; margin: 0; }

    /* sidebar
    */
    #sidebar h2 { font-size: 1.5em; font-family: Georgia, serif; font-weight: normal; padding: 0 0 5px 0; }
    #sidebar a { color: black; background: #FFFDCA; text-decoration: none; }
    #sidebar a:hover { color: #000000; background: white; text-decoration: none; }
    #sidebar p { font-size: 1.1em; line-height: 1.2em; margin: 0 0 5px 0; }
    #sidebar li { font-size: 1.1em; line-height: 1.2em; margin: 0 0 5px 0; }

    /* main content
    */
    #main-col h2 { font-size: 2.0em; font-family: Georgia, serif; font-weight: normal; padding: 0 0 5px 0; }
    #main-col a { color: black; background: #FFFDCA; text-decoration: none; }
    #main-col a:hover { color: #000000; background: white; text-decoration: none; }
    #main-col p { font-size: 1.3em; line-height: 1.3em; margin: 0 0 5px 0; }
    #main-col li { font-size: 1.3em; line-height: 1.3em; margin: 0 0 5px 0; }

    /* footer
    */
    #footer { height: 50px; width: 780px; background: #519c3d; border-top: 2px solid #438531; padding-top: 10 px; }
    #footer-inside { width: 780px; margin: 0 auto; text-align: center; }
    #footer p { font-size: 1.0em; }
    div#footer a { color: black; background: none; text-decoration: none; }
    div#footer a:hover { color: #000000; background: #7cc968; text-decoration: none; }

    Any help with these problems would be much appreciated! Thanks.
    Tam.

    # January 30, 2010 at 10:07 am

    1. Edit #menu-bar to look like this:

    Code:
    #menu-bar {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#fffdca;
    padding-top:11px;
    height:23px;
    }

    2.The "background:#FFFDCA none repeat scroll 0 0;" in the code bellow is responsible for the light yellow background you want to change.

    Code:
    #main-col a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFDCA none repeat scroll 0 0;
    color:black;
    text-decoration:none;
    }

    3. Edit ‘#sidebar li’ to look like this:

    Code:
    #sidebar li {
    font-size:1.1em;
    line-height:1.2em;
    list-style:none;
    margin:0 0 5px
    }

    4. I think the easiest way to fix that would be by editing the html, but I’m not sure how to do that in wordpress.
    5.The empty unordered list is creating the bullets. I’m a wordpress newbie so I can’t help you with getting rid of that :D

    Code:
    # January 30, 2010 at 11:51 am

    For Number 4 you could do the following
    Add background: #FFFDCA to #page-wrap
    Add background: #FFFFFF to #main-col
    Reduce the height in #push to 1px then in #page-wrap change margin to 0 auto -1px;
    It looked OK in IE7 but changing the #push height may mess up the sticky footer so you will need to test this.

    # January 30, 2010 at 2:11 pm

    For number 4 there is a nice trick for this. The method is called faux columns

    Here is a link you can read
    http://www.alistapart.com/articles/fauxcolumns/

    Tam
    # January 31, 2010 at 1:17 pm

    Hi guys,
    Thanks for your replies :D

    I’ve not got time to write a full post just now, but just thought i’d quickly update and say 1, 2, 3 and 5 are now fixed. 1 and 3 were fixed with zamy’s techniques. Thanks!
    I fixed 2 by putting the post titles in their own div in the wordpress comments file and then added a litte bit to my CSS to tell it to go dark yellow. Simple really, but i just couldn’t think of it the other day. I’ll post a full explanation tomorrow when i’ve got time.
    The bullet points in 5 are being created by wordpress trying to make "Newer Posts" and "Older Posts" links, but because there is no more content, the links show up empty. For now i have just commented out that part of the code, but i will try tomorrow to style the list so the bullets don’t show.

    Just 4 to fix now, so i’ll have a look at the posts about solving 4 tomorrow.

    Thanks for all the help so far!
    Tam.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".