I have modified the code a little bit to add persistence when close button is clicked.
With little js code, we can keep the alert box hidden once visitor closes it.
Step 1 - Add some custom CSS (dashboard -> settings -> theme) - Just copy & paste everything
[CODE lang="css" title="css" highlight="30-32"]/* 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: 820px; /* 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;
}
.hide {
display: none;
}[/CODE]
Step 2 - Add some custom javascript (dashboard -> settings -> theme) - Just copy & paste everything
[CODE lang="javascript" title="js"]document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let dismissButton = document.getElementById("dismiss");
let alertDiv = document.getElementById("warning");
if(!dismissed){
alertDiv.classList.remove("hide");
}
dismissButton.addEventListener("click", function(){
alertDiv.classList.add("hide");
sessionStorage.setItem("dismissed", true);
});
});[/CODE]
Step 3. Insertion on page (dashboard -> settings -> banners)
[CODE lang="html" title="Alert box html"]<div class="alert hide" id="warning">
<span id="dismiss" class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<span class="fas fa-exclamation-triangle"></span> Your message here.
</div>[/CODE]
Optional: If you just want to show the alert box to logged in users, use the following code, and paste it inside chevereto theme file on your installation, wherever you want to show it.
For example, if you just want to show the alert box on user profiles. Copy
/app/themes/Peafowl/views/user.php to
app/themes/Peafowl/overrides/views/user.php
Now open app/themes/Peafowl/overrides/views/user.php to edit and search for:
[CODE lang="php" title="banner"]<?php CHV\Render\show_banner('user_before_listing', get_list()->sfw ?? true); ?>[/CODE]
Paste the code below after above line:
[CODE lang="php" title="show alert only to logged in users"]<?php if (CHV\Login::isLoggedUser()) {
?>
<div class="alert hide" id="warning">
<span id="dismiss" class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<span class="fas fa-exclamation-triangle"></span> Your message here.
</div>
<?php
} ?>[/CODE]
