[Solved] Dark Mist Customizing CSS

KCRift

RE: Minify - I have it, but it's not enabled. I do not have pagespeadd or any other caching plugin of which I am aware.

KCRift

Going through now to look for other cache folders in plugins

Whatever is going on elsewhere in the site, the custom.css does not appear to be getting completely loaded???

peregrine

Whatever is going on elsewhere in the site, the custom.css does not appear to be getting completely loaded???

exactly.

@KCRift said:
/headache

Yes, I see in Firebug that it's not there. The code you posted for the edits to the BODY tag are not in the custom.css file.

My body tag in custom.css is:

body { color: #fff; background: #111; }

but your body tag in custom.css is definitely showing in v 2.3 of theme.

        body {
            background-attachment: scroll;
            background-clip: border-box;
            background-color: #111111;
            background-image: none;
            background-origin: padding-box;
            background-position: 0 0;
            background-repeat: repeat;
            background-size: auto auto;
            color: #FFFFFF;
        }

run your custom.css through a validator to see if there are errors.

KCRift

W3C says it's completely valid..............

peregrine

deleted.

KCRift

Done. Added the above and my attempt at changing the background to the top of the custom.css.

It is there in firebug under custom.css

KCRift

Also worth noting, I was able to affect various elements like the background color in the Body tag and the link colors for the entire Dark Mist theme using Custom.css.

My conclusion, therefore, is that something in that specific element is not correct

KCRift

PROGRESS! When I take the .category out of the element, it changes all of the items (categories and discussions) to the #660000.

So the question is, how to specify simply the category correctly in the code?

peregrine

I'm no css expert but it now looks like your custom.css reflects changes. you just need to get the elements you want

you could also try adding the !Important as well.

.Category a.Title {
    color: red;
}

or maybe

.CategoryList a.Title {
    color: red;
}

KCRift

Yes - so I need to figure out how the combination works with all of the dang elements bunched together under the same class call.

i.e.: class="Item CategoryHeading Title Info Depth1 Category-general Read"

^^^------ how do I affect THIS in the CSS?

Also, while I realize it's semantics when we're talking about getting it functioning or not, but I'm trying to get the background-color changed, not the link font color.

hgtonight

Multiple classes on the same element are merely concatenated together. In your example, the CSS selector containing just the classes of that element is .Item.CategoryHeading.Title.Info.Depth1.Category-general.Read. Remember that dot (.) is used to specify a class and an octothorpe (#) is used for IDs.

KCRift

OK, no problem there. That's what I was gathering from the previous conversations. However, what do I do when the element (as you copied above) is dynamic? The "Category-general" is specific to the name of the category! I can't put that verbatim in the CSS because it would only apply to the General category (I believe).

hgtonight

You don't have to use all the classes. In the above example, using .Item as your selector will still apply the declared rules on your element. The issue is that you need to figure out which class is important to you and use that.

KCRift

So declaring additional classes is supposed to just further specify to what you want to apply the css, yes?

peregrine

for background color.

#vanilla_categories_all .CategoryList a.Title {
    background-color: red;
}

peregrine

the above works for me in custom.css (on a different theme) and changes background color for all categories on category page. if that was your goal.

KCRift

UNBELIEVABLE. I've been coding (mostly editing code) for years and years and it is ALWAYS something small. In this case, I noticed that HGTonight had no space in his CSS.

Guess what the issue was?? I had a SPACE in between my elements in the custom.css!

It is working perfectly now. Lesson learned.

Peregrine and HGTonight - I humbly thank you for putting up with me and for your great help!!

peregrine

Guess what the issue was?? I had a SPACE in between my elements in the custom.css!

glad you got it solved.

hgtonight

@KCRift said:
Peregrine and HGTonight - I humbly thank you for putting up with me and for your great help!!

No need for caps in my name. Also, feel free to stick around and answer some questions.

peregrine

@hgtonight said
No need for caps in my name. Also, feel free to stick around and answer some questions.

same for me

does "hg" stand for mercury element as in quickslilver.