Create a image on photoshop (for example) with transparent background and save it as a .png extension. For example: I created my logo, necessarily, with 366 x 102 px and called "logo.png". If I upload the image to .../images/logo.png, my logo will be show as 220 x 50 px, with weak quality (forced resize) and not the size i need.
What to do?
Open the template_css.css file on the css template folder, and search for this code:
- Code: Select all
/* Major Blocks-------------------------------------------------------------------------------*/
div.pagewrap {
width: 960px;
margin: 0 auto;
text-align: left;
}
div#topwrap {
height: 70px;
line-height: 70px;
width: 100%;
}
#logo {
background: transparent url('../images/logo.png') no-repeat 0 50%;
width: 220px;
height:70px;
display: block;
float: left;
}
div#bannerwrap {
float: right;
height: 60px;
overflow: hidden;
width: 468px;
margin-top: 5px;
}
Now I will make this changes, to put my logo with right size and to make it work with menu position. Changes are color.
/* Major Blocks-------------------------------------------------------------------------------*/
div.pagewrap {
width: 960px;
margin: 0 auto;
text-align: left;
}
div#topwrap {
height: 102px;
line-height: 102px;
width: 100%;
}
#logo {
background: transparent url('../images/logo.png' ) no-repeat 0 50%;
width: 366px;
height:102px;
display: block;
float: left;
}
div#bannerwrap {
float: right;
height: 102px;
overflow: hidden;
width: 468px;
margin-top: 5px;
}
That's it.
Hope that I can help someone with this.
