[Plugin: Event Calendar 3] Custom theming the event calendar…

  • Ben

    (@bforchhammer)


    15 years, 10 months ago

    Hi there,

    I just tried to apply some custom css styles to the event calendar widget in the sidebar and stumbled across a few things which made it more difficult than it could be… ??

    In the event calendar widget (id #wp-calendar) there are 2 tables. One for the navigation bit on top (previous month, ical, next month) marked with class “nav” and one for the main calendar view.

    The second table for the main calendar view does not have a classname attached to it at the moment which makes styling a bit more difficult because any styling I for example apply to #wp-calendar tbody td a I have to manually “undo” or change for the navigation table above #wp-calendar .nav tbody td a…

    Here’s an example:

    #wp-calendar tbody td a {
    background-color: #63B1E5;
    color: white;
    display: block;
    text-decoration: none;
    }
    #wp-calendar .nav tbody td a {
    background-color: transparent;
    color: inherit;
    display: inline;
    text-decoration: underline;
    }

    It would be nice if I there was a class (e.g. “cal”) attached to the calendar so that I can simply use the following css:

    #wp-calendar .cal tbody td a {
    background-color: #63B1E5;
    color: white;
    display: block;
    text-decoration: none;
    }

    … and the .nav table would just be rendered using default styles, provided by my default style.css. ??

    Alex, would it be possible for you to add classes like this to your widgets/html bits? I had similiar issues with the post iconlet a while ago and I’d be happy to have another look at it and provide some suggestions….

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

  • It’s really easy to add tags to tables, or for that matter to remove the table dependencies all together. After some digging, I found that all the tables are created in the template-functions.php file. Even if you don’t understand php well, it’s easy to find the table declarations and add class=”ec3_mycustomclass” to the tag.

    I don’t mind the actual calendar to be in a table, but it makes no sense for the navigation or event info inside posts to be shackled by tables. Div’s make much more sense. It makes it much easier to manipulate them!

    The following code is an example of div instead table for event info displayed in posts. It comes from template-functions.php around line 475:

    // TRYING TO REMOVE THIS DEPENDENCE ON TABLES -- YUCK!
// ******** IT WORKS! *******
// ******** Old Code: *******
// define('EC3_DEFAULT_FORMAT_SINGLE','<tr><td colspan="3">%s</td></tr>');
// define('EC3_DEFAULT_FORMAT_RANGE','<tr><td class="ec3_start">%1$s</td>'.'<td class="ec3_to">%3$s</td><td class="ec3_end">%2$s</td></tr>');
// define('EC3_DEFAULT_FORMAT_WRAPPER','<table class="ec3_schedule">%s</table>');
// *******************
// NEW TABLE FREE CODE:
// *******************
define('EC3_DEFAULT_FORMAT_SINGLE','<div class="ec3_dateinpost">%s</div>');
define('EC3_DEFAULT_FORMAT_RANGE','<div class="ec3_timeinpost"><span class="ec3_start">%1$s</span>'.'<span class="ec3_to">%3$s</span><span class="ec3_end">%2$s</span></div>');
define('EC3_DEFAULT_FORMAT_WRAPPER','<div class="ec3_schedule">%s</div>');

    I’m going to post this in the hacks section. Maybe it’s been covered, but I couldn’t find it. EDIT — whoops I am already in hacks ??

    Thread Starter Ben

    (@bforchhammer)

    thanks for the reply aquatoad…

    PHP is not the problem and I could indeed do it the way you’re suggesting but that would mean that I’d have to be very careful everytime I upgrade I plugin to not overwrite my own changes…

    I think the plugin should provide an easy way to do those changes (running each constant through a filter before use might be a good start) and also provide sensible defaults for example in terms of css classnames…

    And as offered above I don’t mind helping out.. just talk to me please ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Event Calendar 3] Custom theming the event calendar…’ is closed to new replies.