Newsletter Pop Up

Hi,

How can I add the newsletter pop up seen in the latest Quark Store Theme into the original Quark theme?

Thanks in advance!

Hi,

The easiest way is to activate Quark Ecommerce child theme, because it requires modifications of the files:
footer.php
footer-frontpage.php
functions.php
js/functions.js
theme-customizer.php

the following custom css code:

Code: Select all

/* Newsletter popupt */
#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: 10 !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: 3.2rem;
  font-weight: bold;
  letter-spacing: 7px;
  text-transform: uppercase;
}
#gk-newsletter-popup p {
  color: #444;
  font-size: 1.6rem;
  line-height: 1.7;
  margin-bottom: 3em;
}
#gk-newsletter-popup small {
  clear: both;
  color: #999;
  display: block;
  font-size: 1rem;
  line-height: 18px;
  margin-top: 50px;
}
#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: #eba034;
}
#gk-newsletter-popup form {
  text-align: center;
}
#gk-newsletter-popup form input {
  border: 1px solid #ccc;
  color: #444;
  height: 52px;
  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: #eba034;
  border: none;
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0 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: 2.4rem;
  position: absolute;
  right: 20px;
  top: 10px;
}

#gk-newsletter-popup .widget_wysija_cont .updated,
#gk-newsletter-popup .widget_wysija_cont .error,
#gk-newsletter-popup .widget_wysija_cont .xdetailed-errors {
  margin: 30px;
  padding: 10px;
}

#gk-newsletter-popup .wysija-paragraph {
  display: inline-block;
  margin: 0;
}
@media (max-height: 700px),(max-width: 1040px) {
  #gk-newsletter-popup {
    padding: 20px;
    right: 32px;
    width: 420px;
  }
  #gk-newsletter-popup h3 {
    font-size: 2.4rem;
    letter-spacing: 2px;
  }
}
@media (max-height: 600px),(max-width: 720px) {
  #gk-newsletter-popup {
    display: none;
  }
}


and installing the MailPoet newsletter plugin with the form added as a widget.

Thanks so much for this info! I'll give this a go this a go.

Best regards,

Nathaniel