Delving Deeper Into Styling the ELP Upcoming Widget?

[Tom]

Hi!
First off, congratulations on a seriously great product. More than worth the license price.

My question is about styling the upcoming events list widget. I’ve placed it on my home page, in the main content area, and I’ve styled it to flow horizontally. My problem is that I’d like to put some space between the list items, and nothing I try seems to work. I’ve adjusted padding on the container, margins on the LIs themselves – even tried wrapping them in individual container divs using pseudo classes, but to no avail. Any ideas?

I’m not sure how to go about pasting code here – whether I can use a shortcode to paste inline or if y’all want it linked from pastebin or something – but if you wanna see what I’ve got so far, just say so.

Thanks so much!

Tom.

[Jonah]

Hi Tom,

You can try wrapping code in “code” tags here in the forum or you can post code with pastebin or I personally like http://snippi.com/

Please provide what you’re working with and I’ll be able to take a closer look.

Thanks,
Jonah

[Tom]

Well, shortcode format is def not the way to go. Sorry! Can’t see how to delete that post, but let’s try again, shall we?

Hi, Jonah
Thanks so much for getting back to me! I’ll try the inline option first 🙂 Here’s what I have in my theme’s style.css:


/* Events Calendar Float Styles */
.eventBox {
position: relative;
width: 200px;
padding-left: 10px;
}
.eventsListWidget li:before, .eventsAdvancedListWidget li:before {
content: ""
}

.eventsListWidget li:after, .eventsAdvancedListWidget li:after {
content: "";
}

.eventsListWidget li, .eventsAdvancedListWidget li {
position: absolute;
top: 10px;
left: 10px;
float: left;
width: 180px;
border-left: solid 2px #124162;
padding-left: 10px;
}


Until yesterday, I only had the final section – the .eventsListWidget li, etc – and it worked fine, except that the list items were pressed against each other and, to my eye, visually displeasing. The padding spec in there is basically a vestige of my attempts to alleviate that problem. I figured I’d try wrapping each LI in a div and styling those to give everyone some personal space, but I guess my CSS wasn’t exciting enough 🙂

I don’t mean to foist my dilemmas on y’all, but I figured you might have seen this sort of thing before. Any ideas will be greatly appreciated! Thanks again 🙂

Tom.

[Tom]

Just to update, I noticed that the class names changed when I applied the 3.0.2 update. I’ll mess with that for a minute.

[Tom]

Check that. ID names, not class names.

[Jonah]

Hi Tom,

Yes, a bunch of class names and ID’s changed in 3.0. Your best bet is to use the WebKit Inspector in Chrome. Unfortunately diving into CSS styling issues is not something we can help you with. You’re going to need to keep troubleshooting but it looks like you’re on the right track. And remember to pay attention to CSS specificity! http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Good luck!

– 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