Back

In this exercise we will explore the Charcoal Studio Theme and learn how to customize the Header and Footer HTML sections.



Header Customization

Step 1: Social Links

  • Lines 23 - 26 can be customized by replacing the {#} in <a href="#" with your Company's Social Media url


Example <a href="https://twitter.com/docketmanager"


If you would like to remove any of the icons from the theme the entire line of code can be deleted.


Footer Customization

Step 1: Image Hosting Company Logo

  • Download the W2P Assets folder at the bottom of this article
  • Open the CRM Menu and Navigate to Sample Customer (or any Customer in your site)
  • Click on the {+} next to Files
  • Upload the file named yourlogo.png
  • For File Group choose W2P Image
  • Click Save
  • Right click on the name of the file and click Copy Link Address
  • The link will be copied to the clipboard
  • Navigate to Settings > Online Configuration > Online Ordering > Themes > Charcoal Studio - copy > Footer HTML
  • Scroll down to Code Line 28
  • Highlight the following text: https://support.docketmanager.net/portals/paper-studio/logo2.jpg
  • Press Control + V to paste the copied W2p Image link
  • Click Save


Step 3: Text Edit Street and Email Addresses

  • Line 34 replace "152 Summerside Ave., London, ON N6A 1J3" with your street address
  • Line 37 replace "info@theprintstudio.com" with your company email address
  • Line 44 replace "Local: 519-555-2384" with your label and phone number
  • Line 45 replace "Toll Free: 1-877-447-8519" with your label and toll free number


Step 4: Text Edit & External Web Link

  • Line 58 replace "http://docketmanager.ca" with the url of your website
  • Line 58 replace "Proudly powered by DocketManager" with the label of your choice


Step 5: Image Hosting - Credit Card Images

  •  Line 62, 65, and 68 contain the image references for Visa, MasterCard, and American Express

These images can be deleted from the theme by deleting the entire lines of code.

If you would like to update them with different images, follow the image hosting instruction from Step 1 above.