# CSS help with my blog



## WarmCurb (Mar 15, 2004)

1. How can I change the color of post tiles, i.e. The 80s Meet the 90s? I'd like it to go from pink to black.

2. How can I change the capitalization of the first letter of every word in the post title? For example, it currently reads "The 80s Meet *The* 00s, Pt. 1" but I want it to read "The 80s Meet *the* 00s, Pt. 1"

Here's the blog: http://makeoutmusic.tumblr.com/

Thank you so much.


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> 2. How can I change the capitalization of the first letter of every word in the post title? For example, it currently reads "The 80s Meet *The* 00s, Pt. 1" but I want it to read "The 80s Meet *the* 00s, Pt. 1"


Change this style:

```
h1,h2,h3 { 
	font-weight: normal;
       [b][color=red]text-transform:capitalize;[/color][/b]
	font-family:Arial, serif;
	}
```
Remove the line in bold, red above. You can read about the text-transform style rule here.



> 1. How can I change the color of post tiles, i.e. The 80s Meet the 90s? I'd like it to go from pink to black.


Add a "color" style rule to the ".post-title" class definition:

```
.post-title {
	margin:0;
	padding:0;
       [b][color=red]color: black;[/color][/b]
	}
```
If the above doesn't change the color, change it to this:


```
.post-title {
	margin:0;
	padding:0;
       [b][color=red]color: black ! important;[/color][/b]
	}
```
Hope that helps! 

Peace...


----------



## WarmCurb (Mar 15, 2004)

Perfect! Thank you!


----------



## tomdkat (May 6, 2006)

Did you need to specify the "! important" to get the color to change?

Peace...


----------



## WarmCurb (Mar 15, 2004)

tomdkat said:


> Did you need to specify the "! important" to get the color to change?
> 
> Peace...


Nope.

One more thing: Why can't I change the font size of any of the text within the post? For example, let's say I wanted to make the introduction of a post larger than the rest of it.


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> Nope.


Cool. 



> One more thing: Why can't I change the font size of any of the text within the post? For example, let's say I wanted to make the introduction of a post larger than the rest of it.


You will need to provide a style for that. Try doing this:

Add this CSS class

```
.intro {
[url=http://www.w3.org/TR/CSS1/#font-size]font-size: larger;[/url]
}
```
Then create a span assigned to that class, like this:

```
<p>[b][color=red]<span class="intro">[/color][/b]Todays songs may initially bring your sexuality into question. And if they do, I must ask[b][color=red]</span>[/color][/b] you to chill out, homophobe. Theyre actually as close to the 80s pop sound wed all like to remember than anyone this side of the Killers has gotten. Besides, the decade would have fallen to RATT had the music industry not turned a blind eye to sexually ambiguous pop stars (heres lookin at you, George Michael). Ill start this series out with five tracks from across Europe, all of which Ive secretly been devouring since last year:</p>
```
That should be a good example for you to follow. By creating a span within the paragraph element, you can style the contents of the span through the "intro" class.

Peace...


----------



## WarmCurb (Mar 15, 2004)

Hello again, here's a weird browser issue I'm having with this part of the blog:










That's in Safari, but in Opera there's a space between the bullet point and the date, which is how I want it. Why is it displaying correctly in Opera, but not in Safari?


----------



## tomdkat (May 6, 2006)

Not sure. Try adding this CSS style rule:

.date img {
display: block;
}

That should cause the image to display as a block level element, which should employ the default padding and margins, per the W3C box model.

I don't have access to Safari right now to experiment with so I can take a peek in the morning.

Peace...


----------



## tomdkat (May 6, 2006)

Are you running Safari on Windows or Mac OS X? Attached is a screenshot of a saved version of the main page as viewed in Safari 3.2.1 on Windows XP Pro and Google Chrome 1.0.154.48 on the same system.

Which version of Safari are you running?

Peace...


----------



## WarmCurb (Mar 15, 2004)

tomdkat said:


> Not sure. Try adding this CSS style rule:
> 
> .date img {
> display: block;
> ...


Worked, thanks!

Now I'm only wondering how I can change the size of the post title's font? I'd prefer it to be one size smaller.


----------



## tomdkat (May 6, 2006)

How can you be wondering how to change the size of the "post title" font? The CSS you need is _already_ posted in this thread above but you just need to apply that style rule (as appropriate) to the right class. 

So, in your stylesheet you've got a "post-title" class defined already:


```
.post-title {
	margin:0;
	padding:0;
color: black;	
}
```
Look above at my commentary about the ".intro" class and apply that style rule to the "post-title" class to do what you want. 

Give that a try and report back what works or doesn't work along with what you did and then we'll go from there. It's not as difficult as you might think. 

Peace...


----------



## WarmCurb (Mar 15, 2004)

Thanks! I've figured everything out down to how to abbreviate the day (Mon.) and month (Feb.). Can I do this in CSS?


----------



## tomdkat (May 6, 2006)

Great job on the font size rule. 

As for the abbreviation, I don't think that's possible with CSS. CSS3 might provide a way to do it, but I doubt it. For that, you'll need to use a script of some kind of do it manually.

Peace...


----------



## WarmCurb (Mar 15, 2004)

tomdkat said:


> Great job on the font size rule.
> 
> As for the abbreviation, I don't think that's possible with CSS. CSS3 might provide a way to do it, but I doubt it. For that, you'll need to use a script of some kind of do it manually.
> 
> Peace...


I suppose HTML wouldn't work, would it?


----------



## tomdkat (May 6, 2006)

There are no "abbreviation" HTML tags. This is something you'll have to do yourself. 

Peace...


----------



## WarmCurb (Mar 15, 2004)

I created the whole thing in Safari on a Mac. Now I'm testing it in Firefox on a PC and the post title's are not displaying correctly. As you can see from the following code, it's supposed to be a certain size:

.post-title {
margin:0;
padding:0;
color: black;	
*font-size:1.8em;*
}

Clearly, the title is supposed to be the largest text on the page, but it's just a 12pt size in Firefox


----------



## WarmCurb (Mar 15, 2004)

Another compatiability issue:


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> I created the whole thing in Safari on a Mac. Now I'm testing it in Firefox on a PC and the post title's are not displaying correctly. As you can see from the following code, it's supposed to be a certain size:
> 
> .post-title {
> margin:0;
> ...


Thanks for the screenshot. Ok, the page renders just fine in Opera but not in Firefox for me either. I was looking at the HTML using "Firebug" and couldn't figure out why the "post-title" text, which is a H2 element, was showing up in "Firebug" in a "" tag.

Then, I found this:

```
<div id="menu">
  <center><style type="text/css">table.lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 0 !important;}table.lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b tr.lfmEmbed object {float:left;}table.lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px 0 !important;;}table.lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px 0 !important;}table.lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidgetchart_c9f133a3771a52d445fc3fbc7df9ae3b" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="warmingthecurb: Recently Listened Tracks" href="http://www.last.fm/user/warmingthecurb" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 -20px;text-decoration:none;border:0;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" data="http://cdn.last.fm/widgets/chart/19.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="lfmEmbed_48954526" width="184" height="179"> <param name="movie" value="http://cdn.last.fm/widgets/chart/19.swf" /> <param name="flashvars" value="type=recenttracks&amp;user=warmingthecurb&amp;theme=red&amp;lang=en&amp;widget_id=chart_c9f133a3771a52d445fc3fbc7df9ae3b" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> <param name="allowFullScreen" value="true" /> <param name="quality" value="high" /> <param name="bgcolor" value="d01f3c" /> <param name="wmode" value="transparent" /> <param name="menu" value="true" /> </object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/red.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?colour=red&amp;chartType=recenttracks&amp;user=warmingthecurb&amp;chartFriends=0&amp;from=code&amp;widget=chart" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px -20px;text-decoration:none;border:0;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/user/warmingthecurb" title="View warmingthecurb's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px -20px;text-decoration:none;border:0;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?colour=red&amp;chartType=recenttracks&amp;user=warmingthecurb&amp;chartFriends=0&amp;from=code&amp;widget=chart&amp;resize=1" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -159px -20px;text-decoration:none;border:0;" onclick="window.open(this.href + '&amp;resize=0','lfm_popup','height=279,width=234,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>
<br>[b][color=red]<font size=2><a href="feed://makeoutmusic.tumblr.com/rss">RSS FEED</a> <img src="http://i125.photobucket.com/albums/p71/rsherid/m-om/divider.jpg"> <a href="http://makeoutmusic.tumblr.com/archive/">ARCHIVES</a>

</center>
</p></b>
</div>[/color][/b]
```
As you can see, that tag is *never* closed, so I'm thinking Firefox applies that to other elements as well. The W3 HTML validator found this as well (in addition to finding other stuff).

Try closing that "" tag like this:


```
<font size=2><a href="feed://makeoutmusic.tumblr.com/rss">RSS FEED</a> <img src="http://i125.photobucket.com/albums/p71/rsherid/m-om/divider.jpg"> <a href="http://makeoutmusic.tumblr.com/archive/">ARCHIVES</a>[b][color=red]</font>[/color][/b]
```
See if that fixes the problem.

Peace...


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> Another compatiability issue:


See if closing the tag addresses this as well.

Peace...


----------



## WarmCurb (Mar 15, 2004)

Great find, thanks. Ok, now the very last thing I haven't found is how to adjust the body text, a.k.a. the blog entries. I went through h1-h6 and could not find them. Basically, I want to adjust the margins so the entries sit right below the logo (currently they're too far down the page).


----------



## tomdkat (May 6, 2006)

Do you mean you want to eliminate the gap between the "Make Out Music" image and the "Tuesday, Feb 3" blog entry date?

Peace...


----------



## WarmCurb (Mar 15, 2004)

tomdkat said:


> Do you mean you want to eliminate the gap between the "Make Out Music" image and the "Tuesday, Feb 3" blog entry date?
> 
> Peace...


Correct.


----------



## tomdkat (May 6, 2006)

Ok, looking at the HTML, I see this:


```
<div id="menu">
<h3><center><style type="text/css">table.lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0 td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0 tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_grey.png) no-repeat 0 0 !important;}table.lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0 tr.lfmEmbed object {float:left;}table.lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0 tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/grey.png) no-repeat 0px 0 !important;;}table.lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0 tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/grey.png) no-repeat -85px 0 !important;}table.lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0 tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/grey.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidgetchart_593db5c950ceecaf64701a99f5d357c0" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="warmingthecurb: Recently Listened Tracks" href="http://www.last.fm/user/warmingthecurb" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_grey.png) no-repeat 0 -20px;text-decoration:none;border:0;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" data="http://cdn.last.fm/widgets/chart/friends_6.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="lfmEmbed_1775811521" width="184" height="199"> <param name="movie" value="http://cdn.last.fm/widgets/chart/friends_6.swf" /> <param name="flashvars" value="type=recenttracks&amp;user=warmingthecurb&amp;theme=grey&amp;lang=en&amp;widget_id=chart_593db5c950ceecaf64701a99f5d357c0" /> <param name="allowScriptAccess" value="always" /> <param name="allowNetworking" value="all" /> <param name="allowFullScreen" value="true" /> <param name="quality" value="high" /> <param name="bgcolor" value="999999" /> <param name="wmode" value="transparent" /> <param name="menu" value="true" /> </object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/grey.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?colour=grey&amp;chartType=recenttracks&amp;user=warmingthecurb&amp;chartFriends=1&amp;from=code&amp;widget=chart" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/grey.png) no-repeat 0px -20px;text-decoration:none;border:0;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/user/warmingthecurb" title="View warmingthecurb's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/grey.png) no-repeat -85px -20px;text-decoration:none;border:0;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?colour=grey&amp;chartType=recenttracks&amp;user=warmingthecurb&amp;chartFriends=1&amp;from=code&amp;widget=chart&amp;resize=1" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/grey.png) no-repeat -159px -20px;text-decoration:none;border:0;" onclick="window.open(this.href + '&amp;resize=0','lfm_popup','height=299,width=234,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>

<br><div style="margin-top:5px">
<div class="searchbox" id="mainsearch">
<font size=2>Search:</font> 
<br><script type="text/javascript">Tumblr.searchBox()</script>
</div></div>

<br><font size=2><a href="feed://makeoutmusic.tumblr.com/rss">RSS FEED</a> <img src="http://i125.photobucket.com/albums/p71/rsherid/m-om/divider.jpg"> <a href="http://makeoutmusic.tumblr.com/archive/">ARCHIVES</a></h3>
</center>
</p>
</div>

[b][color=red]<br clear="all" />[/color][/b]
<div id="column-1"> 
		
  <div class="date"><img src="http://i125.photobucket.com/albums/p71/rsherid/m-om/divider.jpg">              
Tuesday, February 3, 2009 </div>
```
You can try removing the "clear=all" attribute (which has been deprecated) from the 
element OR try removing the 
element completely. Also, to see how the "menu" and "column-1" DIVs are laying out, add a temporary 1px border to each.

Peace,,,


----------



## WarmCurb (Mar 15, 2004)

*tomdkat,* that worked, but I just went ahead and enlarged the image to take up space.

What about this situation:










The headers (about, contact, blogroll) are h1, h2, and h3 and respectively, but when I adjust their padding it only moves the text beneath the headers, not the images. How can I move the headers to the left to align with the links beneath them?

Also, the "Contact" break line has somehow become misaligned. Is that just a padding issue?


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> Great find, thanks. Ok, now the very last thing I haven't found is how to adjust the body text, a.k.a. the blog entries. I went through h1-h6 and could not find them. Basically, I want to adjust the margins so the entries sit right below the logo (currently they're too far down the page).





WarmCurb said:


> What about this situation:


Wait a minute... I thought above you said that was the *very last thing*? 

Peace...


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> The headers (about, contact, blogroll) are h1, h2, and h3 and respectively, but when I adjust their padding it only moves the text beneath the headers, not the images. How can I move the headers to the left to align with the links beneath them?


First, clean up the "random" tags, like the <left> tag I see here:


```
<div id="column-2">
  <h3>[b][color=red]<left>[/color][/b]<img src="http://i125.photobucket.com/albums/p71/rsherid/m-om/header-contact.jpg"></h3>
```
Next, look at the "#column-2 h3" style rule:

```
#column-2 h3 {
[b][color=red]	text-align:right;[/color][/b]
margin-top:-31px;
margin-bottom:10px;
margin-right: -35px;
border-top:30px;
border-bottom:30px;
border-bottom:1px solid #594C47;	
}
```
Take out the "text-align" rule and see what happens. The rest of the text shouldn't be affected but you'll figure that out soon enough. 

Peace...


----------



## WarmCurb (Mar 15, 2004)

tomdkat said:


> Wait a minute... I thought above you said that was the *very last thing*?
> 
> Peace...


I know! It's just that every time I thing I've got something down, something new pops up. My apologies


----------



## WarmCurb (Mar 15, 2004)

What about that solid break line beneath the CONTACT header? It was previously aligned with the solid post-date header and then I messed it up somehow.


----------



## tomdkat (May 6, 2006)

Try adjusting the top margin of the "Contact" image, using this rule:

```
#column-2 h3 {
	
[b][color=red]margin-top:-31px;[/color][/b]
margin-bottom:10px;
margin-right: -35px;
border-top:30px;
border-bottom:30px;
border-bottom:1px solid #594C47;	
}
```
Peace...


----------



## brandmantra (Dec 1, 2008)

WarmCurb said:


> Thanks! I've figured everything out down to how to abbreviate the day (Mon.) and month (Feb.). Can I do this in CSS?


You have to do through the script. And why "abbreviation". Write the abbreviated forms like Sun.. Mon.. or Jan Feb directly.


----------



## Squashman (Apr 4, 2003)

I personally like it spelled out. Looks cleaner. But if tumbler is a blog service like WordPress, I would think you could set the date format in your blog settings or customized inside the code used for your Theme.


----------



## tomdkat (May 6, 2006)

Great point!

Peace...


----------



## WarmCurb (Mar 15, 2004)

For the last few weeks I had a great script working that embedded a search box so users could search all my posts. However, it's suddenly disappeared. Here's the javascript I used:

http://www.ziked.com/post/5326924/installing-the-perfect-tumblr-search

And the search box _was_ right above the RSS FEED/ARCHIVES links in the right column. Any ideas on what happened to it? I haven't messed with the code since.


----------



## WarmCurb (Mar 15, 2004)

Bump?


----------



## tomdkat (May 6, 2006)

WarmCurb said:


> For the last few weeks I had a great script working that embedded a search box so users could search all my posts. However, it's suddenly disappeared. Here's the javascript I used:
> 
> http://www.ziked.com/post/5326924/installing-the-perfect-tumblr-search
> 
> And the search box _was_ right above the RSS FEED/ARCHIVES links in the right column. Any ideas on what happened to it? I haven't messed with the code since.


It appears to be a problem with the JavaScript file at the URL posted at the site you linked to above. Someone else has reported the same problem on the above linked page.

So, you'll need to contact the maintainer of the JavaScript at the above referenced site for help.

Peace...


----------



## WarmCurb (Mar 15, 2004)

I know this thread was originally meant for CSS help, but I'm trying to implement this Javascript: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

I copy/pasted both boxes of code and can't get it to contract on my site. I downloaded the .js file, but I'm not sure what to do with it.

Basically, I just want something real basic like the contracted "MORE" link used here:
http://pitchfork.com/news/34937-more-new-wilco-album-details-trickle-out/


----------



## WarmCurb (Mar 15, 2004)

So I temprarily moved from Tumblr to Blogger hosting and I'm trying to make my own template, but for some reason, the #sidebar keeps getting bumped down whenever I make an entry. How is this? They're not even connected. Also, the post's date doesn't show up. This is all happening in IE -- I'm too scared to even open it in FireFox.

http://make-outmusic.blogspot.com/


----------

