Color the event description div, instead of just the title (photo- and list view

Athen,

When I was testing the coloring in the list and photo views I did try having the entire div colored. What I decided was that the coloring became overpowering. The idea is to give the user an idea of what category the event belongs to, not to hit them over the head with it.

Additionally, with so much coloring it detracts from the overall theme.

It is possible, but it’s not a direction I wish to go with the plugin. Please feel free to fork the code on GitHub and make your own modifications.

Right..

Anyway; can you point me in a direction to do accomplish this? Because I want to hit my visitors in their heads with a category color! ??

I found category.css.php, I’ve added my event-div (.vevent.hentry) to

.tribe-events-category-<?php echo $slug ?> h2.tribe-events-list-event-title a,
	.tribe-events-calendar .tribe-events-category-<?php echo $slug ?>,
	#tribe-events-content .tribe-events-category-<?php echo $slug ?> > .tribe-events-tooltip h4.summary,
	.tribe-events-category-<?php echo $slug ?> > .tribe-events-tooltip h4.summary, .vevent.hentry {
		background-color: <?php echo $options[ $slug.'-background' ] ?>;
		border-left: 0px solid <?php echo $options[ $slug.'-border' ] ?>;
		border-right: 0px solid transparent;
		color: <?php echo $options[ $slug.'-text' ] ?>;
		padding-left: 0px;
	}

That gives me the category color in .vevent.hentry, but all other upcomning events are getting the same background from the first-comming event color. I feel pretty close, can you please help me if you have the time?

Thanks in advance ??

Athen, let me see what I can do. Give me a week or so and I’ll post back here.

Athen,

Try this, https://github.com/afragen/events-calendar-category-colors/tree/custom/color-explosion

Thank you Andy! That is perfect.

I needed to replace a bit of css to the photo-view, otherwise the event would turn white upon hover..

In tribe-events-pro-full.css there is:

.tribe-events-photo-event:hover {
	background: #fff;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 10px;
			box-shadow: rgba(0,0,0, 0.1) 0px 0px 10px;
}

We need to rip out the background color, do this:

.tribe-events-photo-event:hover {
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 10px;
			box-shadow: rgba(0,0,0, 0.1) 0px 0px 10px;
}

Once again thank you for this neat plugin!

Dear Andy,

How difficult do you think it would be, to replace the chosen colours for backgrounds, with images?

Very difficult. But if you want to try you’d have to change the color picker to an image picker and change the CSS that the plugin generates for colors to produce something appropriate for images. Also consider images would not likely scale we’ll to different shapes and sizes, none of which are handled by the plugin.

Oh, yes. I wasn’t think about scaling. Well I think this would be too time consuming to go further with ??

Thanks for all your help and response.

(PS: the color explosion does not work in photoview ?? )

Athen, can you send a URL, it shouldn’t be too difficult to adjust for photo view.