Announcement

To create the Annoucement block for your site, follow these instructions.

1) Click on Manage Content to open the In-page Designer Tools.

2) Next, select the Create Content option in the lower left. This starts the process of adding a new component to your site. You will be presented with a list of options that you can select to start building content.

3) Choose the Basic Block option. This is the most vanilla component and has no styling applied to it, so we can do whatever we want with the traditional editor toolbar next.

4) Fill out the Block Description

5) Click on the Source button to access the HTML for this block directly. It will appear empty at first, so we need to copy the HTML/CSS below this image and paste it directly into the Body area next.

Important: You will want to change the text for the actual message and also the link portion (href="/annoucement") to match your needs.

When your screen looks like the image above, you are ready to create and place the announcement on your page.

6) Scroll down below the Body and then click on the Create and Place button. This will prompt you to place this content directly on your page next.

7) Uncheck the Display Title option, so we don't see the title Announcement before the content.

8) Click the Add button to place this block directly on your page.

<div class="alert alert-dismissible cwb-alert-wrapper" role="alert"><button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">×</span></button><span class="cwb-alert-msg">Effective, Monday, 3/23/2020 at 8:00 a.m., your local Touchstone Energy Cooperative, Inc. offices will be CLOSED to public access. You may pay your bill by phone, by mail, or through the use of the drop box. Payments left in the drop box must have a PAYMENT STUB! We are taking these measures to protect our employees, our Members/Consumers. Thank you for your cooperation and business! - Management</span><a class="cwb-alert-link--bordered btn-primary" href="/announcement" target="_blank">Read more</a></div>

<style type="text/css">
.region-header-top { min-height: 0px; }
.region-header-top .block__content {
    padding: 0;
}
.cwb-alert-wrapper {
    background: darkred;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-bottom: 0;
    border-radius: 0;
}
a.cwb-alert-link--bordered.btn-primary {
    padding: 8px;
}
.cwb-alert-wrapper button.close {
    top: 0;
    right: 0;
    left: 0;
    background: rgba(255,255,255,0.45);
    color: #fff;
    padding: 6px 15px 12px;
    opacity: 0.6;
}
.cwb-alert-wrapper button.close:hover, .cwb-alert-wrapper button.close:active, .cwb-alert-wrapper button.close:focus {
    opacity: 1;
}
.cwb-alert-wrapper span.cwb-alert-msg {
    padding: 0 32px;
    max-width: 1000px;
}
.cwb-alert-wrapper a.cwb-alert-link--bordered {
    color: #fff;
}

@media (max-width: 767px) {
    .cwb-alert-wrapper {
        flex-direction: column;
    }
}
</style>