{"id":1945153,"date":"2020-01-27T08:25:11","date_gmt":"2020-01-27T13:25:11","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1945153"},"modified":"2022-04-01T08:23:45","modified_gmt":"2022-04-01T12:23:45","slug":"how-to-customize-templates-and-css-in-a-view","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/how-to-customize-templates-and-css-in-a-view\/","title":{"rendered":"Styling Photo View"},"content":{"rendered":"\n

The calendar’s view templates and CSS styles are comprehensive and intentionally structured. However, this doesn\u2019t mean you can\u2019t make any changes to them; in fact, you can and the plugin is designed to let you do it! We\u2019ve created a systematic design of the templates and CSS as a strong starting point. You as the user are free to change these as you see fit.<\/p>\n\n\n\n

In this article, we will run through two examples of how to customize templates and CSS to create your perfect events view.<\/p>\n\n\n\n

Editing event styles in photo view<\/h2>\n\n\n\n

Let\u2019s assume that we want to make a few small edits to the photo view, a feature of Events Calendar Pro<\/a>. First, we want to increase the event title font slightly, make the event title thinner, and increase the spacing above and below events. We can see these outlined in the images below for mobile and desktop versions of the photo view. The event title is bordered in green and the spacing in blue.<\/p>\n\n\n\n

\"The
The default photo view on desktop<\/figcaption><\/figure><\/div>\n\n\n\n
\"The
The default photo view on mobile<\/figcaption><\/figure><\/div>\n\n\n\n

To make these changes, we will add a few CSS rules to your styles.css file or any stylesheet that will be included in the photo view.<\/p>\n\n\n

\n.tribe-events-pro .tribe-events-pro-photo__event-title {\n  font-size: 18px;\n  font-weight: normal;\n}\n\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo__event-title {\n  font-size: 20px;\n}\n\n.tribe-events-pro .tribe-events-pro-photo__event {\n  margin-bottom: 30px;\n}\n\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo__event {\n  margin-bottom: 60px;\n}\n<\/pre><\/div>\n\n\n
Keen eyes may have observed that we used a .tribe-common--breakpoint-medium<\/code> class. This class is like a media query, but also not. The details of this class are beyond the scope of this article, but just know that it is added when we break from mobile to desktop view.<\/p>\n\n\n\n
Once this code is in place, we can go back to the photo view and see the changes we\u2019ve made:<\/p>\n\n\n\n
\"Photo
Photo view with custom CSS on desktop<\/figcaption><\/figure><\/div>\n\n\n\n
\"Photo
Photo view with custom CSS on mobile<\/figcaption><\/figure><\/div>\n\n\n\n
Using the Twenty Nineteen theme from WordPress<\/a>, you might have noticed that the event spacing changes aren’t displaying. This is because the theme overrides the event styles. To counter this, we\u2019ve added theme override styles to our plugins.<\/p>\n\n\n\n
To override our theme override styles, add the following styles to your stylesheet:<\/p>\n\n\n
\n\/* Remove these styles *\/\n\/*\n.tribe-events-pro .tribe-events-pro-photo__event {\n  margin-bottom: 30px;\n}\n\n.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo__event {\n  margin-bottom: 60px;\n}\n*\/\n\n\/* add these styles *\/\n.tribe-theme-twentynineteen .tribe-events-pro .entry.tribe-common-g-col.tribe-events-pro-photo__event {\n  margin-bottom: 30px;\n}\n\n.tribe-theme-twentynineteen .tribe-events-pro.tribe-common--breakpoint-medium .entry.tribe-common-g-col.tribe-events-pro-photo__event {\n  margin-bottom: 60px;\n}\n\n<\/pre><\/div>\n\n\n
Once you\u2019ve added these styles, you will see the changes take effect.<\/p>\n\n\n\n
Moving the event date inside of the photo view card<\/h2>\n\n\n\n
Let\u2019s try something a little bit more challenging now. Perhaps we don\u2019t like the date tag next to the event date and title on the events in the photo view. Instead, we want to move it on top of the event photo. We can see the move in the images below.<\/p>\n\n\n\n
\"Move<\/figure>\n\n\n\n
To do this, let\u2019s update some of the templates. First, we need to copy the event template file from the plugin to your theme. Find the file \/wp-content\/plugins\/events-pro\/src\/views\/v2\/photo\/event.php<\/code> and copy it to [your-theme]\/tribe\/events-pro\/v2\/photo\/event.php<\/code>. Now let\u2019s edit the file. Remove the line that says <?php $this->template( 'photo\/event\/date-tag', [ 'event' => $event ] ); ?><\/code> so that the file looks like below:<\/p>\n\n\n
\n<?php\n$classes = get_post_class( [ 'tribe-common-g-col', 'tribe-events-pro-photo__event' ], $event->ID );\n\nif ( $event->featured ) {\n  $classes[] = 'tribe-events-pro-photo__event--featured';\n}\n\n?>\n<article <?php tribe_classes( $classes ) ?>>\n\n  <?php $this->template( 'photo\/event\/featured-image', [ 'event' => $event ] ); ?>\n\n  <div class="tribe-events-pro-photo__event-details-wrapper">\n    <div class="tribe-events-pro-photo__event-details">\n      <?php $this->template( 'photo\/event\/date-time', [ 'event' => $event ] ); ?>\n      <?php $this->template( 'photo\/event\/title', [ 'event' => $event ] ); ?>\n      <?php $this->template( 'photo\/event\/cost', [ 'event' => $event ] ); ?>\n    <\/div>\n  <\/div>\n\n<\/article>\n\n<\/pre><\/div>\n\n\n
Once that\u2019s done, let\u2019s copy over another file. Find the file \/wp-content\/plugins\/events-pro\/src\/views\/v2\/photo\/event\/featured-image.php<\/code> and copy it to [your-theme]\/tribe\/events-pro\/v2\/photo\/event\/featured-image.php<\/code>. When you\u2019re done copying, let\u2019s edit the file so it looks like this:<\/p>\n\n\n
\n<?php\nuse Tribe__Date_Utils as Dates;\n\n$image_url = $event->thumbnail->exists ? $event->thumbnail->full->url : $placeholder_url;\n\n$display_date = empty( $is_past ) && ! empty( $request_date )\n    ? max( $event->dates->start_display, $request_date )\n    : $event->dates->start_display;\n\n$event_month     = $display_date->format_i18n( 'M' );\n$event_day_num   = $display_date->format_i18n( 'j' );\n$event_date_attr = $display_date->format( Dates::DBDATEFORMAT );\n?>\n<div class="tribe-events-pro-photo__event-featured-image-wrapper">\n    <a\n        href="<?php echo esc_url( $event->permalink ); ?>"\n        title="<?php echo esc_attr( get_the_title( $event ) ); ?>"\n        rel="bookmark"\n        class="tribe-events-pro-photo__event-featured-image-link"\n    >\n        <img\n            src="<?php echo esc_url( $image_url ); ?>"\n            <?php if ( ! empty( $event->thumbnail->srcset ) ) : ?>\n                srcset="<?php echo esc_attr( $event->thumbnail->srcset ); ?>"\n            <?php endif; ?>\n            <?php if ( ! empty( $event->thumbnail->alt ) ) : ?>\n                alt="<?php echo esc_attr( $event->thumbnail->alt ); ?>"\n            <?php endif; ?>\n            <?php if ( ! empty( $event->thumbnail->title ) ) : ?>\n                title="<?php echo esc_attr( $event->thumbnail->title ); ?>"\n            <?php endif; ?>\n            class="tribe-events-pro-photo__event-featured-image"\n        \/>\n        <div class="tribe-events-pro-photo__event-featured-image-date-tag">\n            <time class="tribe-events-pro-photo__event-featured-image-date-tag-datetime" datetime="<?php echo esc_attr( $event_date_attr ); ?>">\n                <span class="tribe-events-pro-photo__event-featured-image-date-tag-month">\n                    <?php echo esc_html( $event_month ); ?>\n                <\/span>\n                <span class="tribe-events-pro-photo__event-featured-image-date-tag-daynum tribe-common-h5 tribe-common-h4--min-medium">\n                    <?php echo esc_html( $event_day_num ); ?>\n                <\/span>\n            <\/time>\n        <\/div>\n    <\/a>\n<\/div>\n\n<\/pre><\/div>\n\n\n
Now let\u2019s add some styles so the date tag appears over the image. Add the following CSS to your styles.css file or any stylesheet that will be included in the photo view.<\/p>\n\n\n
\n.tribe-events-pro .tribe-events-pro-photo__event-featured-image-link {\n  position: relative;\n}\n\n.tribe-events-pro .tribe-events-pro-photo__event-featured-image-date-tag {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.8);\n  padding: 6px 12px;\n}\n\n.tribe-events-pro .tribe-events-pro-photo__event-featured-image-date-tag-datetime {\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n}\n\n.tribe-events-pro .tribe-events-pro-photo__event-featured-image-date-tag-month {\n  color: #141827;\n  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #727272;\n  text-transform: uppercase;\n}\n\n<\/pre><\/div>\n\n\n
Save your stylesheet and view the photo view page. You should see something similar to the below:<\/p>\n\n\n\n
\"Photo<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
The calendar’s view templates and CSS styles are comprehensive and intentionally structured. However, this doesn\u2019t mean you can\u2019t make any changes to them; in fact, you can and the plugin is designed to let you do it! We\u2019ve created a systematic design of the templates and CSS as a strong starting point. You as the…<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[84],"tags":[23,25,58],"stellar-product-taxonomy":[158],"class_list":["post-1945153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theming-overview","tag-css","tag-customizations","tag-php","stellar-product-taxonomy-events-calendar-pro"],"acf":[],"taxonomy_info":{"category":[{"value":84,"label":"Templating & Layout"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":84,"name":"Templating & Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating & Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":48,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":128,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945153"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945153\/revisions"}],"predecessor-version":[{"id":1956058,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945153\/revisions\/1956058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1945153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945153"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}