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; 
}

❗️

Use !important to prevent flicker

We recommend using the !important flag as shown in the above examples to prevent flicker. !important ensures your app's custom CSS rules always takes priority and override any other CSS rules on your website or external files which may load and be processed subsequently.

Use JavaScript to apply CSS rules

An alternative to adding Custom CSS embedded in your app is to use JavaScript on your hosted page to hide or show required elements when the page is displayed in your app. This adds more flexibility if you are changing the design of your site frequently. 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>

On WordPress you can add this JavaScript 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