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.

Customize CSS inside the Content Section


I'm very much new to Vanilla and trying to create a custom theme for a site. But I'm having the issues with the css part inside the content section. You can see it in the image. May I know where can define the CSS of this part?

Sorry for my bad English...



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


    A tool like Firebug for Firefox is really useful when you are trying to learn how Vanilla (or any site) uses CSS rules.

    You just right click the element you are interested in, choose Inspect, and you can see what rules are being used.

    I found it invaluable in making my theme.

  • Hi @whu606

    Thanks for your reply.

    I have tried with Firebug and there is nor


    div> associated with these elements. How can I add it to the sections?

    Any help will be highly appreciated.

    van.png 15.5K
  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited March 2013


    Are you using 2.0.18 or 2.1 ?

    If it is 2.0.18 then I think this is what you want:

    .DataList .Meta {
    Your rules

    Can I just check that you have followed these steps to create a custom theme:

  • @whu606

    I have added that CSS already but it's not calling in the theme file.

    Can you please have a look here - forums. igeeksblog. com

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    it is calling the custom.css

    It is telling you the class in firebug plain to see lol !

    div.Meta span.LastCommentBy

    class is symbolized with a dot . and id with a # unless otherwise specified .Meta is div.Meta = div class="Meta" it could also be ul.Meta =ul class="Meta" when specified to be another class other than a div.

    If something in the style has class and or an id , it makes it very easy to pick them out and apply custom style to the elements. So when you have a rule,

    you need to look at the stack order of the elements

    In the div.Meta span.LastCommentBy the span is inside of the div and the div is inside something else. It is necessary to include where that span is located .

    You could even specify further to edit the smallest things by including the entire house

    li.Item.Alt.Mine.ItemComment .Comment span#latest a { color:red;}

    but there is more !

    if you add the body you want it to show in then your edits will only show in that page and not the others.

    body.Vanilla.Discussion.Index li.Item.Alt.Mine.ItemComment .Comment span#latest a { color:red;}

  • Can anybody help me to add which css elements to be added to achieve some spaces between 'most recent by' and the 'date' in the home page?

  • hgtonighthgtonight ∞ · New Moderator

    @DevMask right click and inspect element to figure out what you want. It sounds like you would want to increase the margin property of that element.

    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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Same line should work but changed a bit

    div.Meta span{padding-right:2px;}

Sign In or Register to comment.