Help me style our events calendar

Hello - abusing the brains trust of the WPMU Dev community maybe but I'm not wild about the look of the Events Calendar we have - http://www.iamstaggered.com/directory/events/ can anyone suggest anything to make it look *purtier*?

  • Timothy Bowers

    I was having a little play and and was looking at matching colours with your site. I just didn't like the green there it looked out of place to me.

    I made these changes:

    #wpmudevevents-wrapper {
    	padding: .3em;
    }
    .wpmudevevents-list {
    	clear: both;
    	padding: .1em;
    }
    .wpmudevevents-list table {
    	width: 100%;
    	border-collapse: collapse;
    }
    .wpmudevevents-list table th {
    	width: 14.285%;
    	background: #333;
    	color: #ddd;
    	padding: .4em;
    	cursor: default;
    }
    .wpmudevevents-list table td {
    	border: 1px solid #ddd;
    	height: 10px;
    }
    .wpmudevevents-list table td p {
    
    }
    .wpmudevevents-list table td.no-left-border {
    }
    
    .wpmudevevents-list table td.no-right-border {
    }
    
    .wpmudevevents-list table td.today {
    	background: #ddd;
    }
    
    a.wpmudevevents-calendar-event {
    	display: block;
    	margin: .2em;
    	padding: .1em .4em;
    	background: rgb(89,192,235);
    	color: #fff;
    	text-decoration: none;
    	border: 1px solid rgb(51,51,51);
    	border-radius: 5px;
    }
    a.wpmudevevents-calendar-event:hover {
    	background: rgb(43,76,134);
    	text-decoration: none;
    }
    
    .wpmudevevents-calendar-event-info {
    	display: none;
    	position: absolute;
    	padding: .4em;
    	min-width: 200px;
    	background: #464646;
    	margin-top: 1em;
    	border: 1px solid #262626;
    	border-radius: 5px;
    }

    I think it still needs something, but I like it more.

    I think the white text on blue (from the UK logo) needs some adjusting.

    Take care.

  • Timothy Bowers

    Hey again.

    To add pagination to the top open:

    /wp-content/plugins/events-and-bookings/default-templates/calendar/archive-incsub_event.php

    You have this in there around line 18:

    <div class="wpmudevevents-list">
                <?php
                	if (!class_exists('Eab_CalendarTable_EventArchiveCalendar')) require_once EAB_PLUGIN_DIR . 'lib/class_eab_calendar_helper.php';
    				$renderer = new Eab_CalendarTable_EventArchiveCalendar($wp_query->posts);
    				echo $renderer->get_month_calendar($time);
                ?>
    
    				<div class="event-pagination">
    					<?php
    						$prev = $time - (28*86400);
    						$next = $time + (32*86400);
    					?>
    					<a href="<?php echo Eab_Template::get_archive_url($prev, true); ?>">Prev</a>
    					<a href="<?php echo Eab_Template::get_archive_url($next, true); ?>">Next</a>
    				</div>
    			</div>

    Change it to this:

    <div class="wpmudevevents-list">
      <div class="event-pagination">
    	<?php
    		$prev = $time - (28*86400);
    		$next = $time + (32*86400);
    	?>
    	<a href="<?php echo Eab_Template::get_archive_url($prev, true); ?>">Prev</a>
    	<a href="<?php echo Eab_Template::get_archive_url($next, true); ?>">Next</a>
      </div>
            <?php
              	if (!class_exists('Eab_CalendarTable_EventArchiveCalendar')) require_once EAB_PLUGIN_DIR . 'lib/class_eab_calendar_helper.php';
    		$renderer = new Eab_CalendarTable_EventArchiveCalendar($wp_query->posts);
    		echo $renderer->get_month_calendar($time);
             ?>
      <div class="event-pagination">
    	<a href="<?php echo Eab_Template::get_archive_url($prev, true); ?>">Prev</a>
    	<a href="<?php echo Eab_Template::get_archive_url($next, true); ?>">Next</a>
       </div>
    </div>

    That should sort you out.

    Take care.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.