AdminicaDocumentation
Content
“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: [email protected] 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
A) HTML Structure - top Adminica has a number of different layouts. It can have a fixed or fluid width and it can have a sidebar or be full width (NEW in V1.1: now you can have full width and a hover sidebar). You can combine these in many ways eg. fluid, full width page with a topbar. This is done very easily by adding/changing a style sheet or two. The layout uses a 16 column, fluid version of the 960.gs framework and so works well in every browser. Adminica also scales down automatically to mobile devices of different resolutions. It work's perfectly on an iPhone for example (without changing the HTML of the page). To test this resize your browser until it gets as narrow as an iPhone display, watch as the css changes(nav, sidebar,icons, etc.) to accommodate the window. 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). There can be multiple Content Areas in a page hence has a div class instead of id. 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 ■ ...etc. The dropdown Navigation is contained within the Content Area (usually the first one). It has 3 levels of dropdown laid out in nested unordered lists (standard way). The third level dropdown is implemented using a jQuery UI Accordion, this is a truly unique way of making a dropdown and also very suitable for devices with lower resolution displays. Unlike slideout menus this also degrades excellently if the user doesn't have Javascript turned on. Flat Area are used to hold text, pictures and general content. Their width can be controlled in the standard 960.gs grid fashion eg. to make a flat area half the width of the content area you would give it a class="grid_8". Multicolumn text layouts are very easy to make in thie fashion. They are not meant to be sorted or toggled although they can rearrange if a neighbouring content box is moved.. Boxes are one of Adminica's main features, they have been implemented in a very flexible manner allowing them to hold all sorts of data and easily be converted into tabbed boxes, accordions, tabbed-accordions, tabbed tables and lots of other really cool things! A standard box is composed of 4 main elements; the title bar; a grabbed icon to drag, drop and sort the box within the main content area; a toggle to open and close the box; and a block to contain whatever you want to place in the box. The best way to learn about all the different things a box can hold is to go to the documentation site - the code is displaced at the bottom of each page and is well commented: http://www.tricycle.ie/adminica/docs/.
B) CSS Files and Structure - top Adminica uses one main stylesheet all.css which imports a number of other stylesheets. 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. I would reccommend minifying all the stylesheets for the production version of your site. The most important css file is main.css, that holds the style to all of the layout elements. By default it gives Adminica a fluid width and a sidebar. To alter the base layout you simply add a different style sheet. To give it a fixed width and top bar, add the stylesheets layout_fixed.css and layout_top.css. The stylesheet theme_base.css gives Adminica its base black style and should always be included even if you want a different colour theme. Similar to the layout, to change the colour theme simply add theme and background stylesheets eg. for a brown theme with a wood background add the stylesheets theme_brown.css and bg_wood.css. Adminica 1.4 has an additional white theme. To apply it add theme_light.css after all.css
Note: It is really easy to create your own themes, simply duplicate theme_blue.css and look at the top comments. There you will find the main 5 colours which make up each theme listed. Simply find and replace those colours with your new colours in the newly duplicated file. Experimentation is the name of the game! This is a very flexible way of changing the layout and styles of Adminica. It also has the advantage of being very easy to understand what is going on. 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. You can then remove the layout and theme stylesheets you don't need. All the other stylesheets (grid.css, ie.css, ie6.css, reset.css, text.css, jquerui.css) should be left alone as they are handling generic things like resetting default browser styles and laying out the layout framework.
C) JavaScript - top This theme uses JQuery and jQuery UI extensively. Other than that I have chosen the best jQuery plugins possible. Plugins along with their licenses can be found in the js folder. Here is the full list: ● jQuery (from Google CDN) ● http://jquery.com/ ● jQuery UI (from Google CDN) ● http://jqueryui.com/ ● Fancybox ● http://fancybox.net/ ● TinyMCE ● http://tinymce.moxiecode.com/ ● jQueryFileTree ● http://abeautifulsite.net/blog/2008/03/jquery-file-tree/ ● DataTables ● http://www.datatables.net/ ● SliderNav ● http://devgrow.com/slidernav/ ● SyntaxHighlighter ● http://alexgorbatchev.com/SyntaxHighlighter/ ● Uniform ● http://pixelmatrixdesign.com/uniform/ ● LiveValidation ● http://livevalidation.com/ ● Tipsy ● http://onehackoranother.com/projects/jquery/tipsy/ ● iPhoneUI ● http://old.nabble.com/jQuery-UI-Support-on-the-iPhone-td22011162s27240.html ● UItoTop (NEW in V1.1) ● http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ Most of the Javascript files are called from js/plugin.js, this has been done to keep the head section clutter free. The only file which is custom to Adminica is js/adminica/adminica_ui.js. This is where the plugins get their Adminica specific settings eg. how fast a box toggle is or lowering opacity when swapping tabs, etc. I have commented this fully so it is easy to see what each function is doing. Rather than go through each plugin I've given links to their support pages where their use is explained much more extensively. 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. Therelevant Javascript code from adminica_ui.js is right at the bottom below the HTML code section.
D) PSD Files - top Adminica is mostly generated using CSS3 and so the PSDs do not cover everything. It does however include all the layers for: 1. The Adminica Logo 2. Dashboard Feature Box icons 3. Early version of Adminica Note: As previously described, to change the style of adminica, it's much easier to change the 5 colour values in the css theme files than saving images out of Photoshop.
E) Sources and Credits - top I've used the following images, icons or other files as listed. ● Icons from http://www.iconsweets2.com/ ● Ribbon graphic from http://www.premiumpixels.com/ ● Honeycomb background style from http://www.premiumpixels.com/ ● All the previously mentioned Javascript files. ● http://960.gs/ framework Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.
Oisin Lavery - Tricycle Interactive Go To Table of Contents
Documentation to go here
“Adminica | The Professional Admin Template” Created: February 2011 By: Oisin Lavery Email: [email protected] 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
A) HTML Structure - top Adminica has a number of different layouts. It can have a fixed or fluid width and it can have a sidebar or be full width (NEW in V1.1: now you can have full width and a hover sidebar). You can combine these in many ways eg. fluid, full width page with a topbar. This is done very easily by adding/changing a style sheet or two. The layout uses a 16 column, fluid version of the 960.gs framework and so works well in every browser. Adminica also scales down automatically to mobile devices of different resolutions. It work's perfectly on an iPhone for example (without changing the HTML of the page). To test this resize your browser until it gets as narrow as an iPhone display, watch as the css changes(nav, sidebar,icons, etc.) to accommodate the window. 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). There can be multiple Content Areas in a page hence has a div class instead of id. 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 ■ ...etc. The dropdown Navigation is contained within the Content Area (usually the first one). It has 3 levels of dropdown laid out in nested unordered lists (standard way). The third level dropdown is implemented using a jQuery UI Accordion, this is a truly unique way of making a dropdown and also very suitable for devices with lower resolution displays. Unlike slideout menus this also degrades excellently if the user doesn't have Javascript turned on. Flat Area are used to hold text, pictures and general content. Their width can be controlled in the standard 960.gs grid fashion eg. to make a flat area half the width of the content area you would give it a class="grid_8". Multicolumn text layouts are very easy to make in thie fashion. They are not meant to be sorted or toggled although they can rearrange if a neighbouring content box is moved.. Boxes are one of Adminica's main features, they have been implemented in a very flexible manner allowing them to hold all sorts of data and easily be converted into tabbed boxes, accordions, tabbed-accordions, tabbed tables and lots of other really cool things! A standard box is composed of 4 main elements; the title bar; a grabbed icon to drag, drop and sort the box within the main content area; a toggle to open and close the box; and a block to contain whatever you want to place in the box. The best way to learn about all the different things a box can hold is to go to the documentation site - the code is displaced at the bottom of each page and is well commented: http://www.tricycle.ie/adminica/docs/.
B) CSS Files and Structure - top Adminica uses one main stylesheet all.css which imports a number of other stylesheets. 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. I would reccommend minifying all the stylesheets for the production version of your site. The most important css file is main.css, that holds the style to all of the layout elements. By default it gives Adminica a fluid width and a sidebar. To alter the base layout you simply add a different style sheet. To give it a fixed width and top bar, add the stylesheets layout_fixed.css and layout_top.css. The stylesheet theme_base.css gives Adminica its base black style and should always be included even if you want a different colour theme. Similar to the layout, to change the colour theme simply add theme and background stylesheets eg. for a brown theme with a wood background add the stylesheets theme_brown.css and bg_wood.css. Adminica 1.4 has an additional white theme. To apply it add theme_light.css after all.css
Note: It is really easy to create your own themes, simply duplicate theme_blue.css and look at the top comments. There you will find the main 5 colours which make up each theme listed. Simply find and replace those colours with your new colours in the newly duplicated file. Experimentation is the name of the game! This is a very flexible way of changing the layout and styles of Adminica. It also has the advantage of being very easy to understand what is going on. 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. You can then remove the layout and theme stylesheets you don't need. All the other stylesheets (grid.css, ie.css, ie6.css, reset.css, text.css, jquerui.css) should be left alone as they are handling generic things like resetting default browser styles and laying out the layout framework.
C) JavaScript - top This theme uses JQuery and jQuery UI extensively. Other than that I have chosen the best jQuery plugins possible. Plugins along with their licenses can be found in the js folder. Here is the full list: ● jQuery (from Google CDN) ● http://jquery.com/ ● jQuery UI (from Google CDN) ● http://jqueryui.com/ ● Fancybox ● http://fancybox.net/ ● TinyMCE ● http://tinymce.moxiecode.com/ ● jQueryFileTree ● http://abeautifulsite.net/blog/2008/03/jquery-file-tree/ ● DataTables ● http://www.datatables.net/ ● SliderNav ● http://devgrow.com/slidernav/ ● SyntaxHighlighter ● http://alexgorbatchev.com/SyntaxHighlighter/ ● Uniform ● http://pixelmatrixdesign.com/uniform/ ● LiveValidation ● http://livevalidation.com/ ● Tipsy ● http://onehackoranother.com/projects/jquery/tipsy/ ● iPhoneUI ● http://old.nabble.com/jQuery-UI-Support-on-the-iPhone-td22011162s27240.html ● UItoTop (NEW in V1.1) ● http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ Most of the Javascript files are called from js/plugin.js, this has been done to keep the head section clutter free. The only file which is custom to Adminica is js/adminica/adminica_ui.js. This is where the plugins get their Adminica specific settings eg. how fast a box toggle is or lowering opacity when swapping tabs, etc. I have commented this fully so it is easy to see what each function is doing. Rather than go through each plugin I've given links to their support pages where their use is explained much more extensively. 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. Therelevant Javascript code from adminica_ui.js is right at the bottom below the HTML code section.
D) PSD Files - top Adminica is mostly generated using CSS3 and so the PSDs do not cover everything. It does however include all the layers for: 1. The Adminica Logo 2. Dashboard Feature Box icons 3. Early version of Adminica Note: As previously described, to change the style of adminica, it's much easier to change the 5 colour values in the css theme files than saving images out of Photoshop.
E) Sources and Credits - top I've used the following images, icons or other files as listed. ● Icons from http://www.iconsweets2.com/ ● Ribbon graphic from http://www.premiumpixels.com/ ● Honeycomb background style from http://www.premiumpixels.com/ ● All the previously mentioned Javascript files. ● http://960.gs/ framework Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.
Oisin Lavery - Tricycle Interactive Go To Table of Contents
Documentation to go here
Sponsor Documents
Recommended
No recommend documents