Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS help with WordPress theme

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #27805
    Tam
    Member

    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.

    #70258
    Deques
    Member

    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/

    #70276
    Tam
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.