Alert Box – an easy site improvement

Now for some fun stuff! In this post I’ll show you how to add an Alert Box to your website by adding a little bit of code (don’t worry you can copy and paste everything so you don’t have to know how to code or even how to spell code).

The code we are going to add will allow an alert message to appear on your website’s main or welcome page. The message can be used to highlight things like changes being made to the website (like the example below), that the weekly Bible Study is cancelled due to inclement weather, or as a reminder to register early for VBS. You can make the alert message anything you like.

One word of caution: This is a simple example and doesn’t have all sorts of bells and whistles like saving alerts for re-use or setting an automatic removal time for the alert. With this code, for all those good things to happen, human intervention is required.

Here’s the code that you will need to copy and paste into your website’s front page:

<div class="it4w-alert-notice"><h1>REPLACE THIS TEXT WITH YOUR MESSAGE</h1></div>

This code is called HTML (Hyper-Text Markup Language) and is used to place “elements” on a web page, which you’ve just done by adding it to your front page.

Once you’ve inserted the text for your own message, you will see the message appear. By inserting and removing the text in this code you will automatically toggle the box on and off, respectively.

You should be aware, it will not look pretty at this stage of our exercise. That will happen when you add the following statements to the “Custom User CSS” section of your theme (more on what that means in a moment).

.it4w-alert-notice h1 {
background-color:yellow;
color:black;
padding:10px;
border: solid 3px darkblue;
border-radius: 10px;
}

This piece of code is called CSS (Cascading Style Sheets) and is used to format HTML elements like the Alert Box.

Now its your turn to try this out. Good luck and let me know how it turns out!

 

The following comments assume you have a PCCWeb WordPress site, and that you are familiar with how to log on to the administrative portion of your site. If you have a WordPress site that’s not provided by PCCWeb, please use the comments below and I’ll try to guide you as best as possible. Next week we’ll talk about some of the differences between PCCWeb sites and other WordPress sites.

Where do I find the Custom User CSS section you mentioned?
After logging on to your PCCWeb site, click on Appearance on the left side of the page, then on Custom User CSS. Copy and paste the code above into the Custom User CSS box and click on “Save Changes”.

How do I know which is my website’s main or welcome page?
WordPress does a great job of identifying the main page of a website. After logging on to the site, click on “Pages” on the left pane and wait for the page list to appear. Then just look down the list for the page title that has the words “Front page” beside it. That page is your main page.

What happens when I remove the text in the Alert Box?
When you remove your message, the Alert box will toggle off and will be replaced by an unobtrusive horizontal line.

Can the Alert Box appear on any other pages besides the main page of the site?

Yes it can. You simply need to copy the HTML above to the required page and insert your new message for that page. The boxes on the main page and the new page will be formatted identically but the messages will be as you have specified.

Please let me know if you’ve found this post useful (or not) and if you have any follow up questions.