Tutorial Transparent Header on Simple Template

What is Header Transparent on Simple Template?
Usually, when you choose Simple Template, you'll found that background of your header is white right? Look photos below for clear explanation. 

Header with White Background
Then, it will become like the second photos below after transparent. I hope you understand what I'm talking about.
White Background was removed / transparent
Step ;
1. Design > Edit HTML
2. Ctrl+F to find this code : /* Mobile
3. Copy code below and paste before / above /* Mobile :
.header-outer, .content-inner { background-color: transparent; }.main-outer, .tabs-outer { background-color: $(content.background.color);}
4. Preview first. Then, continue with second code. Now you have to find (Ctrl+F) this code : .content-outer {  
5. Below the .content-outer { , you'll see some code like below ;
.content-outer {  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
6. REMOVE the code below. Then, it'll be like this :
7. After that, save. Ask me if you're not clear with it. 

3 comments:

  1. saya punya tak boleh sebab bila find '/* Mobile' takde ~ Macam mana~~~ rep this comment at my twitter maybe? https://twitter.com/AidaFaridahh

    ReplyDelete
    Replies
    1. awak guna simple template juga ke ? cuba cari code lain yang berkenaan. ok, will rep on twitter ^^

      Delete

I don't approve harsh comments (: