Skip to content

Caddify

Cloud & Mobile Applications for end-user Product Support & Education

  • How it works
  • Inspiration
    • Showcase
    • Case Study
  • Pricing
  • Blog
  • Login
  • Resources
    • Quick Launch Plans
    • Success Plans
    • Customer Programmes
    • Podcast
    • Help Centre
    • MobileCaddy
  • Create My App
  • Help Centre
  • Reference
  • Components

App Header

  • Caddify Components
  • App Header
  • App Banner
  • Button Grids
    • Creating a Button Grid
    • Button Navigation
    • Styling the Button Grid
  • Lists
    • Creating a List Screen
    • Configuring the List Component
    • Adding an Image to a List
    • Adding Search to Lists
    • Adding an Extra Field to a List
  • Themes & Styling
    • Adding a Custom Colour
    • Adding an Icon
    • Adding a Custom Font
  • Text
    • Text Components
    • Text in Lists & Content Screens

On this page

  • App Header Styling
    • Using an Image or Text
    • Styling Class
    • Changing Background Colour

In this article

  • App Header Styling
    • Using an Image or Text
    • Styling Class
    • Changing Background Colour

App Header Styling

Using an Image or Text

The App Header class controls several important elements. As seen here, you can choose to use Text for the header (or leave it blank, as in the screenshot below).

The second screenshot shows how you are also able to use an image, such as your logo, to serve as your app header. This does not have to be consistent throughout, and can be set independently on each screen. As seen below, the Display Type is now Image – Static, instead of Text -Static, as in the first screenshot.

To make this change, use the menu of Display Type to select the Swap function. By default, this will be set to text. Swap to an image, and use the media explorer to select your image. You can then set the Width required as appropriate.

Styling Class

Inside the Header Style class are the following options. This is controlled from within the General Settings part of the Header. This class can be used to set the Colour of the header, either to blend in or contrast with your page background. It can also be used to size the header, making it larger or smaller as required.  A default class is provided, which simply aligns the header colour with that of the page Background Colour.

 

Changing Background Colour

In a new Header, there will be no option for Page Background Colour before it is added. Without adding this element, the Page Colour will be controlled by the default styling elements.

The page Background Colour is also controlled from within this Header section. Edit the Page Background Colour from its menu, and either select from the options available, or create a new class.

To create a new Background Colour class, use the ‘+’ arrow in the General Settings for Page Background Colour.

In the newly created class, you are able to select from the Custom Colours or defaults provided. If the colour you require is not available in this menu, then it must be added as a Custom Colour. The guide for this is here.

New to Caddify?

  • What is a Companion App platform?
  • What is Caddify?
  • How does Caddify work?
  • Video introduction series
  • Arrange a demo
  • Start free trial

Resources

  • Quick Launch Plans
  • Success Plans
  • Customer Programmes
  • Podcast
  • Pricing
  • Help Centre

Company

  • Blog
  • Privacy Policy
  • Terms of Use
  • Contact Us

Caddify

  • social-yt
© 2025 Caddify