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
DevMask
New
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
0
Comments
@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.
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.
@DevMask
Are you using 2.0.18 or 2.1 ?
If it is 2.0.18 then I think this is what you want:
Can I just check that you have followed these steps to create a custom theme:
http://vanillaforums.org/docs/themequickstart
@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
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?
@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.
Same line should work but changed a bit
div.Meta span{padding-right:2px;}
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌