What is the "Mercury" theme?

Your HarmonySite comes with a selection of "themes".  Each theme is a "look" for your website, a way of presenting your website's content to site visitors and members.  It's possible to change the entire look of your site quite easily, and which theme you choose is simply a matter of personal aesthetics.

 

The "Mercury" theme is HarmonySite's newest theme.  It's an elegant theme that sits well with modern web fashions.  The home page slideshow takes up the whole screen, for a bold presence.  Naturally, the theme is "responsive", or mobile-friendly.  If you adopt this theme for your HarmonySite, viewing and navigating on a mobile phone or tablet will be seamless.

 

The theme looks like this (on our Demo site).  Naturally it will look different with your logo, colours and photos... 

 

 

What's the process for changing themes?

You have two main choices for changing themes:

  1. You can do it yourself - if you are comfortable with basic HTML skills. Full details on how to do it are below, but the basic steps are...
    1. Select the new theme in the website configuration
    2. Upload a new logo
    3. Replace the photos in your slideshow with new versions that have a different size
    4. Replace the HTML in your Home page (we provide the new HTML, below).  This requires a basic competence with HTML (not expert).
    5. Replace the HTML in your site footer's "Contact Us" area (we provide the new HTML, below)
    6. Replace the HTML on your "Contact Points" page (we provide the new HTML, below)
  2. Or we can do it for you. We charge a one-time fee of $50 (plus GST for Australian clients) if you would prefer us to take care of it for you.

 

What do I need to get started?

No matter whether you choose to do it yourself or ask us to do it, before any changes can be made, you should read the following checklist

  1. Logo.  The first thing you may need is a new logo.  In the new "Mercury" theme, the logo will be sitting on a black background.  This is a departure from our other themes, where the logo sat on a white background (or you had two versions of your logo - one for a white background and one for a dark/black background). So your logo should not have any black in it - the black won't show when the logo sits on a black background.

    By way of illustration, here is an example of a suitable logo...

    Note that it's a "transparent" logo, with no black in it. Here's what it looks like when the same logo sits on a black background...


    Here's an example of a logo that's NOT suitable (note this is a different logo from above)...


    Note it has a few black elements. It looks fine on a white background (above), but on a black background it doesn't work...


    So you may need to get your graphic designer to create a new version of your logo. You can tell them that this is what you need...
    1. PNG format (GIF is also fine)
    2. Transparent background
    3. Little or no black
    4. Antialiased to look good when placed on a black background.
    5. Landscape layout
    6. Around a 3:1 aspect ratio is ideal (e.g. 300 x 100 pixels).  Variations on this are fine
    7. A sensible size:  No bigger than around 150 pixels high


  2. Home page slideshow photos.  If you are currently using the "Stockholm" theme with the full-screen slideshow format, then you don't need to change any slideshow photos - your existing photos will be suitable for the new theme.

    If you're like most HarmonySites, and are either not using the "Stockholm" theme, or are using Stockholm with the regular slideshow format (where each slide/photo is exactly 1150 x 448 pixels), then you will need to change your photos.  You would need to go back to the original high-resolution versions of the photos in your existing slideshow and create new versions - crop/resize the originals anew to be suitable for the new theme. Or you can simply start with entirely new photos.

    In the Stockholm theme, with the regular (non-full-screen) slideshow layout, each photo needed to be exactly 1150 x 448 pixels, In the new theme, slideshow photos should be approximately 1200 x 800 pixels in size.  If each photo has an aspect ratio of about 4:3 or 3:2, and its width is between 1000 and 2000 pixels, then it should be fine.  We do not recommend you simply upload your high-resolution 12-Megapixel photos straight out of your digital camera. Crop them and resize them first, as per the parameters above.

    If you don't know how to crop/resize photos, and are willing to pay our aforementioned $50 theme-changing fee, then we will do this cropping/resizing for you, and all you need to do is send us the original high-resolution photos.

 

That's about it. Every other aspect of your site will automatically adjust itself to the new theme - with three manual changes required by you (see below).

 

Instructions for adopting the new "Mercury" theme

If you prefer to do this yourself, here are the full step-by step instructions for changing themes.

Note that we've designed these instructions so that if you change your mind or get stuck at any point, you can reverse your changes and go back to the previous theme.

 

Ensure you're logged in to the main Members page with full Webmaster privileges before beginning...

 

Step 1. Switch on the new theme

  1. Click the "cog" icon in the top-right corner of the site 
  2. On the Website Setup and Configuration page, click the cog icon next to "HarmonySite"
  3. Click the Appearance tab
  4. Make a note of your existing Visual theme
  5. Change the Visual theme to Mercury
  6. Acknowledge the information box that pops up
  7. Scroll to the bottom of the page and click Save


The new theme will take effect instantly.

 

 

Step 2.  Home page slideshow photos

Visit your home page.  If your previous theme was "Stockholm" and you were using the "full-screen" format of the slideshow, your slideshow may look fine.  If so, there's nothing else for you to do in this step.


If you were previously using the "Stockholm" theme with the "non-full-screen" slideshow layout, or any other previous theme, then you'll need to change each of your slideshow photos.  For each photo, you'll need to do the following...

 

  1. Locate the original high-resolution photo (on your computer - not in your HarmonySite)
  2. Make a backup copy
  3. Using some photo-editing software, crop/resize the photo so that it's approximately 1200 x 800 pixels.
  4. In your HarmonySite, click the Admin link top-right
  5. Click the link called Banners (home page) (on the Website Content line, in the middle column)
  6. Locate the slide that corresponds to your photo, and click its Update button
  7. Find the spot to replace the existing photo with the new one you've just prepared
  8. Click Save at the bottom


 

Step 3.  Remaining home-page content

The remaining content on your home page will probably not look right.  Or it may look perfectly fine.  Every HarmonySite is different.  If the home page looks fine to you, you can skip this section.


The rough process for updating your Home page is...

  1. Save a copy of your existing Home page content (HTML), into "Notepad" or similar
  2. Copy and paste our default Home page content into your Home page (link below), overwriting what's there
  3. Bit by bit, copy your saved Home page content back into the page,

Note that this requires you to have a basic competence with HTML.


The full process is as follows...

  1. Visit your home page
  2. Click the edit button in the bottom-right corner
  3. Click the Content tab
  4. On the big box that contains all the existing content of your home page, click the Source button in the toolbar
  5. Highlight all the HTML source code (Ctrl-A) and copy it (Ctrl-C).  Open up a simple text editor, like Notepad, and paste it (Ctrl-V).  Save it - you will need it in the latter steps
  6. Ensure that you're still in Source view
  7. Click this link:  New home page text   It opens in a new window.
  8. Highlight all of THAT text (Ctrl-A) and copy and paste it into the Source view of the page contents box, overwriting any text in there already
  9. Switch out of Source view to see what the new content looks like (by clicking the Source button again)
  10. It will look better if you click the icon to view the editor "full screen" - the icon looks like this:
  11. This is the tricky step.  This is where you need your HTML skills...  Bit by bit, copy the content from the safe copy of your actual content (above), and paste it into the right place in your Home page.  You can do this either in Source view or in regular view, whichever makes more sense to you.

    Be sure to copy ONLY the useful content from your saved backup - not the entire HTML code!

    Unless you're an expert at this, you are likely to make mistakes. Feel free to use the undo system (Ctrl-Z), or revert back to an earlier saved version and start again.

  12. Click Save at the bottom when you're done.

 

If you have trouble with any of this, contact us.

 

Step 4.  Contact Points page

Your existing "Contact Points" page will also need an update.


The process is very similar to what you just did with the Home page (above)...


  1. Visit your Contact Points page
  2. Click the edit button in the bottom-right corner
  3. Click the Content tab
  4. On the big box that contains all the existing content of your home page, click the Source button in the toolbar
  5. Highlight all the HTML source code (Ctrl-A) and copy it (Ctrl-C).  Open up a simple text editor, like Notepad, and paste it (Ctrl-V).  Save it - you will need it in the latter steps.
  6. Ensure that you're still in Source view
  7. Click this link:  New contact page text   It opens in a new window.
  8. Highlight all of THAT text (Ctrl-A) and copy and paste it into the Source view of the page contents box, overwriting any text in there already.
  9. Switch out of Source view by clicking the Source button again
  10. Switch into "full screen" view (as per screenshot above)
  11. Again, bit by bit, copy the content from the safe copy of your actual content (above), and paste it into the right place in your Contact page.  You can do this either in Source view or in regular view, whichever makes more sense to you.

    Be sure to copy ONLY the useful content from your saved backup - not the entire HTML code!

  12. Click Save at the bottom when you're done.

 

Again, if you have trouble with any of this, contact us.

 

Step 5.  Contact Us box - home page footer

The Contact Us section of the footer of most public-facing pages also needs a tweak.

 

The process is similar to the previous two steps...

  1. Click the "cog" icon in the top-right corner of the site 
  2. On the Website Setup and Configuration page, click the cog icon next to HarmonySite
  3. Click the Footer/Sidebar tab
  4. In the Footer section, locate the Text for contact slideshow area field, and click its Source box
  5. As before, copy all the code there and paste it somewhere safe
  6. Click this link:  New contact footer box text   It opens in a new window.
  7. Highlight all of THAT text (Ctrl-A) and copy and paste it into the Source view of the Text for contact_slideshow area field, overwriting any text in there already
  8. Switch out of Source view by clicking the Source button again. No need for "full screen" mode this time.
  9. Again, bit by bit, copy the content from the safe copy of your actual content (above), and paste it into the right place.  You can do this either in Source view or in regular view, whichever makes more sense to you.
    Click Save at the bottom when you're done
  10. Return to the home page to examine the results


Again, if you have trouble with any of this, contact us.