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

omfgblondie

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?

omfgblondie

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

hgtonight

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

omfgblondie

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

peregrine

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

omfgblondie

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_J

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?

peregrine

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

omfgblondie

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

peregrine

@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

omfgblondie

@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

vrijvlinder

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