Pop up for sign up for newsletter

There is a pop up on the hotel template. https://demo.gavick.com/joomla3/hotel/
Is there a way to implement this pop up with the instyle template?

Hi

Which popup You have in mind ? The login one ? If yes than I'm afraid this is above our support, sorry.

Not the login. When you scroll down the page, a pop up comes up. I want that one

This is the newsletter pop up in the "hotel"template

Where can I find the module styling for this pop up.. maybe I can edit the css with this one. Please help. These are two gavick templates and I just want to know how the newsletter pop up from the hotel template can be used with the instyle template.

Hi

Moving this module to a different template will require a lot of work and it's above our support. I can only help with some tips.

Modules's code (Custom HTML module)

Code: Select all

<h3>
     Sign up to keep in touch!
</h3>
<p>
     Be the first to hear about special offers and exclusive deals from Villa Belluci and our partners.
</p>
<form action="index.php?option=com_acymailing&amp;ctrl=sub" method="post">
     <input type="email" required  id="user_email" name="user[email]" placeholder="enter email address">
     <input type="submit" value="Submit" id="gk-newsletter-submit">
     <input type="hidden" name="acyformname" value="formAcymailing1" />
     <input type="hidden" name="ctrl" value="sub"/>
     <input type="hidden" name="task" value="optin"/>
     <input type="hidden" name="option" value="com_acymailing"/>
     <input type="hidden" name="visiblelists" value=""/>
     <input type="hidden" name="hiddenlists" value="1"/>
     <input type="hidden" name="user[html]" value="1"/>
</form>
<!-- Configuration details: https://www.acyba.com/acymailing/248-acymailing-external-subscription-form.html -->

<small> Check out our <a href="#">Privacy Policy</a> & <a href="#">Terms of use</a><br />
You can unsubscribe from email list at any time </small>


PHP needed to make it worki:

Code: Select all

    <?php if($this->API->modules('newsletter') && !isset($_COOKIE['gk-newsletter-popup'])) : ?>
    <div
       id="gk-newsletter-popup"
       data-display="<?php echo $this->API->get('newsletter_display', 'after_time'); ?>"
       data-scroll="<?php echo $this->API->get('newsletter_scroll', '1000'); ?>"
       data-time="<?php echo $this->API->get('newsletter_time', '10'); ?>"
       class="hidden-popup"
    >
        <a href="#" id="gk-newsletter-popup-close">&times;</a>
         <jdoc:include type="modules" name="newsletter" style="none" />
    </div>
    <?php endif; ?>


Javascript:

Code: Select all

   // Newsletter popup
   var newsletter_submit = jQuery('#gk-newsletter-submit');
   
   if(newsletter_submit.length) {
      newsletter_submit.click(function() {
         jQuery.cookie('gk-newsletter-popup', 1, { expires: 30, path: '/' });
      });
      
      jQuery('#gk-newsletter-popup-close').click(function(e) {
         e.preventDefault();
         
         jQuery.cookie('gk-newsletter-popup', 1, { expires: 30, path: '/' });
         jQuery('#gk-newsletter-popup').addClass('hidden-popup');
      });
   }


CSS:

Code: Select all

#gk-newsletter-popup {
  background: #fff;
  bottom: 0;
  -webkit-box-shadow: 0 0 50px #ccc;
  -moz-box-shadow: 0 0 50px #ccc;
  box-shadow: 0 0 50px #ccc;
  opacity: 1;
  padding: 50px 50px 40px 50px;
  position: fixed;
  right: 125px;
  text-align: center;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  width: 480px;
  z-index: 9999999999 !important;
}
#gk-newsletter-popup.hidden-popup {
  opacity: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
#gk-newsletter-popup h3 {
  color: #000;
  font-size: 26px;
}
#gk-newsletter-popup p {
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 3em;
}
#gk-newsletter-popup small {
  color: #999;
  display: block;
  font-size: 10px;
  line-height: 18px;
}
#gk-newsletter-popup small a {
  color: #999;
  text-decoration: underline;
}
#gk-newsletter-popup small a:active,
#gk-newsletter-popup small a:focus,
#gk-newsletter-popup small a:hover {
  color: #e1a232;
}
#gk-newsletter-popup form {
  margin: 0 0 50px 0;
}
#gk-newsletter-popup form input {
  border: 1px solid #bbb;
  color: #333;
  height: 41px;
  padding: 0 25px;
}
#gk-newsletter-popup form input::-webkit-input-placeholder {
  color: #999;
}
#gk-newsletter-popup form input::-moz-placeholder {
  color: #999;
}
#gk-newsletter-popup form input:-moz-placeholder {
  color: #999;
}
#gk-newsletter-popup form input:-ms-input-placeholder {
  color: #999;
}
#gk-newsletter-popup form input[type="submit"] {
  background: #e1a232;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  margin-left: 10px;
  position: relative;
  top: -1px;
}
#gk-newsletter-popup form input[type="submit"]:active,
#gk-newsletter-popup form input[type="submit"]:focus,
#gk-newsletter-popup form input[type="submit"]:hover {
  background: #000;
}
#gk-newsletter-popup-close {
  font-size: 24px;
  position: absolute;
  right: 20px;
  top: 10px;
}