Subcategory - CSS code to change logo/navbar colors

[ChancyRat]

I've got the code for changing categories and galleries, but I've had to guess a few times for subcategories, and nothing is "taking". My current try is this:

http://www.joinrats.com/gallery/7809087_4H8vg

/*
Change Banner Color in subcategory 'Baby Rats'
*/
.subcategory_EARNING_THE_TRUST_OF_PET_RAT #my-banner,
.subcategory_EARNING_THE_TRUST_OF_PET_RATS #my-banner,
.subcategory_EARNING_THE_TRUST_OF_PET_RATS #my-banner a
{color: #DF0072 !important; }


/*
Change Nav Color in subcategory 'Baby Rats'
*/
.subcategory_EARNING_THE_TRUST_OF_PET_RATS #navcontainer,
.subcategory_EARNING_THE_TRUST_OF_PET_RATS #navcontainer ul li a
{color: #DF0072 !important; }

.subcategory_EARNING_THE_TRUST_OF_PET_RATS #navcontainer li a:hover
{color: #1FAFFF !important;}

I realize that's a stupid choice but I did try others with the number.

[ChancyRat]

I've got the code for changing categories and galleries, but I've had to guess a few times for subcategories, and nothing is "taking". My current try is this:

http://www.joinrats.com/gallery/7809087_4H8vg



I realize that's a stupid choice but I did try others with the number.

bump.

[jfriend]

I've got the code for changing categories and galleries, but I've had to guess a few times for subcategories, and nothing is "taking". My current try is this:

http://www.joinrats.com/gallery/7809087_4H8vg



I realize that's a stupid choice but I did try others with the number. The gallery you link to is in category_EARNING_THE_TRUST_OF_PET and subcategory_Baby_Rats. As I think I've mentioned to you before, guessing is the hard way to do this. It tooks me seconds to see this in Firebug.

[ChancyRat]

The gallery you link to is in category_EARNING_THE_TRUST_OF_PET and subcategory_Baby_Rats. As I think I've mentioned to you before, guessing is the hard way to do this. It tooks me seconds to see this in Firebug.

FROM THE OTHER THREAD:

You are doing this customizing so much, I'm not sure why you don't install the free add-ons for Firefox (Web Developer and Firebug). After you figure out how to use them, it takes minutes to figure out something like this. All I do is right-click on the item and pick Inspect Element and Firebug shows what the item is called and what CSS rules are currently controlling it. Then, in Web Developer, I can experiment with a new CSS rule to accomplish whatever I'm trying to accomplish. You really ought to just learn how to do this yourself. Even if you're still coming up to speed with CSS, these tools will get you in the right neighborhood every time.

Good lord my long answer got lost because I had been logged out.
Short version, thanks for making me work. :thumb
I have both firebug and web developer and have wandered through them but always deadended because I can't figure out how to Inspect Element.
For this example I tried every Baby Rats title on the Baby Rats page and Inspect Element gives me HTML (right?) that doesn't make sense. So I guessed again and tried going to the Earning Trust category and right clicked on the Baby Rats link. That gave me something that seemed to make sense, but every version of this has failed:


/*
Change Banner Color in subcategory 'Baby Rats'
*/
.subcategory_EARNING_THE_TRUST_OF_PET_RAT_842681_B aby_Rats #my-banner,
.subcategory_EARNING_THE_TRUST_OF_PET_RATS_842681_ Baby_Rats #my-banner,
.subcategory_EARNING_THE_TRUST_OF_PET_RATS_842681_ Baby_Rats #my-banner a
{color: #DF0072 !important; }

/*
Change Nav Color in subcategory 'Baby Rats'
*/
.subcategory_EARNING_THE_TRUST_OF_PET_RATS_Baby_84 2681_Rats #navcontainer,
.subcategory_EARNING_THE_TRUST_OF_PET_RATS_Baby_84 2681_Rats #navcontainer ul li a
{color: #DF0072 !important; }
.subcategory_EARNING_THE_TRUST_OF_PET_RATS_842681_ Baby_Rats #navcontainer li a:hover
{color: #1FAFFF !important;}


I can't figure out the right combination of category/subcategory/ and gallery number (why is there a number when it's not a gallery anyway?). I can't figure out - if I did Inspect Element correctly - how one derives the correct CSS code.

[jfriend]

FROM THE OTHER THREAD:



Good lord my long answer got lost because I had been logged out.
Short version, thanks for making me work. :thumb
I have both firebug and web developer and have wandered through them but always deadended because I can't figure out how to Inspect Element.
For this example I tried every Baby Rats title on the Baby Rats page and Inspect Element gives me HTML (right?) that doesn't make sense. So I guessed again and tried going to the Earning Trust category and right clicked on the Baby Rats link. That gave me something that seemed to make sense, but every version of this has failed:



I can't figure out the right combination of category/subcategory/ and gallery number (why is there a number when it's not a gallery anyway?). I can't figure out - if I did Inspect Element correctly - how one derives the correct CSS code. So, what are you trying to do? Change the navbar color in this gallery: http://www.joinrats.com/gallery/7809087_4H8vg? Change the navbar color in a whole sub category? Change the navbar color in a whole category?

[ChancyRat]

So, what are you trying to do? Change the navbar color in this gallery: http://www.joinrats.com/gallery/7809087_4H8vg? Change the navbar color in a whole sub category? Change the navbar color in a whole category?

I really want to understand Inspect Element. :D (Is there an emoticon for whining? :D )
But also, I want the colors in the subcategory page Baby Rats, to match what's in the gallery, Cuddling Baby Rats.

I don't want to change the whole category.

You gave me the format for changing color in a Category page, and a gallery page, I now need the equivalent for a subcategory page.

[jfriend]

I really want to understand Inspect Element. :D (Is there an emoticon for whining? :D )
But also, I want the colors in the subcategory page Baby Rats, to match what's in the gallery, Cuddling Baby Rats.

I don't want to change the whole category.

You gave me the format for changing color in a Category page, and a gallery page, I now need the equivalent for a subcategory page.

You go to the sub-category Baby Rats. You open Firebug, go to the HTML tab and look at the body tag. On the body tag, you see a bunch of class names:

<body class="category category_EARNING_THE_TRUST_OF_PET_RATS tempClass subcategory subcategory_Baby_Rats notLoggedIn bodyColor_White">

These are all CSS classes that you can trigger rules with. Which classes to use depend upon what you're trying to accomplish.

The class subcategory is only present on the subcategory page itself. The class subcategory_Baby_Rats is present both in the subcategory page and in all galleries in this subcategory.

So, if you want to trigger a CSS rule on this subcategory page and on all galleries within the subcategory, you would do it like this:

.subcategory_Baby_Rats #navcontainer ui li a {color: red;}

If, you want to change the color only for the subcategory page itself, but not any of the galleries within that, then you need to include the subcategory class in the rule too (because it's not present in the actual galleries) and since these classes are in the same object, we don't put a space between them like this:

.subcategory.subcategory_Baby_Rats #navcontainer ui li a {color: red;}

[ChancyRat]

You go to the sub-category Baby Rats. You open Firebug, go to the HTML tab and look at the body tag. On the body tag, you see a bunch of class names:

<body class="category category_EARNING_THE_TRUST_OF_PET_RATS tempClass subcategory subcategory_Baby_Rats notLoggedIn bodyColor_White">

These are all CSS classes that you can trigger rules with. Which classes to use depend upon what you're trying to accomplish.

The class subcategory is only present on the subcategory page itself. The class subcategory_Baby_Rats is present both in the subcategory page and in all galleries in this subcategory.

So, if you want to trigger a CSS rule on this subcategory page and on all galleries within the subcategory, you would do it like this:

.subcategory_Baby_Rats #navcontainer ui li a {color: red;}

If, you want to change the color only for the subcategory page itself, but not any of the galleries within that, then you need to include the subcategory class in the rule too (because it's not present in the actual galleries) and since these classes are in the same object, we don't put a space between them like this:

.subcategory.subcategory_Baby_Rats #navcontainer ui li a {color: red;}

Thank you. :bow :bow :bow :bow :bow
Am I correct that it is not possible to derive this instruction from just looking at Inspect Element? So I am doomed? :cry :cry :cry :cry :cry

[jfriend]

Thank you. :bow :bow :bow :bow :bow
Am I correct that it is not possible to derive this instruction from just looking at Inspect Element? So I am doomed? :cry :cry :cry :cry :cry Inspect element shows you what classes, IDs and objects are in the page and what their hierarchical relationship is. It also shows you what existing CSS rules are controlling any given object's style.

To use that information to derive CSS instructions, you have to know what pages you're trying to change, what pages you're not trying to change, what the class differences are between those pages (by looking at them in Firebug) and you obviously have to know enough CSS to be able to craft a rule that will target the right object with the desired style change.