?

Log in

No account? Create an account

Previous Entry | Next Entry

Changing text colors in sidebar

  • Jun. 3rd, 2009 at 7:56 AM
I know this is a fairly common question, but I went through the tags and didn't find the answer I was looking for. I'm using a Plus Account and I'm using the Mixit Kaboom Brothers Graffiti layout (Pixmix). I want to change the color of all the links (except the links in the header) from gray to black. That includes the links under the entry for comments (SOLVED). I also want to change the colors of the links in the sidebar (you know, Tags, Latest Month, Profile, etc.) from that maroon color to maybe teal or blue to match the colors in my header banner. My piddly style sheet is under the cut. Any help would be really appreciated!
#header-inner {
    background-image: url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/Robert%20Pattinson/ljheader_nm.jpg)
}
#header-inner {
    background-image: url(http://URL TO YOUR IMAGE);
    height: 400px;
}  
#header-inner {
    background-image: url(http://URL TO YOUR IMAGE);
    width: 800px;
}   
#header-content-inner {
    margin: 50px 15px 117px 375px;
}
#header-inner{
    margin: 0 auto;
}
/* subject font */
.page-header2,
.post-asset .asset-name a {
font-family: (Arial);
font-size : 12pt;
}
/* header title/subtitle font */
#header-name a,
#header-description {
font-family: (Arial);
}
/* header links */
#header .nav .item {
font-family: (Arial);
}
.asset-content {
font-size: 10pt;
}
.profile-name {
display:none;
}
.asset-tags { position: relative; top: -9px;}
.asset-footer {
margin-top : 30px;
margin-bottom : 30px;
border-bottom : 1px solid #F1CFD7;
}
#header-name a,
#header-description{
color: #ffffff;
font-family: Arial;
}
#header-content-inner{
color: #ffffff;
font-family: Arial;
}

Comments

( 9 comments — Leave a comment )
av8rmike
Jun. 3rd, 2009 04:25 pm (UTC)
Well, the problem is that in all the past entries, people either want to change different elements or are using different base themes. So without using Firebug or Web Developer extensions, it's hard to figure out exactly what to change. This will change sidebar and entry link colors:
.archive-widget ul.widget-list .item,
.widget a,
#alpha .asset-meta-list a { color: #000000;}


Use this line for sidebar heading colors:
.widget .widget-header, .widget .widget-header a { color: #xxxxxx;}
dreadfulpenny81
Jun. 3rd, 2009 05:47 pm (UTC)
The first code worked perfect. Looks great!

The second code didn't work. I don't know why.

This is what I added to the CSS:
}
.archive-widget ul.widget-list .item,
.widget a,
#alpha .asset-meta-list a { color: #000000;}
}
.widget .widget-header, .widget .widget-header a { color: #336666;}
}

Here's the link where I found the index of Hex Codes for Colors. Maybe it's not working because it's from a different website and I don't know if there's different color codes for LiveJournal.
http://www.webmonkey.com/reference/Color_Charts
dreadfulpenny81
Jun. 3rd, 2009 05:49 pm (UTC)
I tried to change the sidebar heading colors to black as a test and that doesn't work, either.
av8rmike
Jun. 4th, 2009 02:27 am (UTC)
You have 2 too many close brackets.
dreadfulpenny81
Jun. 4th, 2009 10:31 am (UTC)
So then how exactly should that code look? I tried removing some of the brackets, but that didn't do anything.
av8rmike
Jun. 4th, 2009 12:20 pm (UTC)
It seems to be working fine now... There are other problems with the CSS, like two extraneous #header-inner{} groups (the ones with the "URL TO YOUR IMAGE" text) and the syntax for your font specifiers is wrong.
dreadfulpenny81
Jun. 4th, 2009 02:08 pm (UTC)
The weird thing is that if I remove the extra "URL TO YOUR IMAGE" areas, it throws my header banner completely off-center even though I have the code to center it already in the CSS.
I guess I can live without changing the link colors from maroon to teal, but thanks for helping with changing the link colors from gray to black. That part for me makes a lot of difference.
av8rmike
Jun. 4th, 2009 02:25 pm (UTC)
OK, I'm going to be as explicit as I can. Replace these lines:
#header-inner {
    background-image: url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/Robert%20Pattinson/ljheader_nm.jpg)
}
#header-inner {
    background-image: url(http://URL TO YOUR IMAGE);
    height: 400px;
}  
#header-inner {
    background-image: url(http://URL TO YOUR IMAGE);
    width: 800px;
}
with this, which will still center the image:
#header-inner {
    background-image: url(http://i89.photobucket.com/albums/k213/LivingDeadGirl223/Robert%20Pattinson/ljheader_nm.jpg);
    height: 400px;
    width: 800px;
}
There's nothing wrong with the CSS I gave you before to change the sidebar headers, it was just the extra }s that were messing it up. You only need one } for each {. Makes sense?
dreadfulpenny81
Jun. 5th, 2009 01:15 pm (UTC)
Perfect! Thank you. Yes, I see what you mean now. Sorry about that. I'm still learning all about coding and everything.
( 9 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars