This is a request from an user of flarumtr.com, so i wrote this very quickly in the past minutes.
is under minimal mantainance
First Visit Popup
Show a modal popup only at the first visit of a user
A Flarum extension. First Visit Popup
Usage
Fill the extension settings with your own html and css... for example
<style>
.offerBtn {
background-color: rgb(56, 154, 220);
box-shadow: inset 0px 5px 0px 0px rgba(255, 255, 255, 0.15);
width: 420px;
height: 100px;
z-index: 82;
display: block;
position: relative;
overflow: hidden;
font-family: 'Raleway', sans;
cursor: pointer;
transition: all .2s;
}
.offerBtn:hover {
background: #3CBD45;
}
.offerBtn:active {
-webkit-box-shadow: 0px 0px 15px 0px rgba(27,199,0,1);
-moz-box-shadow: 0px 0px 15px 0px rgba(27,199,0,1);
box-shadow: 0px 0px 15px 0px rgba(27,199,0,1);
}
.offerBtn img {
height: 80px;
top: 10px;
position: absolute;
left: -5px;
opacity: .15;
}
.offerBtn span {
position: absolute;
}
.btnIcon {
top: 24px;
left: 50px;
}
.st0 {
fill: #FFFFFF;
}
.st1 {
fill: #FFFFFF;
fill-opacity: 0.5;
}
.text1,
.text2,
.text3 {
color: #FFF;
font-weight: 800;
}
.offerBtn:before {
content: '';
display: block;
height: 500px;
width: 500px;
position: absolute;
background-color: rgba(255, 255, 255, .15);
transform: rotate(-45deg);
top: -200px;
left: -330px;
transition: all .2s;
}
.offerBtn:hover:before {
left: -300px;
}
.text1 {
font-size: 36px;
line-height: 1em;
left: 25px;
top: 13px;
}
.text2 {
font-weight: 300;
right: 42px;
bottom: 10px;
}
.text3 {
top: -5px;
right: 40px;
font-size: 70px;
font-family: 'Open Sans', sans;
font-weight: 400;
letter-spacing: -4px;
}
.text4 {
transform: rotate(-90deg);
right: -39px;
top: 37px;
background: yellow;
padding: 7px 10px;
font-size: 11px;
text-transform: uppercase;
}
.maindiv {
display:flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
</style>
<div class="maindiv">
<a class="offerBtn">
<img src="https://www.lawgeex.com/wp-content/themes/Lawgeex2015-child/images/contracticon.svg" alt="icon">
<span class="text1">Get Your<br/>Full Report</span>
<span class="text2">click here</span>
<span class="text3">$20</span>
<span class="text4">Special Offer</span>
</a>
</div>
Installation
Install with composer:
composer require justoverclock/first-visit-popup:"*"
Updating
composer update justoverclock/first-visit-popup:"*"
php flarum cache:clear
