{"id":5107,"date":"2026-10-12T14:53:06","date_gmt":"2026-10-12T18:53:06","guid":{"rendered":"https:\/\/www.airsupervision.com\/wp-r\/docs\/organization-staff\/pages-design-center\/custom-css-and-javascript\/"},"modified":"2026-10-12T14:53:06","modified_gmt":"2026-10-12T18:53:06","slug":"custom-css-and-javascript","status":"publish","type":"docs","link":"https:\/\/www.airsupervision.com\/wp-r\/docs\/managers\/pages-design-center\/custom-css-and-javascript\/","title":{"rendered":"Custom CSS and JavaScript"},"content":{"rendered":"\n<p>The <strong>CSS content<\/strong> and <strong>JS Content<\/strong> tabs are advanced tools. They require some knowledge of web development; links to free learning resources are listed at the end of this article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom CSS (CSS content tab)<\/h2>\n\n\n\n<p>CSS (<em>Cascading Style Sheets<\/em>) controls the look of the page: colours, fonts, spacing, borders, and layout. The <strong>CSS content<\/strong> tab adds styles that apply <strong>to this page only<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Field<\/th><th>Applies to<\/th><\/tr><\/thead><tbody><tr><td><strong>Desktop version<\/strong><\/td><td>The page as seen on a computer<\/td><\/tr><tr><td><strong>Mobile version<\/strong><\/td><td>The page as seen in the mobile app<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Click <strong>Update CSS<\/strong> to save. The message <em>&#8220;Custom Cascading Style Sheet saved!&#8221;<\/em> confirms it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-48-css-tab.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"420\" src=\"https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-48-css-tab.png\" alt=\"CSS content tab\" class=\"wp-image-5092\" srcset=\"https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-48-css-tab.png 1348w, https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-48-css-tab-300x93.png 300w, https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-48-css-tab-1024x319.png 1024w, https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-48-css-tab-768x239.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS content tab<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How to use it with classes<\/h3>\n\n\n\n<ol>\n<li>Add a class to a block (right-click \u2192 <strong>Block<\/strong> \u2192 <strong>Manage classes<\/strong>, for example <code>notice-red<\/code>), to a button or list (<strong>Classes<\/strong> field), or to the whole page (<strong>Page Options \u2192 Classes<\/strong>).<\/li>\n\n\n<li>In the CSS tab, write the style for that class:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>.notice-red {\n  border-left: 4px solid #c0392b;\n  background: #fdecea;\n  padding: 10px 15px;\n}<\/code><\/pre>\n\n\n\n<ol start=\"3\">\n<li>Click <strong>Update CSS<\/strong>, then check with <strong>Desktop Preview<\/strong> and <strong>Mobile Preview<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Important rules<\/h3>\n\n\n\n<ul>\n<li><strong>Use single quotes, not double quotes<\/strong>, inside your CSS (for example <code>font-family: 'Open Sans', sans-serif;<\/code>). Double quotes can stop the styles from loading.<\/li>\n\n\n<li>Use <code>\/* \u2026 *\/<\/code> for comments. Do not use <code>\/\/<\/code>.<\/li>\n\n\n<li>Prefix your selectors with your own class names so you do not change the rest of AirSupervision by mistake.<\/li>\n\n\n<li>The desktop and mobile styles are separate. Copy your rules to both if needed.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Custom JavaScript (JS Content tab)<\/h2>\n\n\n\n<p>JavaScript adds behaviour: small interactions, counters, show\/hide effects, and so on. The <strong>JS Content<\/strong> tab has a <strong>Desktop version<\/strong> and a <strong>Mobile version<\/strong>. Click <strong>Update Javascript<\/strong> to save (<em>&#8220;Custom Javascript saved!&#8221;<\/em>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-49-js-tab.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"420\" src=\"https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-49-js-tab.png\" alt=\"JS Content tab\" class=\"wp-image-5093\" srcset=\"https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-49-js-tab.png 1348w, https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-49-js-tab-300x93.png 300w, https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-49-js-tab-1024x319.png 1024w, https:\/\/www.airsupervision.com\/wp-r\/wp-content\/uploads\/2026\/10\/pe-49-js-tab-768x239.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><figcaption class=\"wp-element-caption\">JS Content tab<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Good practices<\/h3>\n\n\n\n<ul>\n<li>Write plain JavaScript only. Do <strong>not<\/strong> add <code>&lt;script&gt;<\/code> tags; AirSupervision adds them for you.<\/li>\n\n\n<li>jQuery is available. Wrap your code so it runs once the page is ready:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$(function () {\n  $('.notice-red').on('click', function () {\n    $(this).toggleClass('open');\n  });\n});<\/code><\/pre>\n\n\n\n<ul>\n<li>The script runs when members <strong>view<\/strong> the page (and in the previews), not inside the editor.<\/li>\n\n\n<li>Test with <strong>Desktop Preview<\/strong> \/ <strong>Mobile Preview<\/strong> before publishing. Open your browser&#8217;s developer console (F12) to see errors.<\/li>\n\n\n<li>Never paste code from an unknown source. Scripts run with the viewing member&#8217;s session.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learning resources (HTML, CSS, JavaScript)<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Topic<\/th><th>Resource<\/th><\/tr><\/thead><tbody><tr><td>HTML basics<\/td><td>MDN \u2013 Learn HTML: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML<\/a><\/td><\/tr><tr><td>CSS basics<\/td><td>MDN \u2013 Learn CSS: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS<\/a><\/td><\/tr><tr><td>CSS reference &amp; tutorials<\/td><td>W3Schools CSS: <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/css\/<\/a><\/td><\/tr><tr><td>Learn CSS (structured course)<\/td><td>web.dev \u2013 Learn CSS: <a href=\"https:\/\/web.dev\/learn\/css\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/web.dev\/learn\/css<\/a><\/td><\/tr><tr><td>Flexbox layout guide<\/td><td>CSS-Tricks: <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/<\/a><\/td><\/tr><tr><td>JavaScript tutorial<\/td><td>The Modern JavaScript Tutorial: <a href=\"https:\/\/javascript.info\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/javascript.info\/<\/a><\/td><\/tr><tr><td>JavaScript reference<\/td><td>MDN JavaScript: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript<\/a><\/td><\/tr><tr><td>jQuery<\/td><td>jQuery API documentation: <a href=\"https:\/\/api.jquery.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/api.jquery.com\/<\/a><\/td><\/tr><tr><td>Browser compatibility<\/td><td>Can I use: <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/caniuse.com\/<\/a><\/td><\/tr><tr><td>Colour picking<\/td><td>MDN color picker: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_colors\/Color_picker_tool\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_colors\/Color_picker_tool<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"featured_media":0,"parent":5103,"menu_order":4,"template":"","doc_tag":[],"_links":{"self":[{"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/docs\/5107"}],"collection":[{"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":0,"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/docs\/5107\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/docs\/5103"}],"next":[{"title":"Page Options","link":"https:\/\/www.airsupervision.com\/wp-r\/docs\/managers\/pages-design-center\/page-options\/","href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/docs\/5108"}],"prev":[{"title":"Blocks reference","link":"https:\/\/www.airsupervision.com\/wp-r\/docs\/managers\/pages-design-center\/blocks-reference\/","href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/docs\/5106"}],"wp:attachment":[{"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/media?parent=5107"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.airsupervision.com\/wp-r\/wp-json\/wp\/v2\/doc_tag?post=5107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}