You are here: Blog » Tutorials » How to make Hide My Site responsive (New Method)

How to make Hide My Site responsive (New Method)

In this post, I am going to teach you a new method for making a responsive Hide My Site login page. I wrote another tutorial on this topic a while back, however that article was targeted specifically for users employing the Discreet theme. For those using any of the other login page themes, this article will show you how to make your login page look good on both mobile and desktop devices. Note that you will have to be using Hide My Site premium in order to follow along with this tutorial.

Here is a quick walk-through outlining the process.

The End Result

Before we get started, here’s what we are working toward.

ba-resp

Step 1. Override the login page template file

For more information on how to override login pages, refer to the section titled “How to override the login page template within your theme folder” on http://www.clevelandwebdeveloper.com/wordpress-plugins/hide-my-site/

Step 2. Edit the template file page

For the sake of example, let’s assume you are using the Ice theme for your login page. Open up hmsice.php (if you were using the Iris theme you would open up hmsiris.php, etc…). Before the opening <style> tag, add the following new line of code:

Step 3. Add mobile-friendly CSS

In the Hide My Site settings page > Custom CSS:

Step 4. Admire your final product

ba-resp

Your new login form now looks great on all devices. Well done!

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 fifteen years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. 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="">