How to change CSS in Template 35788 from Template Monster ?

Discussion in 'CSS' started by mirni, Oct 28, 2011.

0
  1. #1
    Hi!

    I am editing a travel template for prestashop, spcifically template 35788 from TM. It has a switching background that looks cool at 1st but it is totally unnecesary and for some users it'll take to long to download. I just want to have a single background image, say, bg1, and not 5 bg switching all the time.
    Here it is live demo: http://livedemo00.template-help.com/prestashop_35788/
    I'm not an expert so I ask for advice in order to know exactly how to achive this.
    I went to CSS folder and I see 3 files I must edit: global.css, global.css-- and global.css3.
    Before asking here, I tried luck editing those files but failed, basically what I think that must be changed is this part:

    /* —————————————————————————————— layout —————————————————————————————— */
#wrapper1 {min-width:1050px;min-height:100%;position:relative;}

.style1 {width:100%;min-width:1050px;min-height:100%;background:url(../img/bg1.jpg) 50% 0 no-repeat fixed;position:absolute;}
.style2 {width:100%;min-width:1050px;min-height:100%;background:url(../img/bg2.jpg) 50% 0 no-repeat fixed;position:absolute;}
.style3 {width:100%;min-width:1050px;min-height:100%;background:url(../img/bg3.jpg) 50% 0 no-repeat fixed;position:absolute;}
.style4 {width:100%;min-width:1050px;min-height:100%;background:url(../img/bg4.jpg) 50% 0 no-repeat fixed;position:absolute;}
.style5 {width:100%;min-width:1050px;min-height:100%;background:url(../img/bg5.jpg) 50% 0 no-repeat fixed;position:absolute;}

.hide {display:none;}

/* ————— background switch ————— */
#styleSwitch {position:absolute;right:46px;top:36px;}
#styleSwitch label {display:block;float:left;padding:0 11px 0 0;font:bold 13px "Arial";color:#000;}
#styleSwitch ul {float:left;}
#styleSwitch ul li {float:left;}
#styleSwitch ul li + li {padding:0 0 0 3px;}
#styleSwitch ul li a {width:17px;height:0;display:block;padding:17px 0 0 0;overflow:hidden;background:url(../img/bgswitch.png) 0 -17px no-repeat;}
#styleSwitch ul li.selected a {background-position:0 0;}

#wrapper2 {height:100%;}
#wrapper3 {width:1033px;margin:0 auto;text-align:left;}

#columns {width:988px;float:left;padding:43px 0 0 45px;background:url(../img/bg_columns.png) 0 bottom repeat-x #fff;}
body#index #columns {padding:32px 0 0 45px;}

#left_column {float:left;width:220px;}
#center_column {width:702px;float:left;margin:0 0 20px 21px;}
body#index #center_column {margin:0 0 0 21px;}
    Code (markup):

    How can I fix it in order to leave just bg1 as the bg image?
     
    mirni, Oct 28, 2011 IP
  2. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #2
    I have looked on the TM site and played around with the template demo.

    It is to do with the <div id="styleSwitch"> this is the five buttons that make the background change and if you take the div out then it won't give anyone the option to change your background. removing other code and CSS that is associated with this is also a good idea.

    However, if you are going to be changing this and you are not sure how it will affect the template make sure you have a back up of the template files before editing anything as if you do make a mess of things, and it is easy to do, then you can restart or even cut and paste the template back to how it should be.

    PM me if you need to
     
    Last edited: Oct 28, 2011
    Toycel, Oct 28, 2011 IP
  3. mirni

    mirni Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    ok, thanks for answering.

    I understand that I must remove all code under

    /* —————————————————————————————— layout —————————————————————————————— */
    and under
    /* ————— background switch ————— */

    But then , in what part of the css file and how I should set the background image?
    I want ../img/bg1.jpg to be the background
     
    mirni, Oct 29, 2011 IP