KL Admin Skin label-j25label-j30plugin

Rebrand your Website within Minutes

  • created: 10/01/2014
  • latest update: 04/09/2020

 

Get full control over look & feel.
KL Admin Skin allows you to brand and customise the Joomla! administration area.
With the focus on usability & performance.

 

Table of Contents


 

 

1. What is KL Admin Skin?


KL Admin Skin is a Joomla! plugin for those who want to give their websites a more personalised and unique administration area.

Until now if you want to change the look and feel of your Joomla! administration area you need to spend your valuable time coding to achieve it.

Now, with the help of KL Admin Skin and without any need of custom coding, in a couple of minutes, you will have a styled & unique Joomla! administration area.

 

As known, setting Joomla! to offline mode will prevent from testing as a guest user, because you have to be logged in see the frontend of the site.

With Offline Overrider option, you simply set an override key and add it to the URL in your browser. Now you can navigate as a guest user keeping your site offline.

 

 

2. Requirements


To work properly, you need to have the mbstring (Multibyte String) functions enabled on your server.

Remote random images resource needs to have the cURL library enabled.

It never hurts to point out the importance of having an updated version of Joomla!. Some options may not work properly in an outdated version.

 

KL Admin Skin supports both defaults Joomla! admin templates:

label-j25 Isis

label-j25 Bluestork

 

 

3. Installation


Download the latest KL Admin Skin package, according to your Joomla! version, and install it as you would any regular Joomla! extension.

  1. Log into your Joomla! administration
  2. In the menu, choose: Extensions >> Extension Manager
  3. Under 'Upload Package File' select the extension zip
  4. Click on 'Upload & Install'

When the plugin has been uploaded and installed successfully, you will see a confirmation message.

That's right! Simple as that.

When updating KL Admin Skin, you do not need to uninstall it first. The package will update all the files automatically.

By default plugins are not enabled, so don't forget to enable it. This is not applied to Quick Icon plugin because it will be automatically enabled after its installation.

 

 

4. Updates


KL Admin Skin plugin can be updated in two different ways:

Manually updating:

Download the latest KL Admin Skin package, and install it as you would any regular Joomla! extension. See Installation.

Using the standard Joomla! update manager to notify you about updates (since KL Admin Skin version 3.2.0):

First, KL Admin Skin plugin needs you to set up the Download ID before you can install the updates through this method. You can find your main Download ID or create additional Download IDs under 'My Dashboard' on our website after logging in. Then, go to KL Admin Skin plugin and paste your Download ID in the appropriate field. Finally, click on 'Save & Close'.

 adminskin DownloadId3x

Now, all you need to do is to go to Extensions >> Extension Manager >> Update in your Joomla! backend. If you do not see the updates try clicking on the 'Find Updates'  button in the toolbar. If a new version of the plugin is available you will be able to update by selecting it and clicking on the 'Update' button.

You need to have an active subscription in order to update, if not, you will see the updates but you will NOT be able to install them. Instead, you will see an error message telling you about a 403 or 404 error received when trying to update.

 

Access to Download ID field is only available to members of Super Users group. So, members of another user group will be prompted with the message:

You are not authorised to view this resource.

The Download ID will NOT be exported into the backup file when the Backup/Export tool is used.

 

 

5. Language Packs


We go above and beyond basic language support to make our extensions as flexible and adaptable as possible.

KL Admin Skin is released in English but other language packs are available.J3.x only

The installation process is easy, just download the desired language pack and install it as you would any regular Joomla! extension.

 

Available language packs:

AfrikaansCatalanChinese (traditional)NLGBFlemishFrenchGermanGreekHungarianItalianMalayPolishBrazilPortugalRomanianRussianSlovakSlovenianSpanishTamil

Didn't you find the language pack you want to use with KL Admin Skin?

Ask us how to contribute. You won't regret.

 

 

6. Usability


Always with our focus on usability and performance, we implemented several functionalities to make the KL Admin Skin plugin as user-friendly as possible.

Monitoring parameters for changes.

Due to the large number of parameters available in the plugin, we check if any change has been made. You will be notified in two ways: in the plugin toolbar an icon will be displayed and the label from the field that has been changed will turn red.

Implementation of conditional fields for a simple and intuitive use.

For instance, in the 'Administration Options' tab, there is no need to show the 'Custom Logo' field when you have 'Show Logo' option set to 'No', right? That's why some parameters will only be available based on the value of another field.

Wouldn't it be great if you could preview the changes made to the login page without logging out of Joomla!?

That's why we added a button to the plugin toolbar with that purpose. By adding this button you will be able to see how administration login page looks like after making and saving the changes. The annoying need of logging out or open a different browser to test it is gone.

We are pretty sure that you will be pleased with this tools!

 

 

7. Settings


First things first, KL Admin Skin is a system plugin, so right after a successful installation navigate to Extensions >> Plugins, then make a search for 'KL Admin Skin'. Selecting the System - KL Admin Skin plugin you will be able to access/change plugin settings.

Alternatively, if you have the Quick Icon - KL Admin Skin plugin installed, you can access to System - KL Admin Skin plugin directly from your Joomla! control panel.

You can now start styling your administration area with your own unique look & feel.

Let's get started?

Access to KL Admin Skin Quick Icon plugin depends on your subscription level.

 

7.1. KL Admin Skin for Joomla! 3.x Settings label-j30

The parameters are divided into six major areas, Login, Administration, Fine-Tune, Presets, Offline Overrider and Tools.

 

Login Options

This allows you to revert to Joomla! original settings without losing all customization.

adminskin loginoptions3x  

Option Default value Description
Login Options Apply Sets if the following settings will be ignored or applied to the login page.

Albeit setted to 'Ignore', the settings will be applied when previewing the login page.

 

General Settings

adminskin logingeneral3x  

Option Default value Description
Responsive Breakpoints No Sets if you want to serve different images, depending on breakpoints, to the login page. v.3.6.0
Usefull to reduce bandwidth costs and/or improve user experience, serving different images to different devices.
For details about breakpoint values and affected fields, see Responsive Breakpoints.
Google Fonts
  Sets the font to be applied to the login page. Available fonts from the Google Fonts service.
  Preview
Previews the chosen font. By pressing it, a Google Fonts preview page will be open.
  Update
Update fonts list with just one click. This button allows you to refresh the list of available fonts from the Google Fonts service.

Additional information about when was made the last update to Google fonts list and how many fonts are available can be obtained by hovering the 'Update' button.

 

Background Options

The first impact. Let's get started tweaking the login background.

 adminskin loginbackground3x

Option Default value Description
Background Colour #165387 Sets the background colour
Second Colour #142849 Sets the second background colour to use with the gradient. If gradient option is set to 'No' this colour won't be used
Gradient Radial - Circle If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction
Background Type None Choose the media type to use as a background.
Image - Will always be used the same image as a background.
Random Image - Every time login page is loaded a different image will be used, from the chosen folder, as a background.
Background Image   Sets an image to use as background (local or remote).
'Background Type' must be set to 'Image'.
Image Folder   The path to the image folder relative to the site URL (example: images), or the full URL to the image folder in a remote server (example: http://example.com/images).
'Background Type' must be set to 'Random Image'.

For remote folder usage, an extra procedure is needed. See Setting Images

Image Tiles No If set to 'Yes' the background image is repeated both vertically and horizontally.
(example: using a background pattern)
Image Size Property Cover The image size property specifies the size of the background images.
Auto - The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area.
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Horizontal Position Center If a background image is set, the horizontal position property can be set here
Vertical Position Center If a background image is set, the vertical position property can be set here

 

Login Box Options

Let's continue with the login box. 

 adminskin loginbox3x

Option Default value Description
Show Login Logo Yes Sets if Joomla! original or custom logo will be shown or not
Custom Logo   Sets a custom logo to use in the login box (local or remote).
It will replace Joomla! default logo. 'Show Login Logo' must be set to 'Yes'.
Horizontal Position Center Choose the custom logo horizontal position
Show Login HTML <hr> Tag Yes If set to 'No' removes the HTML <hr> tag from login box v.3.6.0
Login <hr> Colour
#ffffff Sets <hr> border colour. 'Show Login Logo' and 'Show Login HTML <hr> Tag' must be set to 'Yes' v.3.6.0
Login <hr> Width 2px Sets <hr> border width. 'Show Login Logo' and 'Show Login HTML <hr> Tag' must be set to 'Yes' v.3.6.0
Show Custom Message No Sets if a custom message, if defined, will be inserted or not. This custom message will be shown right after login logo
Custom Message   If 'Show Custom Message' is set to 'Yes', the text entered here will be placed in a paragraph right after login logo
Custom Message Position Left Choose the custom message position.
Custom Message Font Size 13px Sets the font size for the login custom message
Custom Message Font Colour #333333 Sets the font colour for the login custom message
Login Box Shadow Yes If set to 'No' removes the default login box shadow
Show Login Box Background Yes Sets if login box background will be shown or not
Login Box Background Colour #f5f5f5 Sets the login box background colour.
'Show Login Box Background' must be set to 'Yes'.
Login Box Border Colour #e3e3e3 Sets the login box border colour.
'Show Login Box Background' must be set to 'Yes'.
Full-Width Login Button No Sets if login button will take up full-width or not
Button Position Left Choose the button position when it's not in full-width mode
Login Button Top Colour #2384d3 Sets the login button top colour to use with the gradient
Login Button Bottom Colour #15497c Sets the login button bottom colour to use with the gradient
Show Language Dropdown Yes Sets if login language dropdown will be shown or not.
The Joomla! default behaviour is to provide a language dropdown when more than one language are installed in administration

 

Footer Options

Login page final step. Give your touch to the login footer.

adminskin loginfooter3x

Option Default value Description
Show Homepage Link Yes Sets if Joomla! default 'Go to site home page' link will be shown or not
Custom Link Title   If 'Show Homepage Link' is set to 'Yes', the text entered here will replace the Joomla! default 'Go to site home page' tag
Show Footer Joomla! Icon Yes Sets if the footer Joomla! icon will be shown or not
Custom Footer Icon   Sets a custom icon or image to replace the Joomla! icon in the footer (local or remote).
'Show Footer Joomla! Icon' must be set to 'Yes'
Custom Footer Icon Link   Sets a link to assign to your custom icon or image.
(example: your site URL)
Custom Icon Width 24px Sets the width of the custom icon or image to be placed in the footer
Show Footer Copyright Yes Sets if the footer copyright information will be shown or not
Footer Font Size 13px Sets the font size for the footer
Footer Font Colour #fcfcfc Sets the font colour for the footer

 

Administration Options

Like in login page options, you are able to revert to Joomla! original settings without losing any custom settings.

adminskin adminoptions3x  

Option Default value Description
Administration Options Apply Sets if the following settings will be ignored or applied to the administration area.

 

General Settings

adminskin admingeneral3x  

Option Default value Description
Responsive Breakpoints No Sets if you want to serve different images, depending on breakpoints, to the administration area. v.3.6.0
Usefull to reduce bandwidth costs and/or improve user experience, serving different images to different devices.
For details about breakpoint values and affected fields, see Responsive Breakpoints.
Google Fonts
  Sets the font to be applied to the administration area. Available fonts from the Google Fonts service.
  Preview
Previews the chosen font. By pressing it, a Google Fonts preview page will be open.
  Update
Update fonts list with just one click. This button allows you to refresh the list of available fonts from the Google Fonts service.

Additional information about when was made the last update to Google fonts list and how many fonts are available can be obtained by hovering the 'Update' button.

Link Colour
#0088cc Sets the colour to use for links.
Link Hover Colour
#1f496e Sets the colour to use for links on hover.
Custom Favicon   Sets a custom favicon to replace the Joomla! original favicon (local or remote).

 

Header Block Options

One of the most eye-catching elements. Play with them.

Navbar

adminskin adminnavbar3x 

Option Default value Description
Replace Admin Home Icon No Sets if Joomla! admin home icon, positioned in top left, will be replaced or not. If set to 'Yes' this icon will be replaced with the icon
Navbar Hover Colour #10223e Sets the navbar background colour on hover
Dropdown Menu Hover Colour #0081c2 Sets the dropdown menu background colour on hover
Navbar Font Colour #d9d9d9 Sets the font colour for the navbar
Navbar Colour #152d53 Sets the navbar colour
Navbar Second Colour #10223e Sets the navbar second colour to use with the gradient. If gradient option is set to 'No' this colour won't be used
Gradient Linear - Top to Bottom If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction

 

Header

adminskin adminheader3x

Option Default value Description
Show Logo Yes Sets if Joomla! original or custom logo will be shown or not
Logo Position Right Choose the logo position, left or right side. If set to 'left', the logo will switch position with the page title
Custom Logo   Sets a custom logo to replace the Joomla! original logo (local or remote).
'Show Logo' must be set to 'Yes'
URL Logo   Sets a URL to assign to your custom logo.
(example: your site URL)
Logo Title   Sets a title to assign to your custom logo when hovered.
(example: visit us)
Shown Custom Message No Sets if a custom message will be shown or not in header
Header Custom Message   If 'Show Custom Message' is set to 'Yes', the text entered here will be placed in a paragraph in the header.
(example: you can insert your company slogan or support contact)
Header Message Position Right Choose the header custom message position
Header Message Font Size 14px Sets the font size for the header custom message
Header Message Font Colour #ffffff Sets the font colour for the header custom message
Header Font Colour #ffffff Sets the font colour for the header
Header Colour #17568c Sets the header colour
Header Second Colour #1a3867 Sets the header second colour to use with the gradient. If gradient option is set to 'No' this colour won't be used
Gradient Linear - Top to Bottom If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction
Background Type None Choose the media type to use as a background. v.3.6.0
Image - Will always be used the same image as a background.
Random Image - Every time administration is loaded a different image will be used, from the chosen folder, as a background.
Background Image   Sets an image to use as background (local or remote). v.3.6.0
'Background Type' must be set to 'Image'.
Image Folder   Path to the image folder relative to the site URL (example: images), or the full URL to the image folder in a remote server (example: http://example.com/images). v.3.6.0
'Background Type' must be set to 'Random Image'.

For remote folder usage, an extra procedure is needed. See Setting Images

Image Tiles No If set to 'Yes' the background image is repeated both vertically and horizontally. v.3.6.0
(example: using a background pattern)
Image Size Property Cover The image size property specifies the size of the background images. v.3.6.0
Auto - The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Horizontal Position Center If a background image is set, the horizontal position property can be set here v.3.6.0
Vertical Position Center If a background image is set, the vertical position property can be set here v.3.6.0

 

Toolbar

adminskin admintoolbar3x

Option Default value Description
Toolbar Colour #ffffff Sets the toolbar colour
Toolbar Second Colour #ededed Sets the toolbar second colour to use with the gradient. If gradient option is set to 'No' this colour won't be used
Gradient Linear- Top to Bottom If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction

 

Sidebar

adminskin adminsidebar3x

Option Default value Description
Sidebar Colour #0088cc Sets the sidebar colour

 

Background Options

Almost done. Add a great look to the background.

adminskin adminbackground3x

Option Default value Description
Background Colour #ffffff Sets the background colour
Second Colour #ffffff Sets the second background colour to use with the gradient. If gradient option is set to 'No' this colour won't be used
Gradient No If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction
Background Type None Choose the media type to use as a background.
Image - Will always be used the same image as a background.
Random Image - Every time administration is loaded a different image will be used, from the chosen folder, as a background.
Background Image   Sets an image to use as background (local or remote).
'Background Type' must be set to 'Image'.
Image Folder   Path to the image folder relative to the site URL (example: images), or the full URL to the image folder in a remote server (example: http://example.com/images).
'Background Type' must be set to 'Random Image'.

For remote folder usage, an extra procedure is needed. See Special Settings

Image Tiles No If set to 'Yes' the background image is repeated both vertically and horizontally.
(example: using a background pattern)
Image Size Property Cover The image size property specifies the size of the background images.
Auto - The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Horizontal Position Center If a background image is set, the horizontal position property can be set here
Vertical Position Center If a background image is set, the vertical position property can be set here

 

Footer Options

Now, the last but not the least. The footer tweaks.

adminskin adminfooter3x

Option Default value Description
Show Footer Info Yes Sets if Joomla! default footer will be shown or not
Share Footer No If set to 'Yes' the below custom footer settings will also be used on the login page.
The 'Show Footer Copyright' in 'Login Options' section must be set to 'Yes'
Footer Custom Message   If 'Show Footer Info' is set to 'Yes', the text entered here will replace the Joomla! default footer text. You can use all combinations between custom message, email and URL.
Insert Email in Footer   If 'Show Footer Info' is set to 'Yes', the email entered here will replace the Joomla! default footer text. You can use all combinations between custom message, email and URL.
Insert URL in Footer   If 'Show Footer Info' is set to 'Yes', the url entered here will replace the Joomla! default footer text. You can use all combinations between custom message, email and URL.
Footer Font Size 12px Sets the font size for the custom or default Joomla! footer
Footer Font Colour #999999 Sets the font colour for the footer
Footer Background Colour #ededed Sets the background colour for the footer
Footer Shadow Yes If set to 'No' removes the default footer shadow

 

Presets

Predefined colour presets to improve your Joomla! administration with a single tap.

KL Admin Skin plugin comes with 24 colour adjustment presets. With just a single click you will be able to completely change your Joomla! administration appearance. This could be used as a good starting point to your changes.

With the Presets, you also have an option to return to the default Joomla! colour set.

The only limit is your imagination!

adminskin presets3x

The use of this presets will only change colours and gradient directions. It won't mess around with any other configurations that you might have in KL Admin Skin plugin.

 

Fine-Tune

Occasionally, you could need to make some small adjustments. The following options will allow you to do those tweaks.

adminskin fine-tune3x

Option Default value Description
Login Custom CSS No This option will allow you to do some fine tuning by adding your own custom CSS to Joomla! login page.
Example:
#selector {
property: value;
}
Login Custom JavaScript No This option will allow you to add some custom JavaScript code to Joomla! login page. v.3.6.0
Example:
// Inline JavaScript
window.onload = function() {
alert('Hello user');
};

// or an external JavaScript file
<script type="text/javascript" src="http://www.example.com/example.js"></script>
Admin Custom CSS No This option will allow you to do some fine tuning by adding your own custom CSS to Joomla! administration.
Example:
#selector {
property: value;
}
Admin Custom JavaScript No This option will allow you to add some custom JavaScript code to Joomla! administration. v.3.6.0
Example:
// Inline JavaScript
window.onload = function() {
alert('Hello user');
};

// or an external JavaScript file
<script type="text/javascript" src="http://www.example.com/example.js"></script>
Troubleshooting   If you are experiencing issues with an extension, you can use this option to indicate which one is giving you trouble and KL Admin Skin will handle that extension in a different manner.
Generally, you don't need to select any extension manually, but you can use this if an issue arises in a specific extension. So don't change these settings unless you are troubleshooting an issue or our support ask you to do so.

 

Offline Overrider

The following option enables you to have the site in offline mode, and enter a keyword to override offline mode without requiring a login.

Just copy the resultant URL and paste it in your browser.

adminskin offlineoverrider3x

Option Default value Description
Enable No Sets if override mode will be enabled or not
Override Key   Set a key to be added to the URL to provide access to your offline site as a guest user

 

Tools

After taking the time to set a whole bunch of options, wouldn't it be nice to be able to make a quick backup of your plugin settings? What about if you administer multiple sites? Wouldn't it be great if you could use one site settings to another?

With this feature, you can quickly backup all KL Admin Skin settings, that you can restore them from at any time without configuring them again. You can use this backup to easily configure KL Admin Skin on multiple sites.

Access to Tools is only available to members of Super Users group. So, if a member of another user group tries to access to Tools it will be prompted with the message:

You are not authorised to view this resource.

Backup/Export

adminskin backup3x

Option Default value Description
Start Backup  

This option gives you the ability to generate a JSON file with all KL Admin Skin settings. You can use this backup file to easily configure KL Admin Skin on multiple sites.

The backup file itself does not contain any images, only its locations. If needed, you have to copy images files separately.

Browsers supported by this option:

chromefirefoxieoperasafari

 

Restore/Import

adminskin restorep3x

Option Default value Description
Start Restore  

After choosing a previously backed up JSON valid file to restore, pressing Start Restore button will import all settings from it.

The file used could have been generated on the site where you are restoring it or may have been generated from another site where KL Admin Skin is available.

Refresh Page   After receiving the indication that the backup file has been successfully imported, you have to press Refresh Page button in order to fetch the newly imported settings.

 

7.2. KL Admin Skin for Joomla! 2.5 Settings label-j25

For Joomla! 2.5 version the parameters are divided into two areas, Login and Administration Options.

 

Login Options

Here, you can tweak all aspects regarding with the login page.

KL Admin Skin for Joomla

Option Default value Description
Background Colour   Sets the background colour
Second Colour   Sets the second background colour to use with the gradient. If gradient option is set to 'No' no change will occur to background
Gradient   If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction
Background Image   Sets an image to use as background
Image Tiles   If set to 'Yes' the background image is repeated both vertically and horizontally.
(example: using a background pattern)
Image Size Property Cover The image size property specifies the size of the background images.
Auto - The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Horizontal Position   If a background image is set, the horizontal position property can be set here
Vertical Position   If a background image is set, the vertical position property can be set here
Show Login Header   Sets if Joomla! header will be shown or not
Login Box Shadow   If set to 'Yes' attaches a smooth shadow to the login box
Custom Logo   Sets a custom logo to use in the login box. It will be placed in the top of the box
Logo Height   For the correct display of the custom logo it is IMPORTANT that the logo height is set
Horizontal Position Center Choose the custom logo horizontal position.
Show Title   Sets if Joomla! default h1 tag title will be shown or not
Custom Title   If 'Show Title' is set to 'Yes', the text entered here will replace the Joomla! default h1 tag title
Show Message   Sets if Joomla! default text tag 'Use a valid username and password to gain access to the administrator backend' will be shown or not
Custom Message   If 'Show Message' is set to 'Yes', the text entered here will replace the Joomla! default text tag
Show Homepage Link   Sets if Joomla! default 'Go to site home page' link will be shown or not
Custom Link Title   If 'Show Homepage Link' is set to 'Yes', the text entered here will replace the Joomla! default 'Go to site home page' tag
Show Lock Image   Sets if Joomla! original lock image will be shown or not
Custom Lock Image   Sets a custom image to replace the Joomla! original lock image.
'Show Lock Image' must be set to 'Yes'
Image Height   For the correct display of the custom lock image it is IMPORTANT that the height is set
Image Width   For the correct display of the custom lock image it is IMPORTANT that the width is set

 

Administration Options

Here, you can tweak all aspects regarding with the administration area.

Header Options

KL Admin Skin for Joomla

Option Default value Description
Show Logo   Sets if Joomla! original logo will be shown or not
Logo Position Right Choose the logo position, left or right side
Custom Logo   Sets a custom image to replace the Joomla! original logo image.
'Show Logo' must be set to 'Yes'
Url Logo   Sets a URL to assign to your custom logo.
(example: your site URL)
Logo Title   Sets a title to assign to your custom logo when hovered.
(example: visit us)
Set Header Colour   Sets if you want to customise header colour or keep the Joomla! default header style
Header Colour   Sets the header colour  
Second Colour   Sets the second header colour to use with the gradient. If gradient option is set to 'No' no change will occur to header
Gradient   If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction
Header Height   Sets the height of the header. If a custom logo is set, for the correct display of it, it is IMPORTANT that the height is set accordingly
Header Round Corners   Sets if the header will be shown with or without rounded corners
Show Header Link   Sets if Joomla! default 'Administration' link on the header will be shown or not
Header Custom Message   If 'Show Header Link' is set to 'Yes', the text entered here will replace the Joomla! default header link.
(example: you can insert your company slogan or support contact)
Header Font Size 20px Sets the font size for the custom or default Joomla! header
Header Font Colour #ffffff Sets the font colour for the custom or default Joomla! header

 

Background Options

KL Admin Skin for Joomla

Option Default value Description
Background Colour   Sets the background colour
Second Colour   Sets the second background colour to use with the gradient. If gradient option is set to 'No' no change will occur to background
Gradient   If set, gradient let you display smooth transitions between the two specified colours. You can choose the gradient type and direction
Background Image   Sets an image to use as background  
Image Tiles   If set to 'Yes' the background image is repeated both vertically and horizontally.
(example: using a background pattern)
Image Size Property Cover The image size property specifies the size of the background images.
Auto - The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Horizontal Position   If a background image is set, the horizontal position property can be set here
Vertical Position   If a background image is set, the vertical position property can be set here

 

Footer Options

KL Admin Skin for Joomla

Option Default value Description
Show Footer Info   Sets if Joomla! default footer will be shown or not
Footer Custom Message   If 'Show Footer Info' is set to 'Yes', the text entered here will replace the Joomla! default footer text. You can use all combinations between custom message, email and URL
Insert Email in Footer   If 'Show Footer Info' is set to 'Yes', the email entered here will replace the Joomla! default footer text. You can use all combinations between custom message, email and URL
Insert URL in Footer   If 'Show Footer Info' is set to 'Yes', the url entered here will replace the Joomla! default footer text. You can use all combinations between custom message, email and URL
Footer Font Size 11px Sets the font size for the custom or default Joomla! footer
Footer Font Colour #000000 Sets the font colour for the custom or default Joomla! footer

 

Here's where it gets tricky ... was kidding.

Be creative and enjoy it!

 

 

8. Special Settings


8.1. Setting Images

Since KL Admin Skin version 3.3.0 you are able to use not only local images but also images from a remote server. This is also applicable to random background images.

Single image:

To use a single image is straightforward, click the 'Select' button from the desired media field, the Joomla! media browser will open, then just select a local image or simply enter the full URL to an image on a remote server in the 'Image URL' field. I know, you already knew this.

Local random images:

Just enter the path to the image folder relative to the site URL, example: images or like images/subfolder. We are done!

Remote random images:

Unlike local random images, to be able to get a random image on a remote server, you will need to do an extra step.

First, same as for local random images, you will need to set the path, but in this case, you have to enter the full URL to the remote folder, example: http://example.com/images or like http://example.com/images/subfolder.

Now, in your remote folder, you have to put a little script file. You will find a .zip file with the name kl_rand_img.zip in our download section. Just download it, unzip it, and place the file into the remote folder. That's all you need to do.

 

The use of remote image files could be a very useful resource. Suppose you administer multiple websites and you want to change your logo or even a background image in all of those websites? Using the ability to get a remote image, you just need to change the image only in one place. No need to walk through all your websites.

 

If you don't have control over the remote images, don't use, because those images can be deleted or changed anytime, the website owner can also restrict access to files and also, let's face it, it's not that ethical, as you are using resources and bandwidth of others.

 

8.2. Responsive Breakpoints

Having a large photo covering the entire background creates an impressive visual impact, the downside is the impact that these images have on bandwidth and site performance, especially on mobile devices.

To enhance the page load speed on small screens, since KL Admin Skin version 3.6.0, you are able to serve scaled-down versions of the background and logo image files. And also, you can take advantage of this resource to deliver radically different image files to different screen widths.

To get it up and running, under the folder where you have your image files, and for each breakpoint that you want to use, you need to create a subfolder. Put your image file inside of each new folder, that you want to be served to the corresponding width. Those image files must use a suffix, based on folder names.

Folder and file naming according to following table.

max-width Folder name File name suffix
1200px lg _lg
992px md _md
768px sm _sm
480px xs _xs

 

Example:

Suppose that you have defined the image file my_image.jpg as the Background Image of the login page and this image file is under images folder. Let's say that you want to serve a scaled-down version, or even a different image, below 480px. First, you need to create a subfolder xs, then grab the scaled-down version, or the new image file, set the file name to my_image_xs.jpg and put it inside images/xs folder.

 

Folder hierarchy and file naming example:

 images
- my_image.jpg
+ lg
- my_image_lg.jpg
+ md
- my_image_md.jpg
+ sm
- my_image_sm.jpg
+ xs
- my_image_xs.jpg

You don’t need to create all subfolders, just the ones that you want to use.

This resource can be used for both local and remote images.

 

Affected fields:

When the 'Responsive Breakpoints' option is active, these are the options that will be 'searching' for scaled-down versions of the image that was defined in them.

Option Context Options group
Background Image Login Background Options
Custom Logo Login Login Box Options
Custom Logo Administration Header Block Options
Header Background Image Administration Header Block Options
Background Image Administration Background Options

 

 

9. Troubleshooting


We try to make our extension most compatible as possible, taking random tests with some of the most popular extensions but it's not possible to cover all of them. Let's face it, there are thousands of them.

Internally, KL Admin Skin plugin can deal in different ways to implement the changes that you wish to apply to Joomla! administration. Since KL Admin Skin version 3.2.0, if an issue arises in a specific extension, you will be able to 'tell' to our plugin which extension should be treated differently. See Fine-Tune

Plugin order is important. Plugins are executed in the order in which they appear in the Ordering column in Plugin Manager. In most cases, the ordering doesn’t matter. However, in some cases, where the results of one plugin can affect the processing of a subsequent one, the order can be important. In this case, you can change the order in the Plugin Manager by adjusting the Ordering values to control the execution order.

Despite this, if you still have issues, provide us steps to replicate it and we will try our best to fix it. We hate bugs and we act swiftly to solve them.

 

 

10. Changelog


These changelogs list details about updates in each version of KL Admin Skin.

 

10.1. KL Admin Skin for Joomla! 3.x label-j30

Version 3.7.1 (04/09/2020)

Fixed Unable to view/change plugin settings if StageIt extension is installed
Fixed Refactor malformed DocBlock comments
Fixed Replaced deprecated function calls and a little of code cleanup

Version 3.7.0 (16/01/2019)

Added to Backup/Export an option to also generate an installable package, the bundle will include all plugin files along with all stored settings. Until now, it was only possible to export plugin settings (Tools)

Version 3.6.1 (11/06/2018)

Fixed Responsive breakpoints not being applied to administration custom logo image when also a URL has been set (Administration Options - Custom Logo)
Fixed In some environments, the Quickicon plugin may lead to a broken CPanel. Quickicon plugin code refactored
Fixed Typo in en-GB language file

Version 3.6.0 (08/05/2018)

Added Responsive breakpoints to enhance the page load speed. Option to serve scaled-down versions of the background and logo image files (Login Options - General Settings & Administration Options - General Settings) 
Added Ability to add custom JavaScript code to login and administration pages (Fine-Tune)
Added Set a background image to administration header option (Administration Options - Header)
Added Remove HTML <hr> tag from login box option (Login Options - Login Box Options)
Added Set <hr> border colour & width options (Login Options - Login Box Options)

Version 3.5.1 (13/01/2018)

Fixed Using PHP 5.6 or lower versions may lead to a totally broken plugin configuration
Fixed Rarely, but in some environments, instead of displaying the expected content, a blank page may be returned
Fixed Additional checks needed to avoid the custom logo not being shown when 'Site Name', in Joomla! Global Configuration, contain any special characters (Login Options - Custom Logo)

Version 3.5.0 (25/05/2017)

Changed Can run over a copy of backend template with a different name of Isis (but, must be always based on Isis template). Different styles were already supported, but the template name had to be Isis, not anymore 
Changed Now, the Link Colour and Link Hover Colour options also target the show/hide Sidebar button (Administration Options - General Settings)
Changed Plugin core changes that significantly reduce its load
Fixed Google fonts not being applied when Joomla! is configured to use HTTPS protocol (Login Options - General Settings & Administration Options - General Settings)
Fixed Improper check may lead to custom logo not to be shown when 'Site Name', in Joomla! Global Configuration, contain any special characters (Login Options - Custom Logo)
Fixed Missing 'Download ID' label from Download ID field

Version 3.4.0 (09/05/2017)

Added Ability to use custom fonts from the Google Fonts service (Login Options - General Settings & Administration Options - General Settings)
Added Option to apply or ignore the customization made to Login page & Administration area (Login Options & Administration Options)
Added Set the colour to use for links and for links on hover (Administration Options - General Settings)
Added Access to help documentation from the help button within the plugin toolbar
Changed Plugin Restore/Import script completely rewritten (Tools)
Changed For consistency apply to dropdown list field background colour the one used in Dropdown Menu Hover Colour option
Fixed Preview Login button incorrectly shows the CPanel instead of Joomla! administration login page
Fixed Major reinforcement of validation tasks to increase stability and compatibility with 3rd party extensions
Fixed Issue when an image/random image and also a gradient are set as a background, the gradient is not being applied, just a solid colour (Login Options - Background Options & Administration Options - Background Options)
Fixed Troubleshooting option may throw a Javascript error in environments where only Joomla! core extensions are available (Administration Options - Fine-Tune)
Fixed Minor style fixes to deal with the changes introduced to Isis template in Joomla! 3.7

Version 3.3.2 (19/10/2016)

Fixed Replace Admin Home Icon option stop working after upgrading to Joomla! 3.6.3 (Administration Options - Navbar)
Fixed For consistency apply to Sidebar hover colour the one used in Sidebar Colour option - a change introduced to Joomla! 3.6.3 - (Administration Options - Sidebar)

Version 3.3.1 (24/08/2016)

Added Minified versions of all JS & CSS plugin files
Added Preloading functionality & fade in effect applied to login background images, for a smoother and better user experience, especially when dealing with heavy images

Version 3.3.0 (09/08/2016)

Added Restore Joomla! default colour set (Presets)
Added Set a link to assign to your custom footer icon or image option (Login Options - Footer Options)
Changed Ability to use local or remote image location (Login Options & Administration Options)
Fixed Backup not working on Safari browsers (Tools)
Fixed Avoid Download ID deletion when restoring a backup file (Tools)
Fixed Number field type, it does not detect when its value change
Fixed With Joomla! cache enabled and after restoring a backup file through Restore/Import option (Tools), it won't show the newly imported settings
Fixed Inability to use the Joomla! Update core component (since Joomla! 3.6.0), receiving a 403 or 500 error when trying to update

Version 3.2.1 (15/04/2016)

Fixed Issue when an image/random image is used as a background in the Login page, no gradient is applied as a background in Administration area, albeit it is defined
Fixed No hover effect is being applied to login button on the Login page
Changed All colour fields default values and colour presets values were converted from HEX to RGBA

Version 3.2.0 (11/04/2016)

Added New version update notifier & live update support through standard Joomla! update manager
Added Ability to apply custom CSS to login and administration pages (Fine-Tune)
Added Disable Joomla! language filter in login page option (Login Options - Login Box Options)
Added Troubleshooting field. Ability to select trouble extension to be treated differently (Fine-Tune)
Added Random background image to login and administration pages option (Login Options - Background Options & Administration Options - Background Options)
Added Set position to login button option (Login Options - Login Box Options)
Added Set login box border colour option (Login Options - Login Box Options)
Added One touch presets. One click to change administrator appearance (Presets)
Changed All colour fields now accept opacity values

Version 3.1.2 (02/10/2015)

Fixed Issue caused to YOOtheme Widgetkit component when it retrieves data

Version 3.1.1 (03/07/2015)

Fixed To deal with the changes introduced in administration login page in Joomla! 3.4.2

Version 3.1.0 (26/06/2015)

Added Alert user if edits were made to the plugin parameters
Added Conditional fields. Show/hide plugin parameters fields based on the value of another field
Added Preview Login button. Preview Joomla! administration login page without logging out
Changed Improved plugin performance

Version 3.0.5 (01/02/2015)

Added Option to Backup & Restore plugin settings (Tools)
Fixed Minor issue caused to 3rd party extension

Version 3.0.4 (15/10/2014)

Added Sets if override mode will be enabled or not (Offline Overrider)
Added Set a key to be added to the URL to provide access to your offline site as a guest user (Offline Overrider)
Added Custom login footer icon & width options (Login Options - Footer Options)
Added Replace admin home icon option (Administration Options - Navbar)

Version 3.0.3 (01/09/2014)

Added Custom administration favicon option
Added Login box custom message position option
Added Update notification through Joomla! update system
Added Afrikaans, Chinese (traditional), Dutch, French, German, Italian, Malay, Portuguese (Portugal & Brazil) and Spanish translations
Fixed Minor styling issue caused in front-end when site is offline

Version 3.2 (28/07/2014)

Fixed Login 'Show Footer Joomla! Icon' problem after upgrading to Joomla! 3.3.2

Version 3.1 (03/07/2014)

Added Full-width login button option
Added Login button colour option
Added Navbar hover colour option
Added Dropdown menu hover colour option

Version 3.0 (24/06/2014)

First release for Joomla! 3.x

 

10.2. KL Admin Skin for Joomla! 2.5 label-j25

Version 1.1 (01/05/2014)

Added Radial gradient options
Added Login shadow option
Some minor fixes

Version 1.0 (10/01/2014)

First release for Joomla! 2.5

 

 

11. Acknowledgment


We would like to thank all who somehow participate in the development of KL Admin Skin making it a successful project.

Contributors:

Abilion Publishing House with Polish translation

Adrian Rus with Romanian translation

Edgar Ferreira with Portuguese (Brazil) translation

Escambio Online with Spanish translation

Ilagnayeru (MIG) Manickam with Tamil translation

Malayneum with Malay translation

Mátyás Timár with Hungarian translation

Pectus Publishing House with Slovak translation

Strousberg Studios with German translation

Wim Vandekerckhove with Dutch and Flemish translations

 

 

12. What Else?


We like to improve KL Admin Skin wherever we can and appreciate your feedback.

If you like this extension, please help us making it even better by writing your review on Joomla! Extensions Directory (JED).

Nevertheless, if you have any questions about KL Admin Skin please feel free for asking here.

We keep it simple, but we make it special!

https://www.kreativelizard.com

 

 


Copyright © 2014-2020 KreativeLizard, All rights reserved.