{"id":1896512,"date":"2019-10-18T13:19:19","date_gmt":"2019-10-18T17:19:19","guid":{"rendered":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/adding-custom-css-to-community-events-pages-2\/"},"modified":"2022-07-14T07:01:18","modified_gmt":"2022-07-14T11:01:18","slug":"adding-custom-css-to-community-events-pages","status":"publish","type":"post","link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/adding-custom-css-to-community-events-pages\/","title":{"rendered":"Styling Community Events Pages"},"content":{"rendered":"\n<p>Sometimes the default styling of Community Events needs to be customized to fit a particular theme. There are two main methods for writing CSS that only targets Community Events pages: using CSS only, or using a combination of CSS and PHP.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#body-class\">CSS Only: Body Classes<\/a><\/li><li><a href=\"#template-tags\">CSS and PHP: Template Tags<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"body-class\">CSS Only: Body Classes<\/h2>\n\n\n\n<p>Any correctly-made WordPress theme will make use of the WordPress Core function <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/body_class\/\" target=\"_blank\" rel=\"noopener noreferrer\">body_class()<\/a>, which allows plugins and themes to add custom CSS classes to the HTML body tag.<\/p>\n\n\n\n<p>Community Events adds the following class names to the body of Community Events pages:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>.tribe_community_edit<\/code>: This class is only used on Community Events submission pages.<\/li><li><code>.tribe_community_list<\/code>: This class is only used on Community Events &#8220;My Events&#8221; pages.<\/li><\/ul>\n\n\n\n<p>\u261d\ufe0f For a quick example of using these classes effectively, here&#8217;s a bit of example code that would make the Event Title label text on the Community Events submission form red:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: css; title: ; notranslate\" title=\"\">body.tribe_community_edit .events-community-post-title label {\n  color: red;\n}<\/pre><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"template-tags\">CSS and PHP: Template Tags<\/h2>\n\n\n\n<p>The above method \u2014 using HTML body classes \u2014 allows you to easily write custom CSS for Community Events pages with just CSS. No PHP is required.<\/p>\n\n\n\n<p>You could use PHP to print CSS directly onto Community Events pages, though. There are a number of reasons why one might want to do this, and these same methods could be used to print JavaScript onto Community Events pages, too, so they&#8217;re worth describing.<\/p>\n\n\n\n<p>The two main template tags you&#8217;ll want to be aware of in this sort of situation are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>tribe_is_community_edit_event_page()<\/code>: Returns true only if the Community Events submission page is currently being viewed.<\/li><li><code>tribe_is_community_my_events_page()<\/code>: Returns true only if the Community Events &#8220;My Events&#8221; page is currently being viewed.<\/li><\/ul>\n\n\n\n<p>You could use these template tags to print CSS or JavaScript onto Community Events pages with a PHP snippet like the following, which hooks into WordPress&#8217; <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Action_Reference\/wp_head\" target=\"_blank\" rel=\"noopener noreferrer\">wp_head action<\/a> to print CSS if you&#8217;re on either the submission page or the &#8220;My Events&#8221; list page.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php\n\/**\n * Adds CSS or JS to the top of Community Events&#039; submission and &quot;My Events&quot; pages.\n *\/\nfunction teckb_events_community_css() {\n \n  if ( ! tribe_is_community_edit_event_page() &amp;&amp; ! tribe_is_community_my_events_page() ) {\n    return;\n  }\n?&gt;\n\n&lt;style&gt;\n.insert-your-custom-css-here {\n    background: black;\n    color: blue;\n}\n&lt;\/style&gt;\n\n&lt;script&gt;\nconsole.log( &#039;You can also insert JavaScript, although this may be best in the wp_footer hook&#039; );\n&lt;\/script&gt;\n\n&lt;?php\n}\n \nadd_action( &#039;wp_head&#039;, &#039;teckb_events_community_css&#039; );\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Sometimes the default styling of Community Events needs to be customized to fit a particular theme. There are two main methods for writing CSS that only targets Community Events pages: using CSS only, or using a combination of CSS and PHP. CSS Only: Body Classes CSS and PHP: Template Tags CSS Only: Body Classes Any&#8230;<\/p>\n","protected":false},"author":77,"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":[116],"tags":[23,58],"stellar-product-taxonomy":[152],"class_list":["post-1896512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-css","tag-php","stellar-product-taxonomy-community-events"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS &amp; Styling"}],"post_tag":[{"value":23,"label":"CSS"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":152,"label":"Community"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"TEC Staff","author_link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/author\/tec_staff\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS &amp; Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":33,"filter":"raw","term_order":"0","cat_ID":116,"category_count":33,"category_description":"","cat_name":"CSS &amp; Styling","category_nicename":"css-styling","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":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:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896512"}],"version-history":[{"count":1,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896512\/revisions"}],"predecessor-version":[{"id":1956303,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896512\/revisions\/1956303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896512"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}