[karina]

Originally Posted by UMI Pearls

I am not sure if this was already asked, but can we customize the look of the popup? like instead of squares or rectangle we'll use circle and transparencies?

tia

You can create popup based on custom template and use your own CSS styles to make any shape you want in the current version of the module.

Below is the small tutorial 'How to make circle popup':

1. Log in as administrator, open Content -> Edit templates page and open 'skin/common_files/modules/Popup_Anywhere/custom_templates' directory.

2. Create new tpl file, let's call it 'circle_sale_info.tpl'. And edit this file by adding the following content:

{*
v1, 2013-08-19 11:52:57, custom_circle.tpl, karina
vim: set ts=2 sw=2 sts=2 et:
*}
<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<style type="text/css">
{literal}
  .popup-anywhere.ui-dialog {
  width: 350px !important;
  height: 350px !important;
  background: #FE642E;
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  border-radius: 50% !important;
  }

.popup-circle-content {
  padding-top: 35px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  font-family: 'Handlee', cursive;
  font-size: 26px;
  text-shadow: 1px 1px 1px #F3F781;
  font-weight: bold;
  line-height: 40px;
  color: #585858;
}

span.dates {
  font-size: 18px;
}

.popup-circle-content .popup-btn-close {
  position: relative !important;
  top: 0px !important;
  right: 0px !important;  
}

.popup-circle-content .title {
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 10px;
}

.popup-circle-content a {
  color: #585858;
  font-size: 24px;
  text-shadow: none;
  text-decoration: none;
}

.popup-circle-content a:hover {
  text-shadow: 1px 1px 1px #F3F781;
}
{/literal}
</style>


<div style="display:none">

  <div id="dialog-{$popup_id}" title="">
    <div class="popup-circle-content">
      OUR<br />GREAT SUMMER SALE<br /> IS STARTED!<br /><br />

      <span class="dates">AUGUST 20TH - 28TH</span><br /><br />

      <a href="on_sale.php">START SHOPPING</a>
    </div>
  </div>

</div>

(please, note '<div style="display:none">' and '<div id="dialog-{$popup_id}" title="">' are mandatory blocks)

3. Save new template.

4. Open Content->Pop-ups management page and add new pop-up.

5. Configure 'General pop-up settings' section as you wish.

6. In the 'Configure pop-up content' choose 'Pop-up content is defined in the template' option and select 'circle_sale_info.tpl' in the selector.

7. Configure other popup settings as you wish. I've defined popup location as 'In the center of window'.

8. Save pop-up settings and open customer area to check pop-up.

The popup created by this way will look like this:
http://dev.qtmsoft.com/~karina/images/popup_anywhere_customer_popup_circle.png