Horizontal display of events-list-load-widget-display.php

[Mike]

I have created a modified variation of the events-list-load-widget-display.php, which you can see in action here: http://thepaintandpour.com/upcoming-events-test/

My only issue is that I need this to display horizontally. I am assuming this should be done with the CSS, which I attempted to do by embedding the list in a UL and floating it.

If I pull the code from the resolved web page at http://thepaintandpour.com/upcoming-events-test/ and rip out the framework code, leaving just the code that is dynamically created by the widget, then it floats horizontally as intended (see sample: http://thepaintandpour.com/event_list_sample.html. But it does NOT work when it is seated in the website frame, which leads me to believe that the problem lies somewhere else… but I can not seem to track it down.

Any help would be greatly appreciated, as I am about to pull my hair out here!

Thanks!

[Jonah]

Hi Mike,

There are different ways you can do this, mainly all with CSS and to get you headed in the right direction, if you add this CSS it will float the list items:

.eventsListWidget li, .eventsAdvancedListWidget li {
float: left;
width: 180px;
}

You can set the width to whatever you want for however wide you want each item to be. You would add this to your theme’s style.css file somewhere.

I hope that helps!

– Jonah

[Author]

Posts