graphic-logo

Graphic Logo

We include a snazzy little graphic logo that you can choose to keep, remove, or use the space to place your own company graphic within the page.

Tips


Instructions

Updating / inserting a Graphic Logo

In this tutorial, we’ll demonstrate how to replace or insert your own graphic logo.

  1. you can use BOTH the text ‘website name’ and a graphic logo

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/oEyMAAvpZLA

  1. drag your graphic logo image into your ( Library / shared ) folder, or any preferred folder in your website, or create a new folder just for your logo or shared Library images
  2. Expand the [ + ] Library (folder)  >> shared (folder) if it’s not already expanded
  3. Open the ‘graphic logo’ page
  4. Locate the graphic logo image you just imported
  5. drag it onto your ‘graphic-logo’ page,
  6. If your template included a graphic logo
  7. delete that image from the page first ( select with mouse, Delete on keyboard )
  8. then drag your new logo image onto the ‘graphic-logo’ page
  9. Save to update.
  10. Expand the ( Site / styles ) folder.
  11. Open the ‘styles.css’.
  12. Locate the following style
  13. #graphic-logo {position: absolute;top: 10px;left: 0px;}
  14. adjust the top and left positioning to suit your page layout

Updating / inserting a Graphic Logo

In this tutorial, we’ll demonstrate how to replace or insert your own graphic logo.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/9HiQWgYwOSc

  1. Drag your graphic logo image into your ( Site / themed-images ) folder, or any preferred folder in your website or create a new folder just for your logo or shared Library images
  2. If you want to copy Directly into DW, try dragging your image and dropping it directly onto the ‘Site / themes-images’ folder, or which ever folder you want to import your images into.
  3. Expand the [ + ] Library (folder)  >> shared (folder) if it’s not already expanded.
  4. Open the ‘graphic logo’ page.
  5. Expand the folder where you imported your graphic logo:
  6. Delete the existing graphic from the ‘graphic-logo’ Library page.
  7. Drag your logo onto your ‘graphic-logo’ page.
  8. Type an ‘alternate text’ name for screen readers, usually the name of your website will do.
  9. Then click OK.
  10. Select the image on the page.
  11. Remove the ( W ) and ( H ) width and height values, leave these fields blank. This will ensure your logo is responsive and resizes correctly for mobile devices.
  12. Save to update.
  13. Expand the ( Site / styles ) folder.
  14. Open the ‘styles.css’.
  15. Locate the following style:
  16. #graphic-logo {position: absolute;top: 10px;left: 0px;}
  17. Adjust the top and left positioning to suit your page layout: