Post navigation

Change the colours in your Weebly theme

At Weebly.com it is a little bit tricky to change the colours if you don’t know CSS. The way I am showing you is not the best way to change colours inside a CSS code but it’s the easiest one if you are not familiar with CSS:

Go to www.weebly.com, log in, choose your website, open the Weebly Editor and click on the “Design” record to open the theme.

Activate the Rainbow Colour Tool and click on the design element you want to change, for example the background. The Rainbow Colour Tool shows you the hex code of the element in a pop-up.

Click inside the pup-up and copy the hex code.

Click on “Edit HTML/CSS” inside the Design record and open the CSS record.

Search for the hex code you copied seconds ago.
Click CTRL+F or ⌘ F (Mac) to open the search window. You can also go to “Edit” > “Search”. Paste the copied hex code in the search box and search for the colour. The search function will detect all elements inside the CSS code that use the colour you want to change.

Replace the colour of the search result with your colour.
Pay attention when replacing a #FFFFFF or #000000 code. These are white and black respectively. You may not want to change all white and black elements on your website.The CSS code also contains the text colours. You can find them by searching for code elements such as a{…}, p{…}, h1{…}, h2{…}, h3{…}.
a{…} means a link. p{…} means paragraph, h1{…} means header number 1, h2{…} header number 2 and h3{…} header number 3.There is an easy way to change the text colours on Weebly. You don’t need to change them now inside the code. We will do this later while I’m introducing you to the typography specials on the web.

If you don’t find the hex code it means that the colour is not defined inside the CSS document. It’s probably defined inside an image. The images are in the “Files” record. To change the colour inside an image click on the “Files” record. Search for the image you want to change and click on the image inside the “Preview” section. The image will now open in a new window.

Open the context menu of the image and save it to your desktop.

Go to www.pixlr.com/editor, upload your image and change the colours. Don’t change the size and the name of the image. It’s important to replace the original image of the Weebly theme exactly with your new image.

Save it to your desktop and use the same file format as the original file.
Design templates usually use images with the .gif or .jpg format. With the Pixlr Editor you cannot save an image as .gif.
If your original image is a .gif you can convert your .png file to a .gif with http://tools.dynamicdrive.com/imageoptimizer. If your template uses images with the JPG format your can directly save it as a .jpg.

Go back to www.weebly.com, navigate to the “Files” record and click on “Upload Files” to replace the image inside the template with your own image. The images you want to replace must use exactly the same name, size and format as the original image.