[Plugin: Events Manager] CSS improvements

Resolved Otto Kekäläinen
(@ottok)

13 years, 8 months ago
Hello,

Here are some CSS improvement suggestions to the add event page.

Event details headers look nicer if you add textalign: left:
```
#event-form table.em-location-data td, #event-form table.em-location-data th {
vertical-align: top;
border: none;
text-align: left;
}
```
Some of the checkboxes are to the left, others to the right. Make it uniform and nice looking by adding this CSS to events-manager.css:
```
#event-form input[type="checkbox"] {
    float: left;
    margin: 0 3px 0 0;
}
```
```
#event-form #weekly-selector input[type="checkbox"], #em-time-all-day {
    float: none;
    margin: 3px 3px 0 6px;
}
```
PS. You might also want to consider looking at PageSpeed an YSlow to see what optimizations you could do to improve EM. Here is a summary report with of both: http://gtmetrix.com/reports/demo.wp-events-plugin.com/AgM2mmII

There is, among others, some very inefficient CSS rules in events-manger.css.

http://ww.wp.xz.cn/extend/plugins/events-manager/

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Marcus (aka @msykes)
(@netweblogic)

13 years, 8 months ago

We try to keep this stuff to a minimum on purpose, given that every theme has it’s own style.

If there’s any bad/inefficient rules I’m open to suggestions, but would rather not add unnecessary styling.

I’m actually about to release a new demo that should rank better 🙂 the one thing that I will eventually tackle is our thumbnails as at the moment they aren’t being cached.

geologist
(@geologist)

13 years, 7 months ago

The problem with “every theme has its own style” is that when you try changing a style selector such as “input” or “th” in the themes style sheet, then the selector changes all the way across the website. We need to be able to style specific selectors ONLY for Events without affecting our entire website. You need to add more selectors to allow for styling of only the appropriate events pages.

Thread Starter Otto Kekäläinen
(@ottok)

13 years, 7 months ago

Geologist: did you notice my suggestions are preceded with #event-form?

Are are already specific selectors, no need to complain about them missing.

geologist
(@geologist)

13 years, 7 months ago

Yes you do have selectors for event-form.

Where are the selectors for the event list? Where are these:

class=”events-table” or th class=”event-description”

They are not in events_manager.css and when I try adding these class selectors to this style sheet, they are ignored. Apparently the formatting for the event lists are over-ridden somewhere.

The form is not the only thing we need to format. In-line styling in the Admin Panel – Event Format is very difficult to do.

This is a very helpful event manager. I do appreciate the programming involved in creating it.

Plugin Author Marcus (aka @msykes)
(@netweblogic)

13 years, 7 months ago

you should be adding your CSS to override ours in your themes style.css file.

The events page has an #em-wrapper div surrouding it, so you can prevent the rest of your site getting affected with that.

if you want to add classes to your event list, you can do this in your settings page, some HTML/CSS experience is needed, but from the looks of it (even though you say it’s difficult) you seem to already be able to do this?

geologist
(@geologist)

13 years, 7 months ago

Thanks Marcus. Putting new selectors in my theme css file worked.

http://www.palmyracob.org/honest/activities/schedule-2/

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘[Plugin: Events Manager] CSS improvements’ is closed to new replies.

Tags