Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

[Solved] Dark Mist Customizing CSS

KCRiftKCRift New
edited September 2013 in Vanilla 2.0 - 2.8

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!

«13

Comments

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

  • 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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • KCRiftKCRift New
    edited September 2013

    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

  • peregrineperegrine MVP
    edited September 2013

    never mind you posted a link.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • if you put your code

    ~~~

    code - this works

    ~~~~

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Ahh, ok. I was trying

    <code></code>

    Which did not appear to work well :)

  • KCRiftKCRift New
    edited September 2013

    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.

  • peregrineperegrine MVP
    edited September 2013

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • UnderDogUnderDog MVP
    edited September 2013
    <li class="Item CategoryHeading Title Info Depth1 Category-general Read"><BR>
    <div class="**ItemContent Category**">
    <a href="/forum/categories/general">General
    </div>
    </li>
    
  • KCRiftKCRift New
    edited September 2013

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

    More along the lines of:

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

  • 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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited September 2013

    Ahh, ok. I was trying

    <code></code>

    Which did not appear to work well :)

    this works too.

    <code><pre>
    
    blah
    
    
    </pre></code>
    

    also works

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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.

  • KCRiftKCRift New
    edited September 2013

    As written, this had no effect

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

  • peregrineperegrine MVP
    edited September 2013

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

    clear the .ini files in /cache

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • KCRiftKCRift New
    edited September 2013

    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.

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

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited September 2013

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

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

Sign In or Register to comment.