Complete Liquid Admin Control Panel

Copyright (c) 2008 OXYLUS Development http://www.oxylusflash.com Email: support@oxylusflash.ro Bug Support: http://forum.oxylusflash.com/013-complete-liquid-admin-control-panel/ Video Overview/Help : time permitting, a video will be available soon on template page where you purchased it. In the meantime, some of our other videos might help : http://forum.oxylusflash.com/video-overviews-tutorials/ Hello and thank you for purchasing one of our templates. Customisation of a css/html template will of course require some knowledge of css/html as well as Photoshop for image manipulation. If you are a novice to css/html or photoshop you might find the following links useful : http://www.w3schools.com/Css/default.asp http://graphicssoft.about.com/od/photoshop/l/bllps5out.htm If for some reason you find it hard to locate some elements or access certain properties, we highly recommend using the FireBug Add-on for Firefox, its priceless (and free). Just enable firebug, then right-click on an element and choose Inspect. Alternatively, you can open firebug, select inspect and go over the elements. https://addons.mozilla.org/en-US/firefox/addon/1843 Suggested editor for html/css files : Adobes Dreamweaver.

TABLE OF CONTENTS
A) HTML Structure B) CSS Files C) PSD Files
----------------------------------------------------------------------------------------------------------

A) HTML Structure
This admin theme is a liquid layout with two columns. Please open 01.png from the Help\shots\ folder. As an example, this should help you understand how you can easily change the appearance of the <h2> header. On the lower right window within Firebug, at the top right corner, you can see the css file that needs to be edited (general.css) as well as the line where you have to go (line 601 ). Then you can see the actual css code that coresponds to the element (h2). Within its container you will be able to see the properties that are applied to the element, like the font style, margins and so many more. It will also become aparent that the color property (color: #FFFFFF).

is not set but inherited from the .title_wrapper element (which can be found in general.css line 582). Now that you know what you have to edit, please open the css file that needs to be edited in your favorite css editor (like Dreamweaver) and edit the properties in the way you see fit. Keep in mind that the properties you see crossed over in firebug, are properties to that element that are overridden by the top ones that are not crossed over. Follow these steps to find and customise any css element on the page to your preferences. Lets do a simple color change for the h2 element, lets make it green. What you need to do is add the text in bold and the h1s will become green : From :
.title_wrapper { color:#FFFFFF ; }

Into :
.title_wrapper { color:# 509A00 ; }

An important thing you should know is that in order to set the current section top menu button as active, you would need to set class=selected to the link tag. For ex :
<li><a href="#" class="selected"><span><span>Main Controls</span></span></a></li> Active <li><a href="#"><span><span>Server Settings</span></span></a></li> Inactive

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. For Example :
#wrap #primaryContent a { color: #someColor; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

B) CSS
The css files used in this template are : admin- ie.css fixes for ms ie browser, main page. admin- login-ie.css fixes for ms ie browser, login page. admin- login.css styles for the login page. admin.css css index, includes the other css files. dashboard.css contains styles for the dashboard item collection forms.css contains site messages styles. general.css most common styles defined here. pagination.css pagination/navigation styles tables.css tables design styles. If not customary to CSS, please use Firebug to locate all the elements and their properties within these stylesheets.

C) PSD Files The following .psd files have been included : Main designs : 01-layout1.psd 02-layout1-mouseovers.psd 03-login.psd 04-login-2.psd .psd files with slices ( found in folder \psd\slices\ ) login_slice1.psd login_slice2.psd slice1.psd slice2.psd slice3.psd If you'd like to change the titles, menu etc. open the corresponding .psd file, make the necessary adjustments, and export the compressed files. If you want to heavily modify the graphics of the template you should have medium Photoshop and css skills or come to us, another company or freelancer for custom work.

Thank for purchasing this template. If you cant take care of the modifications you require yourself, we can offer preferential pricing for custom work on our templates (from css and photoshop to php/mysql development and Flash actionscript).

Enjoy this brand new release from Oxylus Design, a Oxylus Development Brand.