Font Sizes and Colors

[Clay]

Hi,
Hoping you can point me in the right direction. Love this plugin, but am finding it hard to set font sizes and colors. Seems like colors I set are being overwritten or are subject to inheritance from some other elements.

If I’m using default EPC template, what line numbers in stylesheet should I be changing? I want to set a new color for Event titles in all iterations (lists, calendar, widget, etc…)

Thanks!

Clay

[Jonah]

Hi Clay,

It may help to read up on CSS specificity to learn about how you can override or apply styling to elements in CSS: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Another thing to know is that you should always be using an override of the events.css by making a copy of /wp-content/plugins/the-events-calendar/resources/events.css and placing in an ‘events’ folder in your active theme. Then you can safely make any changes or additions and retain them when updating the plugin.

I hope this helps.

– Jonah

[Clay]

Hi Jonah,
Thanks. I’m no genius of CSS, that’s for sure, but I do alright safely customizing most things I install. Just looking for the defaults. I will do a content override ultimately. Just on a deadline. If that’s not an appropriate question for this forum, I may need to rethink future purchase. I don’t mean any disrespect at all. Love the code and I appreciate the prompt reply. Again, just on a deadline. 🙂

[Jonah]

Hi Clay,

Well it’s hard to give you specifics without an example or two. Do you have an example of something you were trying to override and the code you used? The key thing with CSS specificity is that you can “trump” other CSS declarations by applying a higher specificity. So if you have the following:

.a-class {
color: #fff;
}

You can override that by prefixing with an ID selector which will score it higher:

#an-id .a-class {
color: #000;
}

Does that help?

[Clay]

Definitely. Appreciate the reply. Quick question, admittedly one not pertaining specifically to ECP, but would be interested in your opinion. What role, if any, should !important; have in trumping specificity?

Cheers – thanks again.

Clay

[Jonah]

Hey Clay,

!important will override all other styling including normal specificity rules unless the underlying specificity is higher (with the !important rule). As a general practice you should limit your use of !important as much as possible and instead rely on specificity scoring in CSS to apply styling. Using !important can cause conflicts that can be troublesome to work with. And with specificity scoring there’s really no reason to use !important. If you need to trump a declaration just add more id’s or classes to it to score higher.

I hope that helps!

– Jonah

[Clay]

Thanks Jonah. Good stuff!

Clay

[Jonah]

No problem. If you’re satisfied with the support you’re getting around here and love the plugin we’d sure appreciate it if you reviewed us here: http://wordpress.org/support/view/plugin-reviews/the-events-calendar

Thanks!

– Jonah

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts