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.

Is it possible to change the background of posts in "Recent Discussions"?

I have Recent Discussions on my frontpage, and I would like to use this addon to easily color code the posts based on their category. Is this possible? If not, does anyone know of an Addon that can do this?

Comments

  • edited November 2014

    I want the posts from"Laugh" to have the same background color as the category

  • hgtonighthgtonight ∞ · New Moderator

    You would have to hook into the discussion list and add the category code as a CSS class. Something like the below should get you started:

    public function DiscussionsController_BeforeDiscussionName_Handler($Sender) {
      $Sender->EventArguments['CssClass'] .= ' category-' . Gdn_Format::Url($Sender->EventArguments['Discussion']->Category);
    }
    

    This will add a class to each discussion in the form of category-name-with-spaces where the category name is transformed to lowercase, and non-alphanumeric characters are replaced with hyphens '-'.

    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.

  • @hgtonight said:
    You would have to hook into the discussion list and add the category code as a CSS class. Something like the below should get you started:

    public function DiscussionsController_BeforeDiscussionName_Handler($Sender) {
      $Sender->EventArguments['CssClass'] .= ' category-' . Gdn_Format::Url($Sender->EventArguments['Discussion']->Category);
    }
    

    This will add a class to each discussion in the form of category-name-with-spaces where the category name is transformed to lowercase, and non-alphanumeric characters are replaced with hyphens '-'.

    So, after putting that in the plugin .php, which CSS class do I edit to add in the colours? The plugin css, or the theme css? Also, what would the syntax of that be?

  • peregrineperegrine MVP
    edited November 2014

    @omfgblondie said:
    So, after putting that in the plugin .php, which CSS class do I edit to add in the colours? The plugin css, or the theme css? Also, what would the syntax of that be?

    use firebug and inspect. you will see a new class.

    e.g.
    .category-general {

    }

    you can add it to the custom.css,

    or you could create another hook to add a css for the plugin.

     public function AssetModel_StyleCss_Handler($Sender) {
    $Sender->AddCssFile('thenameofthecssfileinthedesignfolderof plugin.css', 'plugins/yourpluginname');
       }
    

    the downside of doing what you are doing - is you are taking away the functionality of mine and unread messages background colors.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • edited November 2014

    Allright, I'm getting

    class="Item Mine Read ItemDiscussion category-talk"

    which doesn't seem right.

    EDIT: Some quick editing makes it seem like my theme is messing some stuff up.

  • R_JR_J Ex-Fanboy Munich Admin
    edited November 2014

    I thought that's what the custom Css Class in the category setting is for, but it only seems to have effect on the categories views. I'm surprised it doesn't have any effect on the discussions...

    I think it is a good addition to CategoryBg, maybe @vrijvlinder likes to add that?

  • peregrineperegrine MVP
    edited November 2014

    @omfgblondie said:
    Allright, I'm getting
    EDIT: Some quick editing makes it seem like my theme is messing some stuff up.

    overrides. the mine and unread.

    .category-talk {
    background-color:green !important;
    }
    

    doesn't override mine and unread.

    .category-talk {
    background-color:green;
    }
    

    we don't know what theme you are using or what you have done or what you are using.

    using hgtonight's suggestion works perfectly fine with bittersweet theme and an addition of the above to the custom.css of bittersweet theme.

    for mobile you would need to make plugin moblie friendly and change mobile theme custom.css as well.

    the method hgtonight suggested could be added to your themehooks of your theme or a plugin.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • edited November 2014

    @peregrine said:
    we don't know what theme you are using or what you have done or what you are using.

    I'm using the Bootstrap theme. I'll change to bittersweet to test!

  • peregrineperegrine MVP
    edited November 2014

    @omfgblondie said:
    I'm using the Bootstrap theme. I'll change to bittersweet to test!

    either

    .category-general {
    background-color:green !important ;
    }
    
    
    or
    
    .ItemDiscussion.category-general {
    background-color:blue !important ;
    }
    

    will work changing custom.css in bootstrap.

    I still think its a bad idea. since it makes it hard to see what is read and what is mine.

    better to use a category icon in my opinion or just change the backaground of the span of the category name,

    http://vanillaforums.org/discussion/comment/217487/#Comment_217487

    or

    http://vanillaforums.org/discussion/comment/217495/#Comment_217495

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • @peregrine said:
    better to use a category icon in my opinion or just change the backaground of the span of the category name,

    Thanks, I'll just do that instead

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    @R_J said:
    I'm surprised it doesn't have any effect on the discussions...

    Because the css for that page determines it .

    body.vanilla_discussions_index

    I think it is a good addition to CategoryBg, maybe vrijvlinder likes to add that?

    Yes it can be done as long as you take into consideration the READ , Mine and Alt classes for the li.Item in discussions index. I suppose you could use opacity or some similar color to differentiate. But would be hard to keep track what is what with so many styles. you may need to add a graph. example : Bright red= category x + opacity .4 = Read etc.

    I would recommend play with it but inspect the css to see what is going on.

Sign In or Register to comment.