How to change color of the important messages?

cheilenereinfo

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

whu606

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.

cheilenereinfo

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

hgtonight

@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!

whu606

@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!

peregrine

@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

cheilenereinfo

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.

peregrine

I will find those lines one day.

cheilenereinfo

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

peregrine

.Announcement .Discussion.ItemContent {
    background-color: purple;
}

quick fix for ambiguous question stated in first discussion .

whu606

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

vrijvlinder

@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/

cheilenereinfo

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

vrijvlinder

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 .

vrijvlinder

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.