How to use transparent header on simple template


In this entry, I will teach you on how to edit your Simple Template until you are able to get a clear transparent background in order to use a transparent header. 

This is the original style of Simple Template, now what we want to do is remove the white background behind the header (only) so that the header is see-through. 

1. Before starting, I recommend you guys to backup your template first so that any mistakes can be recovered. 
2.Search for .content-inner {
3. Now look at this codes under/after .content-inner { and delete them. 
$(content.background.color.selector) {
  background-color: $(content.background.color);
Upon saving, your blog will look like this, now we gonna add background on the body of the blog.

4. Now search for .main-inner {.
5. Copy this codes and paste it under/after .main-inner {.
Background: #ffffff;

Save and tadaaaaaaaa. Now you can have the transparent header look. Goodluck in trying and I will update on how to make your header center. Thank you for reading. 

Labels: