NOOB needs help…

[jefftalley]

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; }

[jefftalley]

"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"?

[jefftalley]

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?

[jefftalley]

Thanks so much. I’ll fix both!

Jeff

[jefftalley]

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

[jefftalley]

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!

[jefftalley]

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 MacKay]

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

[jefftalley]

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 MacKay]

"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 :)

[jefftalley]

Wow! Between you and Chris, I have learned a lot in the last month. Thanks again!

[Rob MacKay]

"jefftalley" wrote:

Wow! Between you and Chris, I have learned a lot in the last month. Thanks again!

Nice one – im glad it helped :D

[Author]

Posts