Change the colours in your Weebly theme

At 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:

  1. Open your Firefox Browser and install the Rainbow Colour Tool: If you don’t use Firefox please download and install it first.
  2. Go to, log in, choose your website, open the Weebly Editor and click on the “Design” record to open the theme.
  3. Activate the Rainbow Colour Tool 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.
  4. Click inside the pup-up and copy the hex code.
    Copy the Hex Code on Weebly with the Reinbow Colour Tool
  5. Click on “Edit HTML/CSS” inside the Design record and open the CSS record.
  6. 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.Search for the hex code with Click CTRL+F or ⌘ F (Mac)
  7. 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.
  8. 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.change colours inside an image weebly
  9. Open the context menu of the image and save it to your desktop.Save image as jpg or gif on your desktop
  10. Go to, 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.
  11. 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 If your template uses images with the JPG format your can directly save it as a .jpg.edit your image with
  12. Go back to, 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.Click on "Upload Files" to upload your image

It didn’t work?
Visit the Weebly Support Center

Related links

3 thoughts on “Change the colours in your Weebly theme

Post a comment or question

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s