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.
Category class CSS not being applied inside the post
I have CSS classes on my categories to give them different colors, and it works fine on the Discussions list, but when I click into an individual post it reverts back to the default. I inspected the code and it isn't applying the custom class at that point. Help?
Tagged:
0
Comments
This happens maybe because the classes inside and outisde the discussion are different, probably inside of one new "rule" is added.
You have to style based on the class of the body element. It should look like that:
<body id="vanilla_discussion_index" class="(...) Section-YourIndividualCssClassName">People will solve these sort of problems themselves when they learn to use an inspect tool and learn how css rules are applied.
grep is your friend.
Give me a break. I know how to inspect and I write CSS every day. I was asking to make sure there wasn't a global fix or a framework tweak that could be made without having to write little one-off CSS touchups everywhere.
Avoid custom classes. Never view override just to add classes (if that is what you are doing).
This way of adding styling such as uncompiled boostrap, with classes added in views is bad idea.
Vanilla expect certain classes (and other markup) to be there for scripting.
Merge your styles into vanilla classes. Many build tools can do this simply. LESS, Sass/compass included.
grep is your friend.
as R_J says you have a class you can use in body. You can use this as a parent of the element you want to style. The body classes can be quite useful.
grep is your friend.
In vanilla/views/discussion/discussion.php:
// Category if (C('Vanilla.Categories.Use')) { echo ' <span class="MItem Category">'; echo ' '.T('in').' '; echo Anchor(htmlspecialchars($this->Data('Discussion.Category')), CategoryUrl($this->Data('Discussion.CategoryUrlCode'))); echo '</span> '; }Any category custom classes I created in the Dashboard need to be pulled in here, right?
don't modify the core. What are you trying to style?
grep is your friend.
On my main page I have these colors applied (via Dashboard and custom Category CSS classes): http://d.pr/i/13ntl
On the discussion page it reverts to defaults and fails to apply the custom colors: http://d.pr/i/1g6xK
Trying to figure out why those custom category CSS classes are coming through at the Recent Discussions level, but not through to the individual discussion itself.
Because very page is a body a different body and your css rules are not applying to that body.. each body (not #Body) is a different html page and thus you must write the rule to apply to that body too.
You would best help yourself by posting the css code you are using to do this. Coz the way you are doing it will waste your time.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
.MItem.Category.category-general a {background: #33B794!important;} .MItem.Category.category-hoa a {background: #666!important;} .MItem.Category.category-for-sale a {background: #BA9666!important;} .MItem.Category.category-events a {background: #F0377D!important;} .MItem.Category.category-requests a {background: #4C74DD!important;} .MItem.Category.category-reviews a {background: #BB72CF!important;}So in order to make that work on other pages you need to also add the rules to those.
example:
body.Vanilla .MItem.Category.category-reviews a, .MItem.Category.category-reviews a , body.Discussion .MItem.Category.category-reviews a, body.whateverthebodyclass .MItem.Category.category-reviews a{ background: #BB72CF!important; }❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Ah... I understand your issue. Try:
.Section-Category-vanilla-2-1 .MItem.Category a, .MItem.Category.Category-vanilla-2-1 { background: #FF00FF; }In this case,
Category-vanilla-2-1is the CSS class chosen in the category edit page.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.
The problem is, Vanilla isn't even trying to add those custom classes inside the Discussion: http://d.pr/i/14GhL
In contrast, the Discussions list is applying those classes: http://d.pr/i/1lcKD
If you are going to post screenshots , do it of the whole source from where the body tag starts...posting a snip is insufficient.
Post a link to the forum ....
Please understand what I explained, or try to... Discussions and Discussion and Categories and Category are different pages with their own tags and classes added or removed. You need to write new css rules for each body/page/controller.
If you like, check out my plugin CategoryBg to get some idea and then you can make a plugin to do what you want and the plugin css will supersede the custom.css and force what you want done.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
I gotcha. Thanks for the information.
You don't need the same classes, just the same rules. Please see my previous comment for an example selector.
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.
You need the specific body class name for the page you are targeting and the same rules you want to apply to that body...
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Screen shots of text are my pet hate.
~~~ [code goes here] ~~~grep is your friend.
Indeed!! What a waste of time that is for anyone... not to mention getting tracker cookies from wherever they posted the screenshot.. for only one line of html with the rest blanked out... As if it contained pornographic code or something ...
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌