How to change the background of a basic discussion item?

kramer65

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?

Sheila

Hi!

I suggest you use Firefox or Chrome and install Web Developer.

whu606

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

kramer65

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!

422

DO NOT EDIT style.css

UnderDog

kramer65 said:
So I went into my style.css, and added a line like so:

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

422 said:
DO NOT EDIT style.css

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

whu606

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

422

Great minds think alike

kramer65

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?

whu606

@kramer65

Set rules for

.MessageList .Mine

.MessageList .Alt

kramer65

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

peregrine

change colors to what you want.

ul.Discussions li.Alt {
background-color: green;!important;
}

ul.Discussions li.Mine{
background-color: red;!important;
}

whu606

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

UnderDog

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.

kramer65

@whu606

Thanks for the extensive info, I finally solved everything using

.DataList .Alt
.Datalist .Mine

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!

whu606

@kramer65 - you're welcome.