In-App Custom CSS

📘

Custom CSS rules are applied to your website when it is displayed through your app. For instance, within your app you may need to hide navigation elements such as a footer menu or overlay elements such as a chat widget. CSS rules added in the top section are added to both iOS and Android apps.

For example, entering the following will apply the CSS for nav, footer, and header elements to every page in your app.

.nav
{ 
    margin-top: 5px !important;
    font-size: 14px !important;
}

#header, #footer
{ 
    background-color: #4c4c4c !important;
    margin-bottom: 0px !important; 
}

Post page load JavaScript CSS

The Custom CSS embedded in your app in Website Overrides is inserted as the page is loaded within your app. For some single page web sites including WordPress these are not applied in time to be processed. In such cases, you may use JavaScript after the page has completed loading to hide or show required elements. This JavaScript can be added to the page or by using the Custom JavaScript feature. For example:

<script>
if (navigator.userAgent.indexOf('median') > -1) {
  document.querySelector('.nav').style.visibility = "hidden";
  document.querySelector('#header').style.visibility = "hidden";
  document.querySelector('#footer').style.visibility = "hidden";

  // Or with jQuery
  $('.nav').hide();
  $('#header').hide();
  $('#footer').hide();

  // WordPress can use the jQuery() function rather than $()
  jQuery('.nav').hide();
  jQuery('#header').hide();
  jQuery('#footer').hide();
}
</script>

You can add them in the same manner as Google Analytics tags, etc Example WordPress Plugin

Server-side CSS (Advanced)

In the same way you can serve a different version of your website through your app. You may also apply custom CSS rules through your server. Detect the HTTP request coming from Median and then serve different or additional CSS resources from your server. More info about this technique: Custom User Agent

Learn more

• CSS Reference