Event categories with colors

That is because the #_EVENTCATEGORIES outputs in a list by itself. You cannot put a list in a list. #_CATEGORYNAME is a single line output. That is the difference.

Copy and paste this snippet in your theme’s functions.php file. Then replace your code completely with only #_STYLEDCATEGORIES and you will get a list of the Event’s categories with the Category Color as background. ??

function create_styled_eventcategories($replace, $EM_Event, $result) {
	if( $result === "#_STYLEDCATEGORIES") {
		$categories = $EM_Event->get_categories();
		$replace = "<ul class='event-categories'>";
		foreach( $categories as $category ) {
			$replace .= "<li style='background-color:{$category->color};'>{$category->name}</li>";
		}
		$replace .= "</ul>";
	}
	return $replace;
}
add_filter('em_event_output_placeholder', 'create_styled_eventcategories', 10, 3);

Dear @duisterdenhaag , i tried with a plugin “My custom functions” but it seems like does not work ??

I also tried with funcions.php file but as you can see my page now has got problems

Did you copy and paste it completely and without any changes?
I tested it and it works on my sites. ??

You need to replace your the complete code you posted in the original post with only #_STYLEDCATEGORIES. The new placeholder should take care of the complete layout for you.

Dear @duisterdenhaag,
I tried the same thing but in my site does not work…

• This reply was modified 5 years, 9 months ago by Jan.

@duisterdenhaag as you can see I can see the categories but no color.. ??

https://i.ibb.co/wwQ676p/1.png

• This reply was modified 5 years, 9 months ago by Jan.

An image does not show me the source code, does it? ??

Dear @duisterdenhaag,

this is the entire code:

<a href="#_EVENTURL" title="#_EVENTNAME"><div class="col post-item" >
				<div class="box box-default box-text-bottom box-blog-post has-hover">
            					<div class="box-image" ><div class="image-cover" style="padding-top:181px;">
#_EVENTIMAGE
			</div></div>
		</div>
          <div class="panel card panel-default">
		<div class="dx">
			<div class="panel-footer column-height-card">
			<div class="box-text text-center">
			<div class="box-text-inner">
				

<div class="row" id="row-427144464">

<div class="col small-12 large-12">

#_STYLEDCATEGORIES
</div>

</div>
<div class="row" id="row-1337412353">

<div class="col medium-6 small-12 large-6">

<div class="card-event-date p1"> <span class="date-day"> #l </span>  <span class="date-day-nunber"> #j </span>  <span class="date-month"> #F</span> </div>

</div>
<div class="col medium-6 small-12 large-6">

<div class="p1"> <h3 class="titoloeventopanel">#_EVENTNAME</h3> <p class="titololuogopannello"><b>#_LOCATIONNAME</b><br>a partire da #_EVENTPRICEMIN</p> </div>

</div>

</div>

			</div><!-- box-text-inner -->
		</div>
			</div>
		</div>
            </div>
</a>
</div>

Thank you ??

Hmmmm if I var_dump the category is does have a field “color” but it is not used. I set a color in the Dashboard… I will look into this.

Okay, got it!
It appears that the color is not included in the EM_Category Object. No idea why, but it is saved separately in the table wp_em_meta. I should expect that if there is a field ‘color’ in the EM_Category Object, it would be used, but no…

@tim. @angelo, Any idea why that is??

So you need to go the long way around to get the actual values. Doesn’t really makes sense to me, but okay…

function create_styled_eventcategories($replace, $EM_Event, $result) {
	if( $result === "#_STYLEDCATEGORIES") {
		$categories = $EM_Event->get_categories();
		$replace = "<div style='display: block;'>";
		foreach( $categories as $category ) {
			$EM_Category =  em_get_category( $category->id );
			$color 	= $EM_Category->output("#_CATEGORYCOLOR");
			$name 	= $EM_Category->output("#_CATEGORYNAME");
			$replace .= "<span style='background-color:{$color}; padding: 5px; margin-right:10px;'>{$name}</span>";
		}
		$replace .= "</div>";
	}
	return $replace;
}
add_filter('em_event_output_placeholder', 'create_styled_eventcategories', 10, 3);

@duisterdenhaag @tim @angelo Maybe it’s a CSS problem? Not so right what to do. without colors it is ugly. What do you suggest to me?

The last code works like a charm on my test server. So what is the problem now then?

Sorry, @duisterdenhaag. Now I resolved. Thank you