Style you Top-Hat to help it stand out even more.

This is how the Top-Hat looks by default. By adding some CSS code we can change the look to grab the attention of your visitors. Below are instructions and the CSS code we use on this website.

After adding the custom CSS code, this is how the Top-Hat can look.

Instructions:

1. Be sure to log into your website as an administrator
2. Select the “Themes” (paint brush icon) in the dark gray Admin menu on the left side of your screen.
3. Next, select the “Edit Custom CSS” link directly under the “Preview & Customize” button. 
4. Add your custom code into the bottom of the editor window.
5. In the bottom left corner of the editor, click the blue “Save” button.

Here is the base code that you can modify:

body#body {
    padding-top: 60px !important;
}
.su-sitehat-container {
    background: #ff3a3a !important;
    color: #FFFFFF !important;
    max-height: 60px !important;
    text-align: center !important;
    font-weight: bold;
    font-size: 20px !important;
    border: 3px solid #bf0000;
    border-radius: 7px
}
.su-sitehat-container a {
    color: #ffffff !important;
    font-size: 20px !important;
    text-decoration: none !important;
}

You can modify this CSS code to meet your specific needs.