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.

How to change color of the important messages?

I was wondering if somebody can tell me how to change color to those messages that are considered as important. I attached a printscreen for better understanding. I would like to change the color of only those messages that remain sticky in the top of the forum ( in the red square). Is it possible to do that? If yes, can somebody explain me how to do it and what do I have to change? Thanks

UnderDog

Comments

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    Which version of Vanilla are you using?

    Changes to the colour scheme are normally made in your theme's custom.css file, in the views folder.

    peregrine
  • Vanilla version 2.0.18.8

    But can you tell me what exactly to I have to change? I don't have knowledge about programming. Thank you

    UnderDog
  • hgtonighthgtonight ∞ · New Moderator

    @cheilenereinfo said:
    But can you tell me what exactly to I have to change? I don't have knowledge about programming. Thank you

    You are going to learn some stuff today my friend!

    You need to create a custom theme to use a custom CSS file.

    • Copy the /themes/default folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
    • Open the /themes/your_theme_name/about.php file and edit the information to reflect your theme's information.
    • Create a custom.css file in the design folder of your custom theme.
    • Go to your Dashboard > Themes, and apply your new theme.
    • Edit the custom.css file to your heart's content. The custom.css file is added after the base theme's css.

    Now that you have a custom.css file to edit, you need to figure out what CSS selectors to use for the elements you want to style. The absolute easiest way is to use a web inspector. Assuming you are running Firefox, you can right click and Inspect Element. This will outline the selected element, show you its position in the inspector, and also show the current CSS rules on the selected element.

    Good luck!

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    R_JUnderDogperegrine
  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @hgtonight

    That looks like a custom theme.

    If it is, @cheilenereinfo, then look in that theme's views folder for a file called custom.css

    Follow @hgtonight's advice re: using a web inspector to find out the name of the element you want to change.

    When you get that far, post back here, and we'll help you finish off!

    UnderDogperegrine
  • @cheilenereinfo

    I don't have knowledge about programming. Thank you

    see the firebug tutorials or chrome tutorials and css tutorials.

    In a few hours you could learn all you need to know to effect simple css changes.

    http://vanillaforums.org/discussion/20231/how-to-become-somewhat-adept-at-modifying-vanilla-to-meet-your-needs-for-free

    http://vanillawiki.homebrewforums.net

    you could also learn a terrific amount with @whu606's add-on

    http://vanillaforums.org/addon/annotated_css-theme

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

    UnderDog
  • I will find those lines one day....but now all these line are giving me a headache. I used the Inspector, It shows me the lines and I guess that border-radius is making the difference, but I don't know where to find it.

  • I will find those lines one day.

    :)

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

  • Yeah, that supposed to be a joke. It's hard to do programing without knowing programming.

  • peregrineperegrine MVP
    edited September 2013
    .Announcement .Discussion.ItemContent {
        background-color: purple;
    }
    

    quick fix for ambiguous question stated in first discussion :).

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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited September 2013

    @cheilenereinfo

    You aren't asking about programming.

    You are asking about how to change css.

    You are almost there!

    Your second image shows that you need to add some css rules to:

    .Datalist li.Announcement {
    
    your css rules here;
    
    }
    

    You can find any number of css tutorials on the Internet.

    Try 'css change background colour' - find the rule(s) you need to add, and put the above snippet of css (with your css rules replacing 'your css rules here') and add it in to your theme's custom css file.

    People on here aren't being deliberately awkward; experience shows that users who manage to do something for themselves learn far more than those who are given a quick fix.

    Have a go. If you get stuck, post back what you tried, and we'll help you get it sorted.

    hgtonightUnderDogperegrine
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    @cheilenereinfo The css rules that apply to those messages are:

    .DismissMessage.Warning {
    background: #0F0;
    border: 2px solid #222;
    color: #000;
    font-weight: bold;
    font-size: 16pt;
    text-align: center;
    }
    
    .DismissMessage {
    text-align: left;
    position: relative;
    color:#000;
    border: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    margin: 0 0 10px;
    padding: 10px;
    }
    .Warning {
    background:#ffc;
    border: 1px solid #ff9;
    color:#000;
    padding: 6px 8px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }
    

    CSS is not programming it is decorating. here is a good resource

    http://www.w3schools.com/css/

    UnderDog
  • Should I add these codes to custom.css file in the custom theme folder? Where exactly in the file should I place the code?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited September 2013

    If it is not in the custom.css already then just add it anywhere, I normally do it at the bottom of everything to find it easier when editing and then I re order it alphabetically .

    UnderDog
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    If the css code of your theme is a jumbled mess, put it through a css beautifier

    http://cssbeautify.com

    you copy the whole sheet into the first box , select beautify and then copy the results into your custom.css.

    UnderDog
Sign In or Register to comment.