Deborah Kay Wants to Build a School and Needs Your Help
  • Donate
  • About
    • XMAS
    • Innovation
    • LAOS
    • GHANA
    • Blog
  • Supporters
  • Social Media
  • Launch Your Own Campaign
  • Schools Built

BLOG
​

How to Change the Color of the Weebly Website Button

11/26/2015

Comments

 
The Weebly template that I am using is Unite.   One of the features of this theme are that there are only 2 choices of colors for buttons - grey and black, which does not make the call to action very visible.

Prompted by Neil Patel's recent post "How to Create the Perfect Call to Action" I utilised one of the best features of free Weebly websites the ability to add custom HTML / CSS to the website to change the Donate buttons from Black to Yellow!

​ Here's how to change the color of your buttons:

Step 1: Go to Themes 
​
​Step 2: Click on Edit HTML / CSS at the bottom of the page
Picture
Step 3: Search for Styles, and main.less.  If your theme does not have a main.less file, you might want to try UI-kits.less. I haven't tried looking through every single theme for where the button sits, but look in the Styles folder, and check each one by searching for Button. 
Picture
Step 4. Use the Search function and search for "Button" or scroll down till you see /* Button */. That's where all the button styling sits.
​
​Step 4: Change the background from black (#000000) to yellow (#fbb730). Change the border color to whatever color you want your border to be. I like my buttons borderless so I use the same yellow (#fbb730)

Step 5: Change the color (font color) from white (#ffffff) to black (#000000)

Step 6: To change the color of the button when you hover over it, look for the word button and hover (.wsite-button:hover or .wsitebutton-highlight:hover) and change the colour there!

Picture
Picture
Picture

Button Styling CSS

Code Editor

    

Button Hover CSS


    
Coincidence? Maybe.  Correlation does not mean causation.

But whether it was the change in colour of CTA or not,  learning from @neilpatel and @shayhowe led to a jump in the number of donations and  my projected completion date has been brought forward by 5 days!  

Good thing I learnt some HTML / CSS from Shay Howe earlier this year (one of the best sites to learn)
​
Picture

Only $325 left to go!

Comments
comments powered by Disqus
    GO TO DONATE PAGE

    Categories

    All
    Campaign Graphics
    Campaign Update
    How To Guides
    Weebly Sites

    DEBORAH KAY

    This is a simple blog to track my fundraising activities and to keep family, friends and supporters updated on my progress.

    This is also to share best practices in fundraising and the hacks I invented to manage the campaign.

    About this website

    About me
    My Personal Website
    My LinkedIn
    My Swipe File

    Archives

    April 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

Powered by Create your own unique website with customizable templates.
  • Donate
  • About
    • XMAS
    • Innovation
    • LAOS
    • GHANA
    • Blog
  • Supporters
  • Social Media
  • Launch Your Own Campaign
  • Schools Built