You are on page 1of 4

“Adminica | The Professional Admin Template” Documentation by “Oisin Lavery, Tricycle Interactive” v1.

4

“Adminica | The Professional Admin Template”
Created: February 2011 By: Oisin Lavery Email: themeforest@tricycle.ie Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

This help file is best used in conjunction with the Adminica online documentation site. Make sure to read this if you want a more comeplete understanding of how Adminica works.

http://www.tricycle.ie/adminica/ index.php/docs/
Here you will see the source code for all the various pages at the bottom of each given page: ● A description and explanation on how the individual page and its elements work ● You can see you the original HTML before Javascript has kicked in. ● You can see the associated Javascript ● Code comments It is much more effective to see it all in one place than having to switch between documentation and the actual template. I reccommend inspecting the page using Firebug to get an even better understanding.

Table of Contents
1. 2. 3. 4. 5. 6. 7. HTML Structure CSS Files and Structure JavaScript PSD Files Sources and Credits PHP Code Explanation (If your theme uses PHP) Any additional unique features that need an overview

to change the colour theme simply add theme and background stylesheets eg.css and layout_top.css after all.css. Flat Area are used to hold text.) to accommodate the window. The best way to learn about all the different things a box can hold is to go to the documentation site . sidebar. fluid.gs grid fashion eg. a grabbed icon to drag. drop and sort the box within the main content area. This is done very easily by adding/changing a style sheet or two. By default it gives Adminica a fluid width and a sidebar. To alter the base layout you simply add a different style sheet. Boxes are one of Adminica's main features. B) CSS Files and Structure . to make a flat area half the width of the content area you would give it a class="grid_8". Adminica also scales down automatically to mobile devices of different resolutions..top Adminica has a number of different layouts. The main elements of the layout are: ● Top Bar (div id="topbar") ● Sidebar (div id="sidebar") ● Content (div class="main_container") The Top Bar and Sidebar hold similar information and so are interchangeable (Although you could display both if you wanted to and the page would display just fine). add the stylesheets layout_fixed.css. The layout uses a 16 column. You can combine these in many ways eg. accordions. Their width can be controlled in the standard 960.css. To test this resize your browser until it gets as narrow as an iPhone display. and a block to contain whatever you want to place in the box. Similar to the layout.ie/adminica/docs/.gs framework and so works well in every browser. The main elements of the Content Area are: ● Navigation (div id="nav_tops") ● Flat Areas (div class="flat_area") ● Boxes (div class="box") ○ Title Bar (h2 class="box_head") (optional) ○ Grabber (a class="grabber") (optional) ○ Toggle (a class="toggle") (optional) ○ Block (div class="block") ■ Accordions ■ Tabs ■ Dynamic Table ■ Code Box ■ . tabbed-accordions. I would reccommend minifying all the stylesheets for the production version of your site. There can be multiple Content Areas in a page hence has a div class instead of id. tabbed tables and lots of other really cool things! A standard box is composed of 4 main elements. The third level dropdown is implemented using a jQuery UI Accordion.css . pictures and general content. a toggle to open and close the box..css and bg_wood. this is a truly unique way of making a dropdown and also very suitable for devices with lower resolution displays. They are not meant to be sorted or toggled although they can rearrange if a neighbouring content box is moved.tricycle.css gives Adminica its base black style and should always be included even if you want a different colour theme. The most important css file is main.css which imports a number of other stylesheets. that holds the style to all of the layout elements. It work's perfectly on an iPhone for example (without changing the HTML of the page). Unlike slideout menus this also degrades excellently if the user doesn't have Javascript turned on. It can have a fixed or fluid width and it can have a sidebar or be full width (NEW in V1.the code is displaced at the bottom of each page and is well commented: http://www. full width page with a topbar.A) HTML Structure . To give it a fixed width and top bar. To apply it add theme_light. Multicolumn text layouts are very easy to make in thie fashion. The stylesheet theme_base. they have been implemented in a very flexible manner allowing them to hold all sorts of data and easily be converted into tabbed boxes. I have implemented it like this to keep the head of the document clean and also to allow you to easily understand how it all works and make changes/tweaks if necessary. Adminica 1.icons. fluid version of the 960.etc.top Adminica uses one main stylesheet all.. etc.1: now you can have full width and a hover sidebar). for a brown theme with a wood background add the stylesheets theme_brown. the title bar.4 has an additional white theme. watch as the css changes(nav. It has 3 levels of dropdown laid out in nested unordered lists (standard way). The dropdown Navigation is contained within the Content Area (usually the first one).

it's much easier to change the 5 colour values in the css theme files than saving images out of Photoshop.js is right at the bottom below the HTML code section. Rather than go through each plugin I've given links to their support pages where their use is explained much more extensively.com/ ● jQueryFileTree ● http://abeautifulsite. There you will find the main 5 colours which make up each theme listed.css. jquerui.html ● UItoTop (NEW in V1.top Adminica is mostly generated using CSS3 and so the PSDs do not cover everything. If you want to see how they were configured for Adminica go to the relevant page on the documentation site and scroll to the bottom.com/ ● Tipsy ● http://onehackoranother. Plugins along with their licenses can be found in the js folder. This is where the plugins get their Adminica specific settings eg.moxiecode.1) ● http://www.css and look at the top comments.mattvarone.com/jQuery-UI-Support-on-the-iPhone-td22011162s27240.css) should be left alone as they are handling generic things like resetting default browser styles and laying out the layout framework. When you have decided what combination you want for your own site/application I would reccommend combining them into a single file to save bandwidth and cut load times.js.css.net/blog/2008/03/jquery-file-tree/ ● DataTables ● http://www. Simply find and replace those colours with your new colours in the newly duplicated file.top This theme uses JQuery and jQuery UI extensively.com/projects/jquery/tipsy/ ● iPhoneUI ● http://old. Early version of Adminica Note: As previously described. Dashboard Feature Box icons 3. simply duplicate theme_blue. I have commented this fully so it is easy to see what each function is doing.com/ ● jQuery UI (from Google CDN) ● http://jqueryui. ie.net/ ● TinyMCE ● http://tinymce. etc. Experimentation is the name of the game! This is a very flexible way of changing the layout and styles of Adminica.com/uniform/ ● LiveValidation ● http://livevalidation.com/slidernav/ ● SyntaxHighlighter ● http://alexgorbatchev. text.Note: It is really easy to create your own themes.com/web-design/uitotop-jquery-plugin/ Most of the Javascript files are called from js/plugin.css.datatables. Other than that I have chosen the best jQuery plugins possible. this has been done to keep the head section clutter free. D) PSD Files . All the other stylesheets (grid.css. Therelevant Javascript code from adminica_ui.com/SyntaxHighlighter/ ● Uniform ● http://pixelmatrixdesign. to change the style of adminica. You can then remove the layout and theme stylesheets you don't need.css.js. ie6.nabble. .net/ ● SliderNav ● http://devgrow. The only file which is custom to Adminica is js/adminica/adminica_ui. Here is the full list: ● jQuery (from Google CDN) ● http://jquery. It also has the advantage of being very easy to understand what is going on. C) JavaScript . It does however include all the layers for: 1. how fast a box toggle is or lowering opacity when swapping tabs. The Adminica Logo 2.com/ ● Fancybox ● http://fancybox. reset.

iconsweets2.premiumpixels. If you have a more general question relating to the themes on ThemeForest. you might consider visiting the forums and asking your question in the "Item Discussion" section.Tricycle Interactive Go To Table of Contents Documentation to go here . but I'll do my best to assist.premiumpixels.gs/ framework Once again.com/ ● Honeycomb background style from http://www. ● http://960. ● Icons from http://www. icons or other files as listed. No guarantees.E) Sources and Credits . As I said at the beginning.com/ ● Ribbon graphic from http://www.top I've used the following images. Oisin Lavery .com/ ● All the previously mentioned Javascript files. thank you so much for purchasing this theme. I'd be glad to help you if you have any questions relating to this theme.