{"id":1027879,"date":"2015-11-19T05:12:57","date_gmt":"2015-11-19T13:12:57","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/"},"modified":"2015-11-23T08:35:27","modified_gmt":"2015-11-23T16:35:27","slug":"how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/","title":{"rendered":"How do I style the upcoming events widget to include thumbnail images?"},"content":{"rendered":"

At the moment my upcoming events widget duplicates the date as it shows in the nice date box as well as under the event title. I’d like to replace the date box with a thumbnail of the featured image that relates to the event. I’d also like to replace the block around the event title so that it is just a link.<\/p>\n

I’ve followed the Themers Guide<\/a> and created a file public_html\/wp-content\/themes\/flyingnews\/tribe-events\/pro\/widgets\/mini-calendar\/widget-calendar.css and the Styling events widgets<\/a> guide to create \/public_html\/wp-content\/themes\/flyingnews\/tribe-events\/pro\/tribe-events.css <\/p>\n

but neither affect the appearance of the upcoming events.<\/p>\n

The code I used:<\/p>\n

\/** Change the size and colour of the widget title *\/
\n.tribe-events-list-widget h2.widget-title {
\n\tcolor: blue;
\n\tfont-size: 30px;
\n}<\/p>\n

This isn’t necessarily the style I wanted but I wanted to see how it looked to guage what further changes I wanted to make.<\/p>\n

As fo replacing the date box with a thumbnail, my coding knowledge is too limited to work out how best to do this. <\/p>\n

I noticed that there’s Advanced Template settings under the Display settings for Events Calendar and wondered if this would be the easiest way to go. Though I’d still need help to know what to enter there.<\/p>\n","protected":false},"template":"","class_list":["post-1027879","topic","type-topic","status-closed","hentry"],"yoast_head":"\nHow do I style the upcoming events widget to include thumbnail images? -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I style the upcoming events widget to include thumbnail images? -\" \/>\n<meta property=\"og:description\" content=\"At the moment my upcoming events widget duplicates the date as it shows in the nice date box as well as under the event title. I’d like to replace the date box with a thumbnail of the featured image that relates to the event. I’d also like to replace the block around the event title […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/\" \/>\n<meta property=\"article:modified_time\" content=\"2015-11-23T16:35:27+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/\",\"name\":\"How do I style the upcoming events widget to include thumbnail images? -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2015-11-19T13:12:57+00:00\",\"dateModified\":\"2015-11-23T16:35:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Events Calendar PRO\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How do I style the upcoming events widget to include thumbnail images?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I style the upcoming events widget to include thumbnail images? -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/","og_locale":"en_US","og_type":"article","og_title":"How do I style the upcoming events widget to include thumbnail images? -","og_description":"At the moment my upcoming events widget duplicates the date as it shows in the nice date box as well as under the event title. I’d like to replace the date box with a thumbnail of the featured image that relates to the event. I’d also like to replace the block around the event title […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/","article_modified_time":"2015-11-23T16:35:27+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/","name":"How do I style the upcoming events widget to include thumbnail images? -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2015-11-19T13:12:57+00:00","dateModified":"2015-11-23T16:35:27+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-do-i-style-the-upcoming-events-widget-to-include-thumbnail-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Events Calendar PRO","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/"},{"@type":"ListItem","position":5,"name":"How do I style the upcoming events widget to include thumbnail images?"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1027879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1027879\/revisions"}],"predecessor-version":[{"id":1028158,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1027879\/revisions\/1028158"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1027879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}