Adjustment to spacing & list centering vs. aligned

[Greg]

Hi, I am wondering [ in the simplest terms of course ] how and where I can adjust the parameters to the Community Events submission page concerning overall spacing of checkboxes, input fields, etc. Our checkboxes and their titles come in centered, with random text breaks and the input boxes seem to be pushed out to the center of our page column regardless. What I’d like to do is left align all checkboxes within their column areas, and bring the spacing in to move the input fields closer to the titles. If this is vague I can send a screen shot, but I think the URL will show what we are up against using the Extremis theme. Thanks very much!

[George]

Hi Greg,

Since we can unfortunately only provide very limited support for customizations and such, a high-level overview of how to make the Community Events submission look exactly like you want is as follows:

* The “meat and potatoes” of customizing would really be writing custom CSS in the bottom of your theme or child theme’s style.css file. If you’re not familiar with how to find what to style with CSS, I can’t recommend a [free!] tool like Firebug for FireFox, or the Developer Tools for either Safari or Chrome enough – these all have “Inspector” tools, that let you zoom right to an element whose padding/colors/font-styles/whatever you want to change, and then see what CSS exists already. It makes customizing almost – dare I say – fun.

Let’s use the “Event Categories” area on your page as an example – in this screenshot, the categories box is highlighted with a blue border because I’m selecting it with Firebug’s “Inspector” tool → https://cloudup.com/c0je_zb2deE

That shows all the related HTML classes and IDs that can be used for writing custom CSS. So as a quick example, I used the Inspector tool and wrote the following CSS:

#event-categories li {
    text-align: left;
}
#event-categories {
    margin-bottom: 16px !important;
}
.tribe-events-community-details.eventForm.bubble table td {
    padding: 5px !important;
}
.tribe-events-community-details.eventForm.bubble table {
    margin: 0;
}
.tribe-events-community-details.eventForm.bubble {
    padding: 0 !important;
}

Here’s how that ended up looking on your site when I tested it out → https://cloudup.com/c0je_zb2deE

I hope that helps!

The next method for customizing is to use our templating system to wholly customize even the HTML of the page itself – you can learn about the whole process of doing this in our official Themer’s Guide here → https://theeventscalendar.com/knowledgebase/themers-guide/

Both methods should be a great start towards getting things looking exactly like you want – let us know what you think about all this and if you have any other questions or concerns!

Cheers,
George

[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