My main navagation color gone bonkers!

[desi...@gmail.com]

I have styled the links to be a light grey color. After saving the changes and updating the blog the links are purple. On page 2-14 they are light grey. Can somebody explain to me why this is happening and give me some advice on how to fix it? I would greatly appreciate it. Thanks.

Here is the link: http://awayfaringchef.tumblr.com/

Here is my CSS. I don't know where that color even originated from.

#nav {
                    height:52px;
                    background:url(http://awayfaringchef.com/images/nav_bg.png) repeat-y center;
                    background-color:#2a124b;
                    width:100%;
                    margin:0;
                    font-faimily:'Junge',serif;
                    text-align:center;
                    font-size:25px;
                    color:#cccccc;
                    }
                    #nav a:link {
                        padding-right:47px;
                        top:15px;
                        color:#cccccc;
                        font-weight: normal;
                        position:relative;
                       
                        font-weight:normal;
                    }
                    #nav a:hover {
                        color:#fbefaf;
                    }

[Sean Zhu]

The easiest way to see what's causing your page to render a certain way is to use the element inspector. This is a feature built into Chrome and Safari. On Firefox, you can install the Firebug extension. On Safari, you might need to check Preferences » Advanced » Show Develop menu.

One of the ways to use the element inspector is to right-click the element you're looking at and choose Inspect Element. A window or panel will pop up that will give you the rendered HTML structure on the left and the rendered CSS rules for the selected element on the right.

What the heck does that mean? Well, first do this:

Then you'll see this:

Oh look. I think the purple color's coming from .caption a in your CSS! You can now look for this in your theme code.

(Btw, you can see that .caption a appears on line 338 of your blog's source code, but this doesn't correspond to the line number in your theme code, since your theme code is only a template for the actual HTML that Tumblr generates and sends to your browser.)

Hope this helps!

[Desirae Renta]

I appreciate your reply. I think because the links have a # (href="#")
the page was rendering them as the default HTML visited color. I
changed it to light grey in the CSS and that may have fixed it. I'm
not really sure what you mean however by the theme code is a template
file for the actual HTML that Tumblr generates and sends to my
browser. Can you please elaborate. I kind of understand. Is this
limiting me to making necessary changes to my theme?

Thanks for replying

On Aug 30, 11:55 am, Sean Zhu <interestinglyth...@gmail.com> wrote:
> The easiest way to see what's causing your page to render a certain way is

> to use the *element inspector*. This is a feature built into Chrome and

> Safari. On Firefox, you can install the Firebug extension. On Safari, you
> might need to check Preferences » Advanced » Show Develop menu.
>

> One of the ways to use the element inspector is to *right-click the element*you're looking at and
> *choose Inspect Element*. A window or panel will pop up that will give you

> the rendered HTML structure on the left and the rendered CSS rules for the
> selected element on the right.
>
> What the heck does that mean? Well, first do this:
>

> <http://media.tumblr.com/tumblr_m9l07nYnqM1qji2mbo2_1280.png>

> Then you'll see this:
>

> <http://media.tumblr.com/tumblr_m9l07nYnqM1qji2mbo1_r1_1280.png>

[Sean Zhu]

Ignore what I said about theme code being only a template. It was an advanced topic that you don't need to know and probably was pretty confusing. You can forget everything I put in parentheses in my first message.

There are absolutely no limitations to customization in your case. Your theme defines the links to be purple (btw, purple is not the default). Using element inspector, I showed you exactly where that code is that makes links purple. Let me try to word it another way:

Look at my second screenshot. In your theme's CSS code, you have .caption a, inside of which you'll find color: #9E4BFF. #9E4BFF is the purple color you're seeing. Just remove color: #9E4BFF and you'll be good.

In case I was really confusing again, here is how to fix the problem:

1. Search inside your theme code for .caption a .
2. Look for color: #9E4BFF .
3. Delete color: #9E4BFF .

Hope this helps!