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 the background of a basic discussion item?

kramer65kramer65 New
edited July 2012 in Vanilla 2.0 - 2.8

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

  • SheilaSheila ✭✭

    Hi!

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

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

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

  • kramer65kramer65 New
    edited July 2012

    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!

  • 422422 Developer MVP

    DO NOT EDIT style.css

    There was an error rendering this rich post.

  • UnderDogUnderDog MVP
    edited July 2012

    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

    There was an error rendering this rich post.

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

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

  • 422422 Developer MVP

    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?

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

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

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

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

  • UnderDogUnderDog MVP
    edited July 2012

    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

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

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

    @kramer65 - you're welcome.

Sign In or Register to comment.