Forums

  • 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 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 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag