How to change the background of a basic discussion item?
kramer65
New
Hello,
After I finally solved an issue on changing the background (thanks for the awesome help all you guys!), I am finally busy changing the theme to my liking. I changed the background of the whole site and now I want the list of discussions to stand out by making the background for the topics white. I had a look at the basic style.css, and in there I found a part on Discussions, which has an explanation saying the following:
/* Note: The Vanilla Discussion List has the following classes applied to
individual list elements and can be styled:
+ Bookmarked: the user has bookmarked that topic
+ Announcement: the discussion has been announced
+ Mine: the user created the discussion
+ New: there are new comments since the last viewed the discussion
*/
It doesn't say however, how I can change the background of a usual discussion (a discussion started by someone else and not being a bookmarked, announced, or new topic).
Does anybody know how I can do this?
Comments
Hi!
I suggest you use Firefox or Chrome and install Web Developer.
@kramer65
If you have Firefox, get the Firebug plugin.
This will help you to quickly identify the css rules for any element on a page.
It also allows you to make (temporary) changes to the rules to see how the page would look.)
Ah, good tips! Thanks to you both!
Using firebug I found out that the css class I need is called "Item". So I went into my style.css, and added a line like so:
.DataList .Item { background: #ffffff; margin: 0; padding: 4px 0; border: 0; position: relative; border-bottom: 1px solid #bec8cc; }This works fine (the items are indeed white now).
I also see a class called "Item Alt " though, which I suppose is for every uneven (odd) item in the list. I searched around the style.css file, but couldn't find anything called "Item Alt".
Does anybody know where I can find this? All tips are welcome!
DO NOT EDIT style.css
There was an error rendering this rich post.
Before you go any further, can you tell which theme, which directory, which files you are editing please? The fact that you are editing style.css raized some bells (and whistles).
edit: ^^ what he said ^^ (back to hibernation)
Also take a look at this Url please :-) http://vanillaforums.org/discussion/19915/deploying-a-new-forum-and-adding-a-theme-for-everyone
There was an error rendering this rich post.
@kramer65
Is the file style.css in your custom theme folder?
If so, it is better to rename it custom.css.
When you find something in Firebug, you can just add the rule to your custom.css and it will usually over-rule the default rule.
In this instance you would just write a rule for .Datalist .Item Alt
Remember, your custom.css only has to contain the rules that you want to change, not all the rules applying to the forum.
Great minds think alike
There was an error rendering this rich post.
He Guys. Sorry for the confusion. I indeed edit the custom.css file which I have in a custom theme folder. So no harm is done to the original style.css file. So sorry again for that.
So I just found out that all the list items now have a white background. The only problem is that all of them are always white. So also when I made the items myself, they are new, or when I bookmarked them, they are always white.
Is there a way to have the default background color white, but .mine and the "Item Alt" class have their own color?
@kramer65
Set rules for
.MessageList .Mine.MessageList .Alt@whu606
Thanks for that tip. I made two new rules like this:
.MessageList .Mine { background: blue; } .MessageList .Alt { background: green; }However, I now see that these rules refer to the comments on a topic, not to the list of topics on the frontpage. Css is not my field of expertise (far from it actually), but I tried the following:
.DataList li.Item .Mine { background: gray; }This however, doesn't work. Would you have any idea how I would be able to implement these same rules for the list of topics on the frontpage as well? All tips are welcome!
change colors to what you want.
ul.Discussions li.Alt {
background-color: green;!important;
}
ul.Discussions li.Mine{
background-color: red;!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.
@kramer65
You just need
.DataList .Alt {background-color:grey;}Get used to using Firebug, and checking what css rules apply, or download my annotated_css theme, and read through the custom.css file.
Like the guys above me said, there's a difference between messagelist and datalist.
I see CSS code for:
.DataList .Item { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FFFFFF; border-color: -moz-use-text-color -moz-use-text-color #BEC8CC; border-style: none none solid; border-width: 0 0 1px; margin: 0; padding: 4px 0; position: relative; }but not for
.DataList .Item .Alt { }Let's see what happens if you add that, same for .Mine and some other options.
There is a file with test texts (dummy texts) to see all the stylings at work.
Here's the Url I found the dummy file on http://vanillaforums.org/docs/themeguide/arsenal (theming quickstart). Here's a direct link to the file http://vanillaforums.com/blog/dummyvanilla.zip.
Vanilla has the ability to use BBCode (I saw you tried to use [u][/u]) but you can better keep the setting at MarkDown since that will be the future anyways. Just use HTML for the simple tasks like underlining items.
There was an error rendering this rich post.
@whu606
Thanks for the extensive info, I finally solved everything using
Also, I am slowly getting more and more used to Firebug, and so far I love it (just like VanillaForums btw)!
Thanks a lot for all the help!
@kramer65 - you're welcome.