Grow your CSS skills. Land your dream job.

NOOB needs help…

  • # January 7, 2009 at 12:22 am

    Let me first say, Chris is an awesome teacher. I am a HS teacher with NO coding experience of any kind other than an occasional img and a href tag! I have followed his tutorials and learned a lot and have been successful at styling his example WP theme. I have one issue before I move on. My flickr badge won’t center in my sidebar and I can’t fix it. Again, be nice as I am a total NOOB at this. You will see this is Chris’ theme with my styling and tweaking. I figure copy the best and figure out how they do it.

    Thanks in advance!

    JT

    Here’s the link: http://jefftalley.net/test/wordpress/

    Here’s the CSS file:

    /*

    #350909: Dark Red
    #030f3e: Dark Blue
    #f0ebd6: Light Tan
    #d8c9a2: Dark Tan
    ##990000: Red

    */

    /*
    RESET
    */

    * { 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 #f0ebd6; }
    ul { list-style: square inside; }
    ol { list-style: decimal inside; }
    a { outline: none; text-decoration: none; }
    a img { border: none; background: none; }
    img { vertical-align: middle; }
    table { border-collapse: collapse; }

    /*
    UTILITY
    */
    .floatLeft { float: left; }
    .floatRight { float: right; }
    .clear { clear: both; }
    .button { border: 1px solid #272727; background: white; padding: 3px 8px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; color: 272727; }
    .button:hover { background: #990000; color: white; }

    /*
    TYPGROGRAPHY
    */
    p, li { font-size: 1.2em; line-height: 1.2em; margin: 0 0 10px 0; }
    p#intro-paragraph { font-family: Georgia, serif; font-size: 2.0em; font-style: italic; line-height: 1.4em;
    margin-top: 5px; }
    p#intro-paragraph span { font-size: 2.4em; font-weight: bold; }
    p#intro-paragraph em { color: #990000; }
    a { color: #990000; }
    a:hover { background: #990000; color: white; }
    h1 { font-size: 3.6em; font-family: Georgia, serif; font-weight: normal; }
    h2 { font-size: 2.8em; font-family: Georgia, serif; font-weight: normal; }
    h3 { font-size: 2.6em; font-family: Georgia, serif; font-weight: normal; margin: 0 0 10px 0; }
    h4 { color: white; font-size: 2.0em; margin-bottom: 15px; }
    .post h4 { font-size: 1.8em; font-family: Georgia, serif; font-weight: normal; margin: 0 0 10px 0;
    color: #900; }

    /*
    FORMS
    */
    input { padding: 3px; }

    /*
    STRUCTURE
    */
    #page-wrap { width: 960px; margin: 0px auto -250px;
    min-height: 100%; height: auto !important; height: 100%;}
    #socialsidebar { width: 190px; float: left; margin-right: 15px; }
    #main-col { width: 540px; float: left; }
    #linksidebar { width: 190px; float: right; }
    #push { height: 250px; }

    /*
    HEADER
    */
    h1#logo { width: 300px; height: 55px; background: url(images/header_bg.jpg) top left no-repeat; text-indent: -9999px;
    margin: 0 10px 8px 0; float: left; }
    #main-pic { float: left; margin-right: 10px; }
    #top-bar { padding: 20px 0 0 0; }
    #top-bar p { color: #f4dfb8; width: 300px; float: left; }
    form#searchform { margin: 0 0 10px 0; float: right; }

    /*
    MENU
    */
    #menu-bar { padding-top: 30px; padding-bottom: 20px;}
    ul#main-nav { width: 360px; float: left; margin: 10px 0 0 0; }
    ul#extra-nav { width: 360px; float: right; text-align: right; margin: 10px 0 0 0; }
    ul#main-nav li, ul#extra-nav li { display: inline; }
    ul#main-nav li a, ul#extra-nav li a { text-transform: uppercase; color: white; font-size: 1.2em; padding: 3px 8px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; }
    ul#main-nav li a:hover,
    ul#extra-nav li a:hover,
    body#portfolio ul#extra-nav li.portfolio a,
    body#default ul#main-nav li.home a,
    body#about ul#main-nav li.about a,
    body#contact ul#main-nav li.contact a,
    body#resume ul#extra-nav li.resume a{ background: white; color: #272727; }

    /*
    WIDGETS
    */
    .widget { background: #d8c9a2; width: 190px; border-right: 1px solid #d7b880;
    border-bottom: 1px solid #d7b880;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0 0 15px 0; }
    .widget .inside { padding: 10px; }
    .widget ul { list-style: square outside; margin-left: 15px; }
    .widget ul li { margin: 10px 0 5px 0; }
    .widget ul li a { display: block; padding: 0; }
    .widget ul li a:hover { background: #900; color: white; }
    .thumb { width: 62px; }
    /*.flickr-thumb { height: 41px; width: 62px; overflow: hidden; float: center; margin: 0 0 10px 15px; }
    */

    /*
    BLOG ENTRIES
    */
    .post { margin: 0 0 45px 0; }
    .datebox { width: 40px; float: left; padding: 0 5px 5px 5px; background: #990000; color: white; text-align: center;
    margin: 0 10px 0 0; }
    .day { font-size: 3.4em; font-weight: bold; margin: 0; font-family: Georgia, serif; }
    .month { font-size: 1.8em; font-weight: bold; text-transform: uppercase; margin: 0; }
    .year { font-size: 1.6em; font-weight: bold; margin: 0; }
    ol.commentlist { list-style: none; }
    .comment-bubble { background: #990000; color: white; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
    ol.commentlist li p { font-size: 1.0em; }
    .gravatar { margin-top: 3px; padding: 2px; height: 40px; }

    /*
    FOOTER
    */
    #footer { height: 250px; background: #272727; border-top: 4px solid #990000; padding-top: 20px; }
    #footer-inside { width: 960px; margin: 0 auto; }
    #footer p { color: white; }
    #footer-1 { width: 300px; float: left; margin-right: 30px; }
    #footer-2 { width: 200px; float: left; margin-right: 30px; }
    #footer-3 { width: 200px; float: left; }
    #footer-4 { width: 200px; float: left; }
    #footer a { color: white; }
    #footer ul { color: white; }

    # January 7, 2009 at 1:29 am

    well you could always go for the old ways and add a align="center" into your tbody tag for the images. if that doesn’t work. just add some padding and try to "eye" it

    # January 7, 2009 at 1:33 am
    "cybershot" wrote:
    well you could always go for the old ways and add a align="center" into your tbody tag for the images. if that doesn’t work. just add some padding and try to "eye" it

    Remember, NOOB.

    Where should I add the padding/align="center"?

    Rob
    # January 7, 2009 at 4:01 am

    hey Jeff :)

    Code:

    You seem to have alot of element styling actually in your html document there, and not in your style sheet.

    If you replace the line above with the one in your HTML it will centre the image, I just added 5px to the left hand side margin and it centres nicely.

    If you want to separate them and put the style in the stylesheet – then change it like this.

    HTML:

    Code:
    Twitter Me

    to past into stylesheet…

    Code:
    .twitbird { margin: 0pt 0pt 10px 15px; display: block; }

    BUT – if you want to be even better than all that, here is a little tip… IE and FF can see margin differently, so using margin to postion something can be nasty sometimes. IE will pull some figure from the air, divided by the moons distance from mars, multiplied by the amout of rabbits in mexico on the 18th june 2007… yes thats how random it can be lol

    SO its always good to use postioning. That would look like this in your stylesheet.

    Code:
    .twitbird { margin-bottom:10px; display: block; position:relative; left:15px; }

    and that would centre, by eye, your lil twitter bird too. :)

    # January 7, 2009 at 10:19 pm

    Rob,

    Thanks for the advice and info.

    I’m a little confused. I need the Flickr badge to be centered. I guess I didn’t realize the twitterbird was not centered. I’ll add that code there. How do I center the Flickr badge using this code bit?

    # January 8, 2009 at 12:27 am

    in your html code you have embeded styles for the flickr stuff. down the page just a little more than half it says this

    <style type="text/css">
    #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
    #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
    #flickr_icon_td {padding:0 5px 0 0 !important;}
    .flickr_badge_image {text-align:center !important;}
    .flickr_badge_image img {border: 1px solid black !important;}
    #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
    #flickr_badge_uber_wrapper a:hover,
    #flickr_badge_uber_wrapper a:link,
    #flickr_badge_uber_wrapper a:active,
    #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
    #flickr_badge_wrapper {}
    #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important; }
    </style>

    locate that chunck of text and add this line into it
    #flickr_badge_uber_wrapper { margin: 0 auto; }

    this should center your images.

    Rob
    # January 8, 2009 at 5:32 am

    haha awesome – I complelty made up and issue and fixed it instead of addressing the real issue…

    I should go into politics!

    # January 8, 2009 at 12:24 pm

    Thanks so much. I’ll fix both!

    Jeff

    # January 12, 2009 at 1:26 am

    Ok, so I took the theme live and I don’t like the actual post font, but if I change the size or font it changes everything around it. Some sort of <div> problem? Anyone want to continue to help? Thanks, JT

    http://jefftalley.net

    Rob
    # January 12, 2009 at 4:24 am

    do you mean – when you say change the font size or whatever, all the fonts change on the site?

    If so – then you need to be more specific with your CSS..

    For example, styling p would style every p on the site. Styling only the element you want to style is quite easy, you just have to target it.

    <div id="post">
    <ul class="list">
    <li></li>

    look at the above code – if I wanted to style the "post" div, you know how to do that… but if I wanted to style the LI then I need to be specific.

    div#post ul.list li { your:styling}

    what the above CSS does is:

    browser brain moment:
    Im looking for a div with the id of post, ok found that… now im looking for a ul with the class of list, found that, now im looking for an li item. Time to style!

    This way you target the exact place you need :) There are many ways you can write it as well, just be as specific as you want.

    I hope thats what you ment :D

    # January 12, 2009 at 11:57 pm

    Ok, the test of the actual post itself is eluding me. I have one post up there and I’m trying to change the font and size of that text ONLY. The actual text of the post and nothing else. I have tried changing:

    .post

    and adding

    #post

    and

    div#post

    And none are working. Please accept my apologies for only knowing enough to create issues.

    Thanks again for your help!

    # January 13, 2009 at 12:32 am

    Hold the phone..

    I think I fixed it. Is this what you meant===OR===is this an appropriate fix? (i’m not a coder so an appropriate fix is what fixes it…so in my mind yes)

    div.datebox, p { font-size: .6em; }
    div.post, p { font-size: 1.25em; font-family:Georgia, serif;}

    Rob
    # January 13, 2009 at 3:26 am

    when specifiying an element to style you dont use the ","

    Ok – lets do a quick example

    div, p, span, #monkeynuts {
    color:white;
    }

    This would colour all the text in all those elements white.

    div.datebox p { color:white; }

    would style only the text in the p box WITHIN the div with the class of datebox – white.

    Dont worry, once it clicks it will make sense :D

    # January 13, 2009 at 7:38 pm

    Robski,

    You are an amazing help. But I had to change the order of the elements to make it work. Is that right?

    Whatever, Thanks for your help and I’ll be back here soon, I’m sure.

    Rob
    # January 13, 2009 at 8:27 pm
    "jefftalley" wrote:
    Robski,

    You are an amazing help. But I had to change the order of the elements to make it work. Is that right?

    Whatever, Thanks for your help and I’ll be back here soon, I’m sure.

    Well you run down the elements as they are listed in your html document. Think of it as digging. You start at the top layer, and you work your way down…

    <div id="garry">
    <div class="post">
    <p> Lots of text and here comes an image! <img src="" /> </p>
    </div>
    </div>

    Look at the above, you have layers, garry the div is your outter layer, inside garry somewhere deep deep down is the img tag you want to style. So you need to dig…

    <div id="garry"> Through garry, can you see the img tag yet? nope its still hidden under more html…
    <div class="post"> Can you see him yet? nope – better keep going then…
    <p> Lots of text and here comes an image! <img src="" /> </p> You found the treasure!
    </div>
    </div>

    So we have to translate the stucture into the CSS – like giving your mate directions to your house – take a left, go a head for 1 mile, turn right at the post box… You do it in the order he would drive to your house… see below, think of the journey above.

    div#garry div.post p img { STYLE-ME-BABY:YEA!;}

    Thats a little over the top, but you get the idea :)

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

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