How to quickly change the default colours on a template

3 CommentsThursday, 23 May 2019  |  Cate

How to change the colours on your Bluepark template

One of the best things about Bluepark's built-in templates is how easy it is to switch to a new one without affecting your content. However, sometimes you’ll find the perfect template, only to realise that it doesn’t quite match your brand's colour scheme and you're just not sure how to go about changing it.

This can be frustrating, but it doesn’t have to derail your plans. With a our Find and Replace feature, you can change your theme’s colour options quickly, and make your website look just the way you want it to. In this post, we'll show you just how simple this is to do.

Choosing your template

Template Library

There are two places you can view our templates, on our website or within the Template Library in your admin panel, as shown above. If you view them within the Template Library, you can then preview each one and explore all of their features. Just click on the Full Site button under each template and, in the pop-up window, you can navigate around our demo site. At the bottom of the site, you will be able to switch between the full site and the mobile views.

As you will see, the content remains the same no matter which template you look at because they are all shown on the same site. Unlike many other website builders and ecommerce platforms, the content is entirely controlled by the Layouts and Blocks assigned to each page, not the template. This gives you a higher level of flexibility when it comes to designing your site.

Preview template

If you wish to view how the templates look with your site content simply click the Install button under each of the templates you want to view and then click on the Magnifying Glass icon next to each one within the Template Manager, as highlighted above.

Please note, when installing new templates, they will not be live on your site, and your customers will not see them, unless you click on the radio button to the left of their name.

Changing the colours

Once you've decided which template to go for, you can go ahead and change it's colours. Generally each template has one or two dominating colours and these are usually what you wish to change.

Pretty in Pink template original

For instance, Pretty in Pink is made up of subtle tones of grey with a dominant Cerise Pink. Maybe this pink just isn't sutiable for your brand and you'd like to change it to your brand's dominant colour of orange. If so, you would simply follow these steps:


  1. Find the HEX code for the dominant colour - simply click through the tabs within the Template Editor until you spot the colour

    Find the dominant colour

  2. Highlight and copy the HEX code - in this example it is #EC3B83
  3. Paste the HEX code into the Find field - this can be found at the top of the Template Editor

    Find and Replace template feature

  4. Copy the HEX code that you want to replace it with - in this example is it #FF7A31
  5. Paste the HEX code into the Replace field - this can be found at the top of the Template Editor
  6. Click on the Go button - the system will then replace all occurrances of the first colour with the new colour
  7. Click on the Magnifying Glass icon to view the changes - your customers will not see this as the template is not live
  8. If you're happy with the changes, click on the Green Tick icon to confirm


Pretty in Pink template colour change

You can use the Find and Replace feature to change anything within the template, such as fonts, colours, padding and more. However, please bear in mind it will change ALL occurrances of whatever you add into the Find field and this may affect parts of the design you may not expect it to.

Making your template live

Before making your new template live you will need to add in your logo, which you can do so within the Header Content field in the Header tab. You will also need to add in the links you want within the footer. These can be done within the Footer Content field within the Footer tab. For both fields, just click on the Edit button, highlight the section you want to change and edit each one. Remember to update the mobile header and footer too.

Set the default template

Once these changes have been completed and saved, go back to the Template Manager and click on the empty radio button to the left of the new template's name. This will set it to the default template and set the template live to all visitors.

Set mobile template

And don't forget your mobile template. By default this will change to the default template automatically, as show above, and will already be optimised for mobile devices. However, if you plan to use a completely different template for mobile, then you will need to change this manually afterwards.

Open Face Media
Thursday, 30 May 2019  |  8:34

Excellent content and thank you so much for share your knowledge.

Try Bluepark for FREE for 14 days

Full access to everything including our support team, no card details required