[Solved] Dark Mist Customizing CSS

KCRift

Hello - first off, I love Vanilla and it has been a great tool for our website for a long time.

What I am having trouble with is - once upon a time I went in and edited the HTML to change the color of the Categories to differentiate them from the Topics. Today I updated to 2.018.8 and that customization went away (of course).

SO, I went back and I'm thinking to myself, this is not supposed to be edited in the HTML, there has to be a way to do it in the CSS. I know there is, but every time I go and edit the CSS file, NOTHING CHANGES on the website. I even went so far as to change major things like the header background and link colors. Nothing changes. When I delete the custom.css, it reverts to the basic theme, so I KNOW I'm in the right file.

ANY help would be greatly appreciated.

I would like to change the color of the Categories to #660000

Dark Mist theme
Editing Dark Mist custom.css
http://koboldcompany.com/forum

Thank you!

KCRift

I am normally fairly savvy with CSS and HTML editing, but apparently not in this case. Also, this is not a cloud/hosted account.

peregrine

I know there is, but every time I go and edit the CSS file, NOTHING CHANGES on the website. I even went so far as to change major things like the header background and link colors. Nothing changes. When I delete the custom.css, it reverts to the basic theme, so I KNOW I'm in the right file.

when you change the css, it is a good idea to clear cache.

identify your element with firebug and change the rule in the console and see if it makes the change. then you can add via css.

the key to css is playing by the rules. Understanding precedence and inheritance

http://www.w3.org/TR/CSS21/cascade.html#specificity

KCRift

Right...and this is where I'm trying to edit:

li class="Item CategoryHeading Title Info Depth1 Category-general Read"

div class="ItemContent Category"

a href="/forum/categories/general" General

/div

/li

Edit: Jeebuz...not easy to get HTML code posted in here

peregrine

never mind you posted a link.

peregrine

if you put your code

~~~

code - this works

~~~~

so does highlighting the code and pressing the C in the buttonbar.

KCRift

Ahh, ok. I was trying

<code></code>

Which did not appear to work well

KCRift

Anyway, I believe it's pretty clear in the CSS the element I want to edit is: div class="ItemContent Category"

I can't seem to get it to work in the custom.css file.

I went through the W3C link you sent (I used to live there, back in the day), but I'm not certain I follow the logic of the specificity section. I am going to research that a little more right now.

If you'd like to see what I'm talking about, it's at http://koboldcompany.com/forum - the Category cells such as "General" are what I'm trying to modify.

peregrine

so something like

.ItemContent .Category a{
color:red;
}

just put the a (you want to change anchors correct)next to the classes you want to change.

or maybe

.ItemContent .Category .Title a {

color:red;
}

play around till you get what you want.

UnderDog

<li class="Item CategoryHeading Title Info Depth1 Category-general Read"><BR>
<div class="**ItemContent Category**">
<a href="/forum/categories/general">General
</div>
</li>

KCRift

Hmmm, so you have to call both elements, eh?

More along the lines of:

1. .ItemContent .Category { 2. Background: #660000; 3. }

peregrine

Hmmm, so you have to call both elements, eh?

if the rule is not more specific than an already existing rule, you can put

!important.

peregrine

Ahh, ok. I was trying

<code></code>

Which did not appear to work well

this works too.

<code><pre>

blah


</pre></code>

also works

KCRift

OK, I put that very code into custom.css, flushed the website cache - checked in both Chrome and Firefox with no results.

I put in !IMPORTANT before I posted this thread, but had no luck either. Going to try it again. /fingers crossed.

KCRift

As written, this had no effect

.ItemContent .Category { Background: #660000!IMPORTANT; }

peregrine

I don't see a change in your custom.css on your forum.

clear the .ini files in /cache

KCRift

Out of curiosity, would "li class="Item CategoryHeading Title Info Depth1 Category" need to be modified like:

.item .categoryheading .title .info .depth1 .category { background: #660000; ]

Because this is the parent element in the code above the ItemContent Category element.

peregrine

are you making changes in the themes/DarkMist/design/custom.css

do you have minify or or pagespeadd or some other caching program.

peregrine

try the code I suggested, just to see if a change is implemented.

peregrine

or else you have an error in custom.css and it stops reading past the error.

KCRift

/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; }