Add a simple CSS alertbox

Adding a simple CSS alert box to your chevereto site makes it easier to let your visitors know if something is going on.

Step 1 – Add some custom CSS (dashboard -> settings -> theme) – Just copy & paste everything

/* The alert message box */
.alert {
    padding: 10px; /* adjust this one to get a thicker box */
    border-radius: 5px; /* remove this line if you want a square box without rounded corners */
    background-color: #f44336; /* Red */
    color: white;
    margin-bottom: 15px;
    margin: auto;
    max-width: 810px; /* adjust this one for box length */
    #margin-top: 50px;  /* uncomment "#" and adjust px for more air*/
}
/* The close button */ .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } /* When moving the mouse over the close button */ .closebtn:hover { color: black; }
Step 2. Insertion on page (dashboard -> settings -> banners)

Place this code where you want it to be displayed, typically before or after “call to action”

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
     Simple CSS alert Box - > Put your message here.
</div> <div id="powered-by" class="footer">Alertbox by <a href="https://freeimage.host" rel="generator">FREEIMAGE.HOST</a> image hosting</div>

You could also insert the alert box directly to the theme index. But if you are not comfortable customizing core files this is the easiest way. This code can be used everywhere, if you have another website running place the code accordingly (custom CSS and theme files)

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *