WordPress Admin Login Panel to Match Your Site :

WordPress happens to be everyone’s preferred Blogging Platform , and rightfully so . The truth of the matter is that amongst the multitude of Blogging platforms available out there . WordPress seems to be amongst the only blogging platform which possesses and offers so much flexibility towards customization and integration features to a user by which to design and customize their blog or website , either by way of plugins as well as or other modes of script .

For those of you who are on WordPress , I am certain you are able to relate to all of these integration features .

The beauty about WordPress is that : It’s all done for you ! ( once of course you get through the set up process via FTP, Servers, MySQL , Databases etc., ) ; and once you are able to overcome all of these set-up processes’ , the initial set up of your site is somehow less painful , regardless of whether you are a newbie or a seasoned pro designer . The hardest aspect of WordPress I believe is the initial set-up process , and this I believe is one of the deterring factors which may be overwhelming to first time users .

However , allow me to point out at this juncture for any of you who are considering of starting a WordPress Blog and getting on the WordPress Platform – but are hesitant or fearful of doing so due to not possessing enough knowledge of ” How to Set up a WordPress Blog ” , I can say to you that you should not allow this minor detail deter you in the least . There are many tutorial sites which will teach you ‘ How ‘ to set up your first WordPress Blog site and will walk you through the entire set up process in a clearly defined ‘ step -by – step ‘ easy to follow tutorial ( even if you’re a noob like me ! ) .

If you are new to Blogging and are contemplating on getting on the WordPress.org platform but simply don’t know ‘ How ‘ to go about setting up your WordPress blog , then here is a little help in getting you started : Please head on over to Franco Averta’s site Concept Dezain , and check out his easy step by step tutorial on : ” How to Set Up a Killer WordPress Blog “ , which Franco explains in 5 easy to follow lessons ( from start to finish ) . If by the end of these tutorial’s you find that you still are having difficulty within the set-up process or that you don’t quite understand certain things , then drop a comment on Franco’s site with your inquiry and he will definitely respond to your question(s) .

Now, if you are already on WordPress.org , you are probably aware of it’s many functional features as well as the myriad of plugins which one can install and incorporate into their admin-dashboard by which to enable any feature they wish to install into their blog / site . Firstly , I will recommend 2 plugins which will definitely make your life easier and will save you loads of time in managing your files as well as downloads you may want to make without having to go through your Host /Server and FTP protocols . These plugins will NOT slow down your page load time since they do NOT have anything to do with your main Theme .

These plugins are strictly on your Admin Dashboard and they are meant to enable your file management and any downloads you want to make . Therefore please do yourselves the favor and download the : WP File Manager by Johannes Ries . You can do this by simply going to your WP Admin dashboard , go to Plugins > Add New > Go to the Search Box and enter : FileManager for WordPress .

Install and activate the plugin and take control over your files right through your WP Admin dashboard. The next plugin which you will simply love and will not be able to live without is the WP-DownloadManager by Lester Chan ( who is also the guy behind the WP Page Navi ) . What the WP-DownloadManager will enable you to do is this : You will be able to basically conduct all of your downloads directly through your WP Admin dashboard without having to go to your C-Panel , FTP Host and go through all of this and then have to go back to your WP dashboard and activate everything from there as well .

Now let us talk about your WordPress Blog / Site . I am certain that many of you have beautiful themes or have customized your theme as per your preference and specifications and some of you may even have gone the extra distance and have purchased a Premium Theme for your site / blog . Being that you have all gone the extra mile in customizing your Theme and creating it to your liking , wouldnt it be great if your Admin Login Panel matched your site Theme as well ?

As all of you who are using WordPress may be aware of , that the WordPress Login Admin Panel is the generic white panel with nothing particularly interesting to it other than the little white box in the middle where you simply login . However , there is a way to customize your WordPress Login Panel painlessly and with practically no code , and no effort aside from you acquiring the preferred images you wish to use and clicking a ‘ Save Settings ‘ button – thats it !
Therefore after saying as much – let us get down to the heart of the matter : Customizing your WordPress Admin Login Panel .

First please go to your Plugins on your dashboard sidebar ( and I do hope you have by this point installed the WP-Download Manager which I have mentioned above , or else you will have to do the rest through your C-Panel & FTP , which is really in my opinion so time consuming , but this is your choice ) .

Once you have gone to your Plugins on your sidebar , please click on ” Add New ” , and the ‘ Search ‘ page will open . In the ‘ Search ‘ box , please type in the following : Custom Login .

At this point the Plugins Search page will present you with a list of options to Custom Login link sites . However , I will save you the trouble and the pain of searching through each and every one of these , since only two ( 2 ) of these plugins are the Best of the Best and up to par as far as Customization features and functionality goes ( the rest pale by comparison , so do forget about them – I have looked into every single one of them for you and have done the homework so you dont have to ! ) Now lets move on . Let us choose the best and most functional plugin by which to Customize our Admin Login Panel .

From the list of optional links below , please choose the fourth ( 4th ) one : Custom Login by : Austin Passy [ look for the plugin Authors & you will see the name at the end of the plugin description ] . Now that you have seen the plugin I am speaking of , please click on the ” Install ” feature ( to your right ) .

After the installation is complete , you will be redirected to the Activation page and will be asked to either : view the plugin Installation Log , or the rest of your installed plugins and whether you want to Activate the Plugin . Please skip the rest of all this and simply click on ” Activate Plugin ” .

.:: For those of you who are still doing things via FTP & C-Panel mode and want to do it the hard way – here is the direct link to download Austin’s plugin directly from his site Custom Login Plugin and you can follow his instructions on the set-up process . I will just be explaining the set up options for those of you who have downloaded the WP-Download Manager Plugin and are making your lives easier . ::.

Let’s move on :
Once you have activated the Custom Login plugin , look at your sidebar on your dashboard ( yes, the one on your left ) . Scroll down to the sidebar titled ” Settings ” ; there you will see your ‘ Custom Login ‘. Please click on that .
Once you have clicked on the Custom Login , you will now be taken to the Custom Login Dashboard Panel , which will look like the image provided below :

From here on end you are now on ‘ Easy Street ‘. If you dont care to make any customizations and want to leave things as they have been originally created by Austin – it is your perogative ; but since you may have gone through the process of downloading this plugin , I believe you should put it to the use it has been intended for : Designing your Admin Login Panel.

Ok, the next step is ( once you are at the Custom Login Panel ) ; click on the button where it states ” Check this box to use your own CSS, leave unchecked to leave the default style. ” This will enable you to now Customize your Login Panel . I will list all of the Custom Login definitions below and explain what their functions are in case any of you don’t know .

This can be the final outcome of your Admin Login Panel

But Before you arrive at these results – let us follow the easy steps defined below

Custom Login CSS – html

html background color :
by clicking this box you can set your hexadecimal colors for your Login Admin background. ( which you can choose by using the color chart coder located to your right on the Custom Login Panel )

html background url :

In this box you can set a wallpaper of your choosing – make sure it is larger than 1200px wide, or else it will leave a gap at the end . ( never mind that it says ‘ Suggested size : 10px x 500px ) . If you want to have a nice background please choose a large enough wallpaper ( there are many out there ) . If you would like to find some beautiful backgrounds which you can tile you can check out Backgrounds@ MySiteMyWay as well as their other child site which has some of the most beautiful backgrounds and textures you will ever find on the web Webtreats.com and they also have some truly outstanding textures as well HERE , and if you dont find anything there which captivates you – then simply head on over to flickr for backgrounds / or wallpapers and search in any category you like .
* Please note : If you are going to opt for a tileable background you must set the ‘html background repeat box ‘ to : repeat-x [ for horizontal repeat ] or repeat-y [ for vertical repeat ] . If you are going to use a large scale Wallpaper of 1200-1400 you will not need to set a value of repeat – but rather a value of : ‘ no-repeat ‘ .

Custom Login CSS – #Login form

Login form background color :

Use the color code chart to set your admin login panel’s background color [ suggestion : if you will be using backgrounds , I suggest that you set both the page background color and the Wp Admin Panel to the same color. ]

Login form background url :

In this box you can set your preferred background for your WP Admin Login panel . * Please note : Despite the suggested size being 308px x 108px – the actual size you will need to be able to cover the entire Admin Login Panel is 432px H x 309px W. Prior to uploading ( pasting ) your desired image into this box , you may wish to use a custom font and create your company or site logo unto it and then once you are satisfied with the end result , you may then apply the image URL into the box . Just remember : Regardless of how many times you do this and are not happy with the results , you can remove every customization and redo it all over again until you have finally gotten it right and are happy with the results .

Login form border radius :

You can use these settings to change the border radius to any given number you like – this is up to you . You can leave it at 12 px as it is already pre-set or you can increase or decrease it to the level you desire .

Login form border thickness :

Here you can set your border thickness [e.x: I have set mine at 3px ] – this again is your choice .

Login form border color :

Choose the border color of your login panel by using the color code chart : [ try using colors close or similar to the background you have chosen ].

Login form box shadow :

You can choose the thickness [width ] of your border shadow here by setting the values to anything you want : [ I've set mine at 8px , by 8px by 18px ] and then choose your shadow color by using the color code chart on your sidebar to your right . ( try to set your shadow color as close to your background theme as possible , except make it 3 tones lighter so that it can have some kind of contrast and light effect against the main background ).

Custom Login CSS – Label

Label font color :

Here you can choose to set the color of the font on your Admin Login Panel , by using the color code chart . * Note : If you have set a dark color or a dark background , it is wise to use lighter shade of font , a color which will either contrast or be at least 3-5 shades lighter than the darker color you have chosen ( depending on the color )