CHANGING ALL COLORS IN A TEMPLATE

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 rightclick on the element you want to see the color of, then hit "Inspect". See 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.

Example:

<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 be a huge page filled with strange characters and symbols 😨

4. Mark 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 that.

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 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 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!

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.

CHANGING DEFAULT TEXT IN E2

I have created two codes. The "Cart" button in the menu, and the "Add to cart" text in/on products. You can find them in the dump.