ImprovementCustom CSS Theme

  • Author
    Posts
  • Rajesh Patel
    Participant

    Well, I have customized the look of the popup. If you wish to have the same then copy the existing css on your spu.css (plugin folder/assets/css).

    Theme 1

    Theme 2

    Demo: http://firmwarefile.com/category/bsnl

    CSS Code (without background image):

    #spu-bg{display:none;position:fixed;height:100%;width:100%;top:0;left:0;background:#000;z-index:9999998}#spu-main{min-width:320px;max-width:420px;position:fixed;left:-99999px;background:#fff;z-index:9999999;margin:0;padding:0;box-shadow:0 4px 16px rgba(0,0,0,.2);border:10px solid #439e47;outline:0}#spu-close{float:right;font-size:12px;color:#000!important;margin:0 13px 0 0;border-bottom:0!important;text-decoration:underline!important}#spu-close:hover{text-decoration:none!important}#spu-bottom{padding:5px 10px 10px 0}#spu-counter{font-size:11px!important;text-align:right}.spu-button{overflow:hidden}.spu-button.first{margin-left:0}#spu-timer{position:absolute;left:4px;bottom:0;font-size:11px}@media only screen and (max-width: 620px){#spu-main{max-width:300px}}#spu-title{font-weight:700;margin:15px 0;margin-top:0;border-bottom:1px solid #439e47}#spu-body{padding:15px}#spu-main{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}.spu-button{display:inline-block}.spu-facebook{margin-bottom:10px;width:150px}#spu-close{right:0;margin:0;padding:0 8px;color:#bbb!important;font-size:10px;font-family:arial;text-decoration:none!important}.spu-button.spu-twitter{margin:0 auto;width:100%}

    CSS Code (background image):

    #spu-bg{display:none;position:fixed;height:100%;width:100%;top:0;left:0;background:#000;z-index:9999998}#spu-main{min-width:320px;max-width:420px;position:fixed;left:-99999px;background:url(https://westsidemommy.files.wordpress.com/2012/09/namasteyoga.jpg);z-index:9999999;margin:0;padding:0;box-shadow:0 4px 16px rgba(0,0,0,.2);border:10px solid #439e47;outline:0}#spu-close{float:right;font-size:12px;color:#000!important;margin:0 13px 0 0;border-bottom:0!important;text-decoration:underline!important}#spu-close:hover{text-decoration:none!important}#spu-bottom{padding:5px 10px 10px 0}#spu-counter{font-size:11px!important;text-align:right}.spu-button{overflow:hidden}.spu-button.first{margin-left:0}#spu-timer{position:absolute;left:4px;bottom:0;font-size:11px}@media only screen and (max-width: 620px){#spu-main{max-width:300px}}#spu-title{font-weight:700;margin:15px 0;margin-top:0;border-bottom:1px solid #439e47}#spu-body{padding:15px}#spu-main{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}.spu-button{display:inline-block}.spu-facebook{margin-bottom:10px;width:150px}#spu-close{right:0;margin:0;padding:0 8px;color:#bbb!important;font-size:10px;font-family:arial;text-decoration:none!important}.spu-button.spu-twitter{margin:0 auto;width:100%}

    You can replace the Image url whatever you want.

    #3481
    iLen
    Keymaster

    It looks cool 😉
    Do not forget to vote 5 stars for plugin 🙂

    #3489
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.