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
  • Create Blocks
  • Configuring the footer
  • Footer examples

Was this helpful?

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

Footer

PreviousSignupNextFooter logo

Last updated 1 year ago

Was this helpful?

The Footer is a global element that sits at the bottom of every page on your site. Common Footer elements are Logos, Social links, Footer navigation, Acknowledgement of Country, Copyright and Privacy information.

The Footer is created using a series of Blocks. Build your footer using Block types of "Component", "Social Links" and "System".

Some Blocks used in the Footer area available out of the box. You can configure certain settings to suit.

Create Blocks

Before you can build your Footer you need to create all the blocks that will make up the Footer.

From the list below, follow the steps to create the Blocks you wish to use.

The instructions on how to place the Blocks in the correct region are on each page.

Configuring the footer

You will need to be logged in as the "Site Administrator" role.

  1. Go to /admin/appearance/settings/<site-name> or Appearance in the menu, find your site and select "Settings".

  2. Scroll down the page until you see the "Components" section, and select "Footer".

Theme

Use the Theme radio buttons to set the footer in Light or Dark theme.

Note: the Theme you set here for the global Footer configuration must match the Theme you set on the Blocks you're using to create the Footer. For example, you must set the "Social links" Block to Dark if you set your Footer Theme to Dark.

Background

You can choose to display a background image on your footer. However, keep in mind that a detailed image could create issues with accessibility if the written content in the footer can't be read on top of the image.

  1. In the "Footer background image path" section, upload a background image, or paste in the path to the image if it's already in the media library.

Footer examples

Note: The footer column headings are switched off in these examples, further screenshots to come to illustrate the footer column headings.

Light theme Default desktop

Light theme Default mobile

Light theme Stacked desktop

Light theme Stacked mobile

Dark theme Inline desktop

Dark theme Inline mobile

Dark theme Inline stacked desktop

Dark theme Inline stacked mobile

Footer logo
Social links
Footer navigation
Acknowledgement of Country
Copyright
Footer configuration
Footer with Background image
Light theme desktop Footer with Logo set to Default
Light theme mobile Footer with Logo set to Default
Light theme desktop Footer with Logo set to Stacked
Light theme desktop Footer with Logo set to Stacked
Dark theme desktop Footer with Logo set to Inline
Dark theme mobile Footer with Logo set to Inline
Dark theme desktop Footer with Logo set to Inline stacked
Dark theme mobile Footer with Logo set to Inline stacked