Customize CSS inside the Content Section

DevMask

Hello,

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

Regards
Jo

whu606

@DevMask

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.

DevMask

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.

whu606

@DevMask

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:

http://vanillaforums.org/docs/themequickstart

DevMask

@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

vrijvlinder

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;}

DevMask

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?

hgtonight

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

vrijvlinder

Same line should work but changed a bit

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