EVENT POST TITLE COLOR

[miguelgino]

Hi, i am trying to add a bit of color on the events page by adding the html font or span tag on each title.

Title color changes but rel = bookmark appears.

http://gyazo.com/b5877b139fdefb990ba3ecd3e56b9df4

I want to do this to multi color the event titles.

any help would be highly appreciated.

Thanks

[George]

Hey Miguel,

That text is appearing because something about how you’ve added spans to your titles has broken the HTML on that page.

You should be able to achieve all the customizations you want here just with CSS, which is recommended – we don’t offer full support for customizations, but if you elaborate on what you’re trying to do here we can at least offer some advice and insight here, and perhaps some simple example code to get you started 🙂

— George

[miguelgino]

Hi George,

Thanks for your reply. What i want to do is color the text Title of each Event to different colors some green some yellow some red, just basic colors though how can i achieve that through css?

I tried a post title color Plugin but it does not work on the Events Calendar Pro

http://gyazo.com/1684f0499ff3dfb263103339780478d5

Just the Event Titles

Miguel

[George]

Hi Miguel,

Without a link to your site, I can’t say what the exact CSS selectors are because it may be different on your site. But they’re normally just .entry-title or something similar. So if you write custom CSS based on the event category, it should work well.

As an example, let’s say that you have two Event Categories: one called “Shindig” and one called “Concert”. To make Shindig event titles red, add CSS like this to the bottom of your theme’s style.css file:

.tribe-events-category-shindig .entry-title,
.tribe-events-category-shindig .entry-title a {
    color: red !important;
}

To make the “Concert” event titles green, add CSS like the following below it:

.tribe-events-category-concert .entry-title,
.tribe-events-category-concert .entry-title a {
    color: green !important;
}

We won’t be able to troubleshoot code that you try from here, but the above information should help you get started here quite a bit. If you’re curious about some CSS-related things, a great resource is http://css-tricks.com.

If you make backups of your customizations and play around with this for a while, I’m sure you’ll be able to get something working nicely on your site. Let us know if this helps!

Thank you,
George

[miguelgino]

Ty George!

[miguelgino]

Hi, George this worked on List View but when switching to other views (Map) it did not color the category as indicated.

[Andy Fragen]

miguelgino,

You might want to try The Events Calendar Category Colors.

If you assign different categories to your events and color them I think you can achieve what you want.

Andy

[George]

Andy’s solution above may help, and tweaking the code I suggested might help too – if you’re not familiar with doing so, check out a free tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome and learn to use their “Inspector” tools – these tools will let you zoom right into a specific link or element on the page whose CSS you can then see in full for customization.

With all of that information in mind, and since this mostly boils down to a customization from here forwards, I will go ahead and close up this ticket for now.

Best of luck with your customizations!

— George

[Author]

Posts