You are here: Blog » Tutorials » How to change the color of a Hide My Site form

How to change the color of a Hide My Site form

If you are interested in changing the color on a Hide My Site form, you have come to right place. This short tutorial is also useful if you are looking to change the form images to say something in a different language. For example, if you wanted to change the “Password Protected” text at the top of the login form to say something in your own language. Note that you will have to be using the premium version of Hide My Site in order to follow along with this tutorial.

Here is a quick walk-through outlining the process.

Step 1. Examine the initial login page


In my case, I initially changed the background image to a nice repeating pattern with reds and browns. This looks good, but now I want to change the form colors to match.

Step 2. Download the form background image. Use a photo editor to change it to something that matches your desired look



I changed this to:


Step 3. Do the same for the login button


I changed this to:


Step 4. Upload your new images via WordPress Media upload. Then add the following CSS changes…

Enter this in your WordPress admin > Settings > Hide My Site > Custom CSS:

Note the !important at the end of each background property. This is needed to override the original CSS for the login page, so don’t forget that part 🙂

Step 5. Admire your final product


The newly styled login form is much more in sync with our custom background pattern. Hurray for matching!

Thanks for taking the time to follow this tutorial. Hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.

The step headers (Step 1, Step 2, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Tutorials and tagged , by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty years. His company is called The Motech Network and his website is In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">