TrueThemes WP Sterling and Events Calendar (CSS question) WordPress
- SOLVED
I am testing out the Sterling WordPress theme as it is responsive for a local nonprofit, compared to the original theme I planned to use (advocate) as it is not.
The Advocate theme, however, did have a great use of "The Events Calendar" plugin. I was hoping to replicate it via the Sterling theme, but it’s not coming through as I’d hoped.
On the home page of the advocate theme, it set it up with a calendar looking widget. When set up on Sterling theme, it looks bland. How can I adjust the css to make it look similar to the advocate way?
See bottom right of this site (advocate theme) as an example: http://echo.idmarketingevents.com/
See the sidebar of homepage using Sterling theme: http://echo2.idmarketingevents.com/
Any help you could offer would be great. Thank you.
Answers (3)
Kyle answers:
If you want it to look exactly like that you will have to make changes to the template, not just the css.
The Events Calendar does allow for template overrides, meaning you can make a copy of the the template and put it in your theme folder, and it won't get overridden when you do plugin updates. My site uses 3 (used to be 4) of the Modern Tribe plugins (The Events Calendar, The Events Calendar Pro, WooTickets, and Community Events) so I have done this quite a bit if you want me to write up some templates changes for you.
If you would like to do them yourself, inside your template folder (the Sterling theme folder) make an "events" folder. Inside there copy over the events-list-load-widget-display.php* file found in The Events Calendar "views" folder. There you can make all the changes to how it looks to get it structured the way you want.
*had the wrong file at first
Arnav Joy answers:
i can help you with this but i have to work in your files , so can you provide me access to your site , send me pm
Dbranes answers:
Hi
Here is a nice tutorial how to overwrite the Events Calendar templates:
[[LINK href="http://tri.be/faq/what-are-template-overrides-and-how-do-i-do-them/"]]http://tri.be/faq/what-are-template-overrides-and-how-do-i-do-them/[[/LINK]]
Here are few steps to adjust the Events List Widget template:
1) You create the "events" folder within your current theme directory.
2) Then copy "/wp-content/plugins/the-events-calendar/views/ events-list-load-widget-display.php" into the new "events" folder.
3) Open up the copied " events-list-load-widget-display.php" file and replace this code:
<li <?php echo $class ?>>
<div class="when">
<?php
$space = false;
$output = '';
echo tribe_get_start_date( $post->ID );
if( tribe_is_multiday( $post->ID ) || !$event->AllDay ) {
echo ' â <br/>'. tribe_get_end_date($post->ID);
}
if( $event->AllDay ) {
echo ' <small><em>('.__('All Day','tribe-events-calendar').')</em></small>';
}
?>
</div>
<div class="event">
<a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a>
</div>
</li>
with this code:
<li <?php echo $class ?>>
<div class="date">
<span><?php echo tribe_get_start_date( $post->ID,false,'d' );?></span> <?php echo tribe_get_start_date( $post->ID,false,'M' );?>
</div>
<div class="details">
<h5>
<a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a>
</h5>
<p>
<?php echo tribe_get_start_date( $post->ID,false,'H:i a' );?>
@ <?php echo tribe_get_venue( $post->ID ); ?>
</p>
</div>
</li>
4) Copy "/wp-content/plugins/the-events-calendar/resources/events.css" into the new "events" folder.
5) Open the copied "events.css" file
6) Add this CSS code at the top of the file:
/* Custom Events Widget List */
.eventsListWidget ul { list-style: none; }
.eventsListWidget h5, .eventsListWidget h5 a{
clear: none;
font-size: 15px;
color: #515151;
text-decoration: none;
font-weight: bold;
}
.eventsListWidget ul li {
padding-bottom: 13px;
border-bottom: 1px solid #e1e1e1;
margin-bottom: 13px;
list-style: none;
}
.eventsListWidget ul li .date {
width: 40px;
height: 33px;
padding-top: 7px;
background: #d07837;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right: 10px;
font-size: 12px;
float: left;
font-family: 'Cabin';
line-height: 13px;
}
.eventsListWidget ul li .date span {
font-size: 18px;
font-weight: bold;
display: block;
}
.eventsListWidget ul li p { margin-bottom: 0; }
.eventsListWidget ul li .details {
margin-left: 50px;
}
.eventsListWidget ul li .details a{
display: block;
color: #413b31;
}
.eventsListWidget p {
font-size: 13px;
line-height: 20px;
color: #8c8c8c;
}
ps: instead of steps 4,5 and 6, you could also install the plugin "The Events Calendar User CSS"
[[LINK href="http://wordpress.org/extend/plugins/the-events-calendar-user-css/"]]http://wordpress.org/extend/plugins/the-events-calendar-user-css/[[/LINK]]
<blockquote>A plugin to allow users to add custom CSS without having to either copy all existing code from the core events.css or add the correct @import to their</blockquote>
Just let me know if you need more help on this.