Header Announcement Area

Header Announcement Area

A clear area to make text-based announcements, for example, closing times over the Christmas holiday period.

Industries

All industries.

Wireframe

Wireframe

Coding Instructions

Step 1. Add the HTML

Open /httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html, and add the below code directly beneath the opening body tag:

[%set [@header_announcement@]%][%content_zone id:'header_announcement'%][%/content_zone%][%/set%]
[%if [@header_announcement@] ne ''%]
    <div class="container header-message">
        <div class="row">
            <div class="col-xs-12">
                [@header_announcement@]
            </div>
        </div>
    </div>
[%/if%]

Using the set function to load the content zone into the [@header_announcement@] tag means we can ensure the div.container.header-message element and all it's children, will only render if there is content within the announcement. This means you can apply your own custom styling to this element and not have to worry about it displaying when the content zone is left empty.

You can read more about the set function here.

Step 2. Add the content zone

Create a new content zone in the cPanel with the zone name header_announcement, and add some text into the content area to test.

Final Result

Final Result

Download Files

Download Files


Was this article useful?

Be notified when this page is updated. Optional.