Replacing a template color

07/08/2019

DISCLAIMER:
YOU NEED AT LEAST PREMIUM PACKAGE STANDARD TO DO THIS.
IF WE RELEASE ANY UPDATES TO YOUR TEMPLATE, IT MIGHT BREAK THE COLOR UPDATES YOU DID, AND YOU WILL HAVE TO DO IT OVER AGAIN.



So you think you have what it got to redesign our professionally made templates? Alright, let me see what you got hotshot.


1. First off, we need to find the #HEX code of the color that you want to change from. Open the website that you want to change the colors of.

2. Find the HEX code for the color which you want to change. The easiest way of doing this is (in Chrome or Firefox) to hit right click on the element you want to see the color of, then hit Inspect. Check this video clip for an example of how it can be found.
Be aware that it can be difficult to find it in some cases. If you can't see it, try another element which has the same color.

Save his HEX code somewhere. You're going to need it in a bit.
The next step is to get the entire code for styles that are being used on your website. We are going to adjust it to replace the old color with the new one.

3. Hit CTRL + U to view the page source and then do CTRL + F and search for stylesheet. Click on the link that is inside the href attribute inside the same tag.
It will look something like this:

<link href="https://website.com/style.css?ph=a957c2b7cf" rel="stylesheet">

So in this example you would click on the underlined "https://website.com/style.css?ph=a957c2b7cf" link.
This is going to send you to a huge page filled with strange characters and symbols. This is the styling currently used in the template you chose.

4. Select everything and copy it. CTRL + A and then CTRL + C

5. You can use any program for search and replace. I'm going to use Notepad for Windows in this guide. 

If you are on Mac you can use TextEdit. Here' s a guide I found for doing search and replace on Mac.

6. Paste the code you copied in step 6 and paste it in a blank Notepad document (or whatever editor you use)
In the next steps we are going to actually replace the old color with the new one.

7. Copy the HEX code you copied in step 3, open the notepad document and hit CTRL + H on your keyboard (or click Edit > Replace), and paste the HEX code in the Find what field.

8. Find the color you want to use on your website. 

You can find the HEX code for it here (see picture). Paste this in the Replace with field where you are doing search and replace. Here is what I have so far

9. Hit Replace all. This should replace all instances of the old color, to the new color you found.

10. Now you need to save the document to a .css file, which the browser understands as styling for the website.

Hit "File" and "Save as". Now write a filename and end it with .css Choose "All files (*.*)" as "Save as type". And select "UTF-8" for encoding.
Here is what I have

11. We now need to upload the file to your website so we can use it. Create a new secret page in your website editor, hide it form the menu, and upload the CSS file we just created.

See here how to upload files
And here how to hide pages from the menu
We will only use this page to hold the CSS file, so make sure that it's not a page you want to show to the public.

12. Publish the changes and click on the blue link to open the page where the button to the uploaded CSS file is located. Right click on the button (in the online version of your website, not in the editor), and click Copy link address.

This way we get the link to the new stylesheet we are going to use for your website. Here's a video clip of it
Save the address somewhere. We're gonna use it soon.

13. Copy the following code and replace what you copied in step 14 with where I wrote HERE:

<link href="HERE" rel="stylesheet">

You might notice that it looks familiar. That's because it's the same element we were looking at in step 4! This one now contains our new updated style.

14. Now to insert it into your editor. You can do this by going to SETTINGS - Website Settings - Website header and footer - Website header HTML code, and pressing Save. See picture.


That's it!

Wow, your website looks so pretty now. Good job!

Check out the presentation here