In each template's instruction page, we give you information about changing the logo area name from "Your Business Name" to your own. But your site name might be longer or shorter than our sample, you may or may not have a logo image, and you might need to replace the contents of the logo div area with your own site logo image.
If your template format is for Expression Web or Dreamweaver, you will edit your site name on the .dwt template pages. If you are using the generic version, you will edit each page.
The site name and slogan is plain text. The size, color, and font are set within the CSS file. To add your own business name and tag line, open the .dwt template(s).
Open the homepage.dwt. In Design View, click on the site name. In the Quick Tag Selector bar, click on the <div.logo>.
Switch to Code View and you should see the contents of the div highighted. Notice that the closing div tag is also highlighted. This is important. You know you are now in the right place. Type in your own site name and your slogan or catchy tag line. Switch back to design view.
Information on Font Awesome will be in the template's instruction file. You can change the icon by selecting another class name; from fa-leaf to fa-tag for example. There are over 600 to choose from.
Once again, click on the <div.logo> in the Quick Tag Selector bar. This will highlight your entire logo contents. Copy (Control + C) and then open another .dwt template page. On the newly opened .dwt page, place your cursor on the site name and click on the <div.logo> in the QTSB. When you see the contents highlighted, paste (Control + V) your contents to overwrite the old with the new. Quick and easy.
When you have pasted your new site name and slogan into all of the .dwt template pages you will be using. Save the pages and allow the attached pages to update. Congratulations. You have now changed your site name and slogan on all of the pages in your site.
To change the font, size, color, or other settings, open the default.css file and look for the following:
1If you do not have a stand-alone logo image without site name text, you can choose to not use it or have it redesigned so it is small enough for mobile devices. If your logo is over 5 or 6 years old, it is probably time for a logo redesign. Our sample logo image is usually 70x70 pixels or smaller. If you do not want an image, you can delete the line as shown in the code above. There are also a lot of icon-styled images you can use. With these images, you cannot trademark or copyright them, but can often use them in your web site. (Be sure to read over any terms of use related to an image you are planning to use.)
2If your site name is long, you may want to think of ways to shorten it. Long names will wrap to two or more lines on small devices and you may need to adjust the font size in both the main part of the CSS file and also in the media queries. If you look at the media query section in our templates, you will see that we reset the logo area font size for the various device sizes.
3You can replace our text and insert your own logo, assuming it is small enough to be viewed on mobile devices and will fit into the header area of the template. Ideally, your logo should have a transparent background (usually .png) so that the template's background area color will show through.
Yes, we hear this all the time. It's the web version of the fast food industry's "super-size me." It's a trend that, thankfully, has reversed to smaller and better. People buy benefits, not logos. For fun, watch the Make My Logo Bigger funny video.
Why have logos grown smaller? Because you can't display a logo that is 700 pixels wide and 200 pixels tall on a cell phone. It simply will not fit. Sure, you can have the image shrink to fit, but why do it when the reduced size will not be readable.
