Padding on events list pro widget

[Jonathan]

I am using the Events list pro widget in the sidebar of the ET Extra theme. The dates and ‘View events’ text below them are flush left with no padding. How do I add extra padding so that the list elements line up with the contents in the widgets above and below?

Also, in the styling guide you mention setting up a ‘custom tribe-events.css file. in the tribe-events directory, something like this: wp-content/themes/YOUR_THEME/tribe-events/tribe-events.css’

Where is the directory located?

Thanks

[George]

Hey @Jonathan,

Thanks for reaching out. To address things in reverse order, that directory you mention is located in your site’s main WordPress installation on your server. If you’re not sure how to find this or access this, I would recommend researching “FTP” and “how to add files via FTP to WordPress sites” and things along those lines.

You could also, for the time being, simply use the built-in file editor in your site’s wp-admin; then, you can just put your custom CSS at the bottom of your theme’s style.css file—this is just a temporary thing, of course, but it might be easier to just work quickly here in the built-in editor in that file, and then once you’ve got things looking how you want, you can go about moving all of the custom CSS to a different file and such. The editor I’m referring to is in Appearance → Editor in your wp-admin.

---

As for the CSS itself, we unfortunately cannot help with custom coding and custom design. Please see the “product support” section on this page for more information → http://theeventscalendar.com/terms. I’m happy to help with an initial exchange though! I can hopefully share enough information in this thread that you can then take it all and make further customizations on your own.

So, to add padding to those list elements, you would add CSS like this to the bottom of your theme’s style.css file:


.tribe-mini-calendar-event {
padding-left: 10px !important;
padding-right: 10px !important;
}

Try that out and tinker around a bit with things, and you should be able to achieve the desired effect.

For all further CSS you want to write on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose styles you need to change—I used this tool to find the styles for the mini calendar widget events, for example.

I hope this all helps! Best of luck with your customizations.

— George

[Jonathan]

Hi George

Thanks for your advice, and for the code, which I’ve added via the editor for now.

On mobile, the code works well on the dates, (thanks!), but there is still no padding on the View More (link) text below (IMG_4806.PNG at http://360communications.co.uk/assets). Is this a separate element: do I need to use separate code for this?

On desktop, there is no change – no padding to either the dates or the text.

Also when I click View More to go through to the calendar on mobile, the days of the week are all overlapping (see IMG_4807.PNG at http://360communications.co.uk/assets). Is there anything I can do to remedy this?

I really hope you can help, but understand if this falls outside your remit.

Jonathan

[George]

Hey Jonathan,

Glad to hear there’s been some progress here. You’ll have to take the reins on further refinement from here—check out the tools I referenced above to make the process a bit easier. The View More link, for example, should be fixable with CSS like this:


p.tribe-events-widget-link {
padding: 5px 10px !important;
}


To help with getting the code to apply on desktop, more specificity might do the trick:

.tribe-events-adv-list-widget .tribe-mini-calendar-event {
padding-left: 10px !important;
padding-right: 10px !important;
}

.tribe-events-adv-list-widget p.tribe-events-widget-link {
padding: 5px 10px !important;
}


If that still doesn’t help, you may need to tinker more and may need to contact your theme developer because it would be their CSS that’s preventing a standard override.

As for the day names on the mobile calendar, I’m so sorry for the trouble here—this is a bug we are racing to fix and are hoping to publish an update soon to address this and some other bugs. Sit tight! I will keep this thread updated when that fix is ready.

Thank you,
George

[Jonathan]

Hi George

Many thanks for all your help and advice – I have the widget link working on desktop and mobile now, and the days are showing perfectly on mobile as well (MON, TUE etc).

Jonathan

[George]

Glad to hear it!

Cheers,
George

[Author]

Posts