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

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?

«1

Comments

  • Options

    This happens maybe because the classes inside and outisde the discussion are different, probably inside of one new "rule" is added.

  • Options
    R_JR_J Ex-Fanboy Munich Admin

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

  • Options

    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.

  • Options

    @x00 said:
    People will solve these sort of problems themselves when they learn to use an inspect tool and learn how css rules are applied.

    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.

  • Options

    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.

  • Options
    x00x00 MVP
    edited May 2015

    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.

  • Options

    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?

  • Options

    don't modify the core. What are you trying to style?

    grep is your friend.

  • Options

    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.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • Options

    @vrijvlinder said:
    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;}
    
  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    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;
    } 
    
  • Options
    hgtonighthgtonight ∞ · New MVP

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

  • Options

    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

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • Options

    I gotcha. Thanks for the information.

  • Options
    hgtonighthgtonight ∞ · New MVP

    @charliepratt said:
    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

    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.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    You don't need the same classes, just the same rules.

    You need the specific body class name for the page you are targeting and the same rules you want to apply to that body...

  • Options
    x00x00 MVP
    edited May 2015

    @vrijvlinder said:
    If you are going to post screenshots , do it of the whole source from where the body tag starts...posting a snip is insufficient.

    Screen shots of text are my pet hate. :lol:

    ~~~ [code goes here] ~~~

    grep is your friend.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

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

Sign In or Register to comment.