Skip to content

Styling the App

Styling the App via CSS

CSS is a sister technology to HTML (the programing language we use to produce web pages). CSS is an acronym for Cascading Style Sheets. The main idea is that CSS allows you to have a separate sheet that only contains the formatting and styling information. To the end that we can have one page that has all of the style information for the whole App as well as any custom pages that we may add to the App.

The Cascading part of Cascading Style Sheets allows us to have style information in multiple files or places that still function in a predictable way.

3 places to insert style information

  1. Global CSS Style Sheet
  2. Style information at the beginning or each individual page
  3. Style modifiers inserted into an HTML element.

NOTE: In the “Example Home Page for the App” and “CSS Template for the App” help pages you will find a template for modifying your church’s App based on the work of Calvary Chapel Rosarito. Their implementation includes a styled menu, button, a tool bar for the home page and tiled buttons for the home page to provide a simple and attractive interface for your users.

The first style sheet loaded for the App is found in “Church Admin” –> “App” –> “Settings”. The style information in that CSS page will apply globally to every page in the app.

background-color: black;
font-family: Helvetica;

Secondly, that sheet can be supplemented by adding style information via style tags (<style> … </style>) on a specific App Content page. Those style declarations will only affect that one page.

<style>
background-color: black;
</style>

<p>
Hello world
</p>

Lastly we can even insert style information directly into the HTML code of any given page via the style=”…” modifier. These style modifiers will only affect the one HTML element that they are a part of.

<p style="blue">
Hello world!
</p>

The way that CSS Cascades is that the most specific style information will overwrite or overrule the more general style information. For example, if the global CSS file states that the background for the whole app will be black but the home page style information specifies that the background will be white, then the home page background will be white while the rest of the pages will be black. This is because the declaration for black background for the whole site is considered more general that the more specific specification of white background for the home page. If we were to specify a blue background for a single paragraph on the home page that would be interpreted as more specific yet and the blue would overwrite or overrule the more general style declaration of white background for the home page but only for the single paragraph. The result is an App with black backgrounds for every page except for the home page that has a white background with the single paragraph that has a blue background.

Limitations

No Short Codes

The App Content pages are not WordPress driven pages and, therefore, cannot utilize short codes.

No <head> section

Because the “In-App-Browser” on iPhone and Android are not full featured browsers and because our App Content pages are created and stored on WordPress we have to live with some limitation. Namely, we don’t have access to the <head>…</head> section of the page.
This means that we cannot import or reference external css files by using the At-Rule @import i.e.

@import url("chrome://communicator/skin/");

Or by

<html>  
    <head>  
        <link rel="stylesheet" href="styl.css">  
    </head>  
    <body>  

No @import for fonts or css

We also cannot import fonts because of the same problem but here is a workaround that can be used on the App Content pages directly.

See the help page on “Add Font to App Content” for a work around solution.