{"id":1198187,"date":"2016-11-28T03:42:32","date_gmt":"2016-11-28T11:42:32","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/"},"modified":"2016-11-28T03:42:32","modified_gmt":"2016-11-28T11:42:32","slug":"how-to-replace-css-files-not-listed-in-themers-guide","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/","title":{"rendered":"How to replace CSS files not listed in Themer&#039;s Guide"},"content":{"rendered":"<p>I am having difficulty replacing the TEC stylesheets.  I&#8217;ve followed the instructions listed here in the Themer&#8217;s Guide here: <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/themers-guide\/#customizingstyles\">https:\/\/theeventscalendar.com\/knowledgebase\/themers-guide\/#customizingstyles<\/a><\/p>\n<p>It only lists instructions for THREE of the dozens of stylesheets utilized by TEC + assorted Tribe plugins.  <\/p>\n<ul>\n<li>tribe_events_stylesheet_url (The Events Calendar core styles)<\/li>\n<li>tribe_events_pro_stylesheet_url (Events Calendar PRO styles)<\/li>\n<li>tribe_events_pro_widget_calendar_stylesheet_url (The Events Calendar calendar widget styles)<\/li>\n<\/ul>\n<p>I added the following to my functions.php file:<\/p>\n<pre><code>\/**\n  * Replace Tribe CSS Files\n  *\/\n\nfunction replace_tribe_events_calendar_stylesheet() {\n   $styleUrl = get_bloginfo(&#039;template_url&#039;) . &#039;\/tribe-events\/custom-events-stylesheet.css&#039;;\n   return $styleUrl;\n}\nadd_filter(&#039;tribe_events_stylesheet_url&#039;, &#039;replace_tribe_events_calendar_stylesheet&#039;);\n\nfunction replace_tribe_events_calendar_pro_stylesheet() {\n   $styleUrl = get_bloginfo(&#039;template_url&#039;) . &#039;\/tribe-events\/custom-events-pro-stylesheet.css&#039;;\n   return $styleUrl;\n}\nadd_filter(&#039;tribe_events_pro_stylesheet_url&#039;, &#039;replace_tribe_events_calendar_pro_stylesheet&#039;);<\/code><\/pre>\n<p>Unfortunately, although this IS the code listed in the themer&#8217;s guide, it does not work for anyone using a child theme&#8230;.  which is the default behavior EVERYONE should be using when customizing a wordpress theme.  I had to replace <code>get_bloginfo(&#039;template_url&#039;)<\/code> with <code>get_bloginfo(&#039;stylesheet_directory&#039;)<\/code> to have it even load the customized stylesheets, and this is not listed anywhere in the themer&#8217;s guide.  I was lucky enough to have found it in the forums, but others might not be.<\/p>\n<p>Then I copied ALL of the CSS files from the TEC and TEC Pro plugins into:<br \/>\n<a href=\"http:\/\/thepaintandpour.us\/wp-content\/themes\/you-child\/tribe-events\/custom-events-stylesheet.css\">http:\/\/thepaintandpour.us\/wp-content\/themes\/you-child\/tribe-events\/custom-events-stylesheet.css<\/a><br \/>\nand<br \/>\n<a href=\"http:\/\/thepaintandpour.us\/wp-content\/themes\/you-child\/tribe-events\/custom-events-pro-stylesheet.css\" target=\"_blank\">http:\/\/thepaintandpour.us\/wp-content\/themes\/you-child\/tribe-events\/custom-events-pro-stylesheet.css<\/a><\/p>\n<p>I tried batching all of the CSS files together in each &#8220;master&#8221; CSS file (for TEC, TEC Pro, and TEC Widgets), but there are a lot of glitches that lead me to thinking it is not picking up everything, not to mention the mobile view issues.  As a temporary fix, I added @media settings to all of the mobile CSS properties, but that is hardly a proper solution.<\/p>\n<p>So my questions:<\/p>\n<ol>\n<li>How do I replace the CSS for ALL of the Modern Tribe plugins.<\/li>\n<li>How do I replace the mobile view files for the assorted plugins?<\/li>\n<li>If I am using a particular stylesheet in settings (theme, full, or skeleton), do I copy over only those files into the custom CSS files, or all three?<\/li>\n<\/ol>\n<p>In particular, I am looking for instructions on how to replace the following CSS files:<\/p>\n<blockquote><p><strong>TEC<\/strong><br \/>\nadmin-menu.css<br \/>\naggregator-fields.css<br \/>\naggregator-page.css<br \/>\ndebugger.css<br \/>\nevents-admin.css<br \/>\ntribe-events-embed.css<br \/>\ntribe-events-full.css<br \/>\ntribe-events-full-mobile.css<\/p>\n<p><strong>TEC Pro<\/strong><br \/>\nevents-admin.css<br \/>\nevents-recurrence.css<br \/>\ntribe-events-mini-ajax.css<br \/>\ntribe-events-pro-full.css<br \/>\ntribe-events-pro-full-mobile.css<br \/>\nwidget-calendar-full.css<br \/>\nwidget-this-week-full.css<\/p>\n<p><strong>TEC Filter Bar<\/strong><br \/>\nfilter-admin.css<br \/>\nfilter-view.css<\/p>\n<p><strong>TEC Tickets<\/strong><br \/>\nrsvp.css<br \/>\ntickets.css<br \/>\ntickets-attendees.css<br \/>\ntickets-attendees-print.css<br \/>\ntickets-embed.css<\/p>\n<p><strong>TEC Tickets Plus<\/strong><br \/>\nmeta.css<br \/>\ntickets.css<br \/>\nwootickets.css<\/p><\/blockquote>\n<p>If I might make a suggestion, EVERY css file and EVERY template view for all plugins should have instructions on how to replace them with edited versions in the Themer&#8217;s Guide AND in the title comments listed on the top of each file. This should include EXACT directions, including the locations of the source file and the location where the custom file should be loaded. This should also include instructions on the appropriate functions to place in one&#8217;s functions.php file to enque to the custom CSS files for EVERY file, similar to that provided in the Themer&#8217;s guide<\/p>\n<p>For example, look at this snippet from the Themer&#8217;s Guide:<\/p>\n<blockquote><p><strong>Events Tickets Plus<\/strong><\/p>\n<p>Parent folder located at: \/wp-content\/plugins\/event-tickets-plus\/src\/views\/<\/p>\n<p>attendees-list.php \u2013 The template for the public list of attendees. Note that there is no subdirectory needed for this template and it can go straight into the tribe-events folder when theming.<br \/>\nlogin-to-purchase.php \u2013 Renders a link displayed to customers when they must first login before being able to purchase tickets<br \/>\nmeta.php \u2013 The template that displays custom fields that have been created for a ticket to fill in during registration. Note that there is no subdirectory needed for this template and it can go straight into the tribe-events folder when theming.<br \/>\nmeta\/checkbox.php \u2013 The template used for displaying checkbox options for custom ticket fields that get imported by meta.php<br \/>\nmeta\/number.php \u2013 The template used for displaying numeric custom ticket fields that get imported by meta.php<br \/>\nmeta\/radio \u2013 The template used for displaying radio button options for custom ticket fields that get imported by meta.php<br \/>\nmeta\/select \u2013 The template used for displaying selectable options for custom ticket fields that get imported by meta.php<br \/>\nmeta\/text \u2013 The template used for displaying custom ticket text fields that get imported by meta.php<br \/>\ntickets-plus\/orders-edit-meta.php\u2013 Renders the meta fields for order editing<br \/>\ntickets-plus\/orders-tickets.php \u2013 The list of ticket orders<br \/>\neddtickets\/tickets.php \u2013 Easy Digital Downloads table of tickets with the button to purchase in the front end. It shows in the event single, if the event has EDD tickets to sell<br \/>\nshopptickets\/tickets.php \u2013 Shopp table of tickets with the button to purchase in the front end. It shows in the event single, if the event has Shopp tickets to sell<br \/>\nwootickets\/tickets.php \u2013 WooCommerce table of tickets with the button to purchase in the front end. It shows in the event single, if the event has WooCommerce tickets to sell<br \/>\nwpectickets\/tickets.php \u2013 WP E-Commerce table of tickets with the button to purchase in the front end. It shows in the event single, if the event has WP E-Commerce tickets to sell<\/p><\/blockquote>\n<p>This lists the source of the template files, but NOT where to upload the custom files. It also does not inform us how to replace the CSS files for this plugin, or even where they are located. This is a glaring hole in your instruction files, and needs to be patched. The entire Themer&#8217;s Guide needs to have these critical elements added, to allow customers to properly modify their fields in an upgrade friendly manner.<\/p>\n<p>This is definitely a phase two aspect, but an image map should be provided of all elements on each page\/view and instructions on what CSS fields can be used to customize them.  For example, in the month view, an image map should be provided for customizers that allows them to hover over each element and see exactly what CSS will affect changing it&#8217;s color\/size\/whatever.  I know that there are CSS inspector tools that do this, somewhat, but as an example, I don&#8217;t seem to be able to figure out what CSS can change the month view&#8217;s current day header formatting.  With an image map that shows the respective CSS on an overlay for each element, it would make our lives SO much easier when attempting to edit the CSS to create our own layouts.<\/p>\n<p>Thanks for reading!  <\/p>\n","protected":false},"template":"","class_list":["post-1198187","topic","type-topic","status-closed","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to replace CSS files not listed in Themer&#039;s Guide -<\/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-to-replace-css-files-not-listed-in-themers-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to replace CSS files not listed in Themer&#039;s Guide -\" \/>\n<meta property=\"og:description\" content=\"I am having difficulty replacing the TEC stylesheets. I&#8217;ve followed the instructions listed here in the Themer&#8217;s Guide here: https:\/\/theeventscalendar.com\/knowledgebase\/themers-guide\/#customizingstyles It only lists instructions for THREE of the dozens of stylesheets utilized by TEC + assorted Tribe plugins. tribe_events_stylesheet_url (The Events Calendar core styles) tribe_events_pro_stylesheet_url (Events Calendar PRO styles) tribe_events_pro_widget_calendar_stylesheet_url (The Events Calendar calendar widget [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/\" \/>\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=\"6 minutes\" \/>\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-to-replace-css-files-not-listed-in-themers-guide\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/\",\"name\":\"How to replace CSS files not listed in Themer&#039;s Guide -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2016-11-28T11:42:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/#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 to replace CSS files not listed in Themer&#039;s Guide\"}]},{\"@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 to replace CSS files not listed in Themer&#039;s Guide -","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-to-replace-css-files-not-listed-in-themers-guide\/","og_locale":"en_US","og_type":"article","og_title":"How to replace CSS files not listed in Themer&#039;s Guide -","og_description":"I am having difficulty replacing the TEC stylesheets. I&#8217;ve followed the instructions listed here in the Themer&#8217;s Guide here: https:\/\/theeventscalendar.com\/knowledgebase\/themers-guide\/#customizingstyles It only lists instructions for THREE of the dozens of stylesheets utilized by TEC + assorted Tribe plugins. tribe_events_stylesheet_url (The Events Calendar core styles) tribe_events_pro_stylesheet_url (Events Calendar PRO styles) tribe_events_pro_widget_calendar_stylesheet_url (The Events Calendar calendar widget [&hellip;]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/","name":"How to replace CSS files not listed in Themer&#039;s Guide -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2016-11-28T11:42:32+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/how-to-replace-css-files-not-listed-in-themers-guide\/#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 to replace CSS files not listed in Themer&#039;s Guide"}]},{"@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\/1198187","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\/1198187\/revisions"}],"predecessor-version":[{"id":1200520,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1198187\/revisions\/1200520"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1198187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}