Please follow the steps below to change the CSS of the logo:
4. Open the “main-responsive.css” file using Notepad. The file is located in “templates/default/css.”
5. Locate the codes below:
#vp_logo img, .vp_logo img {
width: 100%;
max-width: 400px;
margin-top: 10px;
margin-top: 10px;
}
Directly update the CSS above to reflect your own logo style. You need to be familiar with CSS in order to update this.
For more information about CSS, please refer to:
http://www.w3schools.com/Css/default.asp
For example, if you wish to change the logo to display using a blue background, then update the CSS to:
. #vp_logo img, .vp_logo img {
width: 100%;
max-width: 400px;
margin-top: 10px;
margin-top: 10px;
background-color: #0000FF;
}
6. Save the file and upload to the “templates/default/css” folder.
Preview before the changes:
After changes:
NOTE: The preview shown above is just an example of how to change the logo style. You can, of course, change any of the CSS codes inside the #vp_logo img, .vp_logo img { } to create your own style.