​customizing messageSidebar​

  • Hello,
    Sadly i don't know that much off CSS so if someone can point me in the right direction, that would be great.
    Hopefully you can help.


    I'm trying to change to background of the messageSidebar with the user rank, i thought this should work but it didn't.
    The rank icon does change colour so i'm close, it is just the sidebar that is not working.

    Code
    .green {
    background-color: rgba(0, 204, 0, 1);
    .message.messageSidebar {
    background-color: rgba(0, 204, 0, 1);
    }
    }

    Also no luck with just .messageSiderbar


    Thank you very much in advance, they are beginner questions but i got stuck with the coding :(

    6 Mal editiert, zuletzt von Elf (27. November 2014 um 04:33)

  • The } in line 6 should be located in line 3 before the .message.messageSidebar which should be called .message .messageSidebar (otherwise it would select an element, which has the class message and the class messageSidebar instead of an element with class messageSidebar inside an element with class message). Then you will see the difference.

    However, let me recommend you to use just .message instead of .message .messageSidebar.

  • That does indeed colour it green, the only down side is everything is green now, I only want it green when i select the rank.
    I noticed that the tag rank Green, actually defaulted to the preset of the "green" rank, so in changed it to bggreen.

    I'm not that far off right?

    So when bggreen is use as rank CSS it does this:colour the icon green with red letters, that workscolour the background of the .message green, this doesn't work.

    I'm probably missing something fundamental here, where my lack of knowledge is showing.

    8 Mal editiert, zuletzt von Elf (27. November 2014 um 21:05) aus folgendem Grund: the sentence after the code is not behaving

  • You can't get backwards in the cascade. This is the functionality of CSS. When you have an element .example inside an element .container you can't change the element .container if something specific happened with the element .example inside it.

    So you have either edit the template and request if the rank icon is the type you want to e. g. add a class to the .message element or you have to change it with JavaScript.

  • Have been playing around more now also in the templates, did some nice things actually but there is one thing i couldn't get too work.
    I'm trying to hide the badge under the avatar while on the forums. But i can not find the correct file to edit or I might have overlooked it.

    Nevermind got it

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!