CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • Adding / updating logos
  • Configure the Header logos
  • Logo examples in the Header

Was this helpful?

Edit on GitHub
Export as PDF
  1. Content Authoring
  2. Global settings
  3. Header

Header logos

PreviousSite sloganNextPrimary navigation

Last updated 4 months ago

Was this helpful?

CivicTheme allows several Header logo configurations.

You can add up two logos, a Primary and a Secondary logo. The Secondary logo is useful in the case of dual branding, e.g. your Department logo and the Commonwealth Coat of Arms.

Once you have uploaded your logo you can then select how you want the logo/s to display in the Header.

When you set the Header Theme, Light or Dark, you need to consider the logos you've uploaded. If you use the Light theme, your logo needs to be dark enough to be visually accessible on the light background. If you use the Dark theme, you need to ensure you're logo is light enough that it will be visually accessible on a dark background.

Adding / updating logos

The process is the same for the Primary and the Secondary logo.

  1. Go to /admin/appearance/settings/<site-name>.

  2. Scroll down to Components.

  3. Select Logo.

  4. Fill in the alt text for the logo first (so you don't forget later).

  1. Open the Primary logo dropdown and take note of which logos need to be added for which use: Light and Dark theme, desktop and mobile use.

  2. Select Choose file and follow the steps to add the logo. Do this for every logo type for the Primary logo.

  1. If you're using a Secondary logo, open the Secondary logo dropdown and follow the same steps.

  2. Scroll to the bottom and select 'Save configuration'.

Configure the Header logos

Logo type

Depending on the space within your site's 'Header', you can select how the Logo/s display.

The following table illustrates the different Logo styles using example logos:

  • Default

  • Stacked (requires two logos)

  • Inline

  • Inline stacked (requires two logos)

Logo type

Desktop output

Mobile output

Default Uses the Primary logo only

Stacked Uses both the Primary & Secondary logos

Inline Desktop uses both Primary & Secondary. Mobile uses Primary only.

Inline stacked Desktop (inline) & mobile (stacked) both use both Primary & Secondary logos.

Logo examples in the Header

Light theme desktop

Light theme mobile

Dark theme Inline stacked (logo) desktop

Dark theme Inline stacked (logo) mobile

'Default' Logo desktop (Light theme)
'Inline' Logo desktop (Dark theme)
Light theme desktop Header with Logo set to Default
Light theme mobile Header with Logo set to Default
Dark theme desktop Header with Logo set to Inline stacked
Dark theme mobile Header with Logo set to Inline stacked