How to style the Event Listing

[James]

I have combed over the events.css file and can not for the life of me find how to add a divider between the posts on the event listing. I have seen other sites using this plugin that have successfully done this. Can anyone tell me how to add the divider between the posts?

[James]

JUST FIGURED IT OUT! After some trial and error I found that altering the following code in your events.css starting at line 183 fixes this problem.

}
.events-archive .hentry {
margin:0;
padding: 0 0 15px 0 !important;
border-bottom: 1px dashed #CCCCCC;
}

[Jonah]

Hey James,

Glad you figured that out. I want to point out though that you should not edit that copy of the events.css file because your changes will be lost the next time you update. Instead, put your custom CSS in your theme’s style.css file and use a higher specificity to override our plugins CSS. Using a higher specificity just means adding a class or ID selector before the existing selectors to make the declaration more specific.

I hope that helps but let me know if you have any questions.

Thanks,
Jonah

[James]

can you be more specific? or give me an example of how I would word the code for my style.css?

[James]

Ok, I removed from events.css and added the code word for word to my style.css and it works fine still.

[Jonah]

Sure James, so if you’re modifying this CSS:

.events-archive .hentry {
margin:0;
padding: 0 0 15px 0 !important;
border-bottom: 1px dashed #CCCCCC;
}

Add whatever you want to change, let’s say the border to black, to your theme’s style.css file like so:

#main .events-archive .hentry {
border-bottom: 1px dashed #000;
}

Putting the #main div selector before the other selectors will give it a higher score and apply that CSS instead of the other CSS declared in our plugin. You don’t have to use #main either, you can use any other parent div or element to give it a higher score. ID’s weigh the heaviest though with classes coming next. You can read more about specificity here: http://css-tricks.com/specifics-on-css-specificity/

Cheers,
Jonah

[James]

For some reason #main wouldn’t work but !important did.

[Jonah]

You may need to be even more specific than adding just the #main div – you can add as many other selectors as you want to make the score higher. !important shouldn’t really be used unless absolutely necessary but it can make things easier if you really can’t figure out how to override a style. Just be aware of the implications! There’s plenty of article on the net that talk about using !important.

– Jonah

[Author]

Posts