Gebo Admin
Thank you for purchasing Gebo Admin template.
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.
Author: tzd-themes.com
Updated: 15.03.2013
v 1.8.1

About Gebo Admin template

Gebo Admin is a fully featured, easily customizable backend template that can be use for any web aplication (cms,crm,statistics etc).

Main features:

  1. Responsive two column layout (hideable sidebar)
  2. Fixed top bar
  3. HTML5/CSS3
  4. Based on Twitter Bootstrap Framework
  5. Location finder (Google Maps)
  6. Custom search page
  7. Custom mailbox
  8. Charts (lines, bars, pies)
  9. Chat
  10. User page (static)
  11. Drag&Drop Multiupload
  12. Datepicker, Timepicker
  13. Image grid
  14. 2 icon sets (glyphicons & splashy icons)
  15. Custom error page
  16. Tables (static, dynamic, server side proccessing)
  17. Notifications (sticky, modal boxes)
  18. Responsive file explorer
  19. WYSIWYG editor with integrated file explorer
  20. Regular and extended form elements (sliders, progresbars, enchanced select elements, 2 column multiselect, styled form elements, colorpicker, masked inputs, tags handler and many more)
  21. Tooltips (always visible in the viewport), Popovers
  22. Bootstrap Javascript Plugins (modal, dropdown, tab, popover, collapse, typeahead, rowlink, fileupload )
  23. Form Validation
  24. Step by Step Wizard
  25. Drag&Drop Widget Boxes

CSS Files

Gebo Admin uses couple of styling sheets to control visual apperance. There are 2 CSS files from bootstrap framework, main stylesheet, theme stylesheets, stylesheet for IE<9 and plugins stylesheets.
  • bootstrap/css/bootstrap.min.css, bootstrap/css/bootstrap-responsive.min.css

    Minified stylesheets from bootstrap framework

  • css/style.css

    Main Gebo Admin styleshet

  • css/blue.css, css/brown.css, css/dark.css, css/green.css, css/eastern_blue.css, css/tamarillo.css

    Themes for Gebo Admin

  • css/ie.css

    Styleshet for IE<9

JS Files

Gebo Admin uses many 3rd party js plugins. These plugins are located in bootstrap/js/ (plugins from bootstrap framework), js/ (small plugins) and lib/ (more complex plugins).

Every plugin has own documentation, just click on plugin link.

Important If you remove some elements from page you also need to remove coresponding js functions (if page doesn't render properly after that open firebug or other js console and check for errors)

Main structure

Gebo uses a layout from Bootstrap Framework. This layout is fully responsive, it looks good on desktop, tables and mobile devices. It has top fixed bar (collapsible on mobile devices), fluid content and sidebar with search form and collapsible menu.

Extended documentation for fluid grid layout is here.

There is also option to make layout fixed, just add gebo-fixed class to body <body class="gebo-fixed">

<head>
  //css files & google fonts
</head>
<body>
  <div id="maincontainer">
    <div class="navbar navbar-fixed-top">
      //top fixed navigation bar
    </div>
    <div id="contentwrapper">
      <div class="main_content">
        //main content
      </div>
    </div>
    <div class="sidebar">
      //sidebar content
    </div>
    //js scripts
  </div>
</body>

Top navigation

To enable mouseover in top bar navigation uncoment line 54 in gebo_comon.js gebo_nav_mouseover.init(); add menu_hover class to body tag: <body class="menu_hover">

Dashoard quick access navigation

By default quick access navigation is centered, to align this navigation to the left add iconNav_left class - <ul class="dshb_icoNav iconNav_left">, to the right iconNav_right - <ul class="dshb_icoNav iconNav_right">

External links

There is a js function (gebo_external_links.init() located in gebo_common.js) that changes all external links (icon and attribute target="_blank" is added). To disable this function for single link add ext_disabled class to this link: <a href="http://url.com" class="ext_disabled">.

Themes

There are 6 predefined themes css/blue.css, css/brown.css, css/dark.css, css/green.css, css/eastern_blue.css, css/tamarillo.css. You can easily create your own, just duplicate one of the theme file and set your colors.

To use Style switcher add 
<div class="style_switcher">
  <div class="sepH_c">
    <p>Colors:</p>
      <div class="clearfix">
        <a href="javascript:void(0)" class="style_item jQclr blue_theme style_active" title="blue">blue</a>
        <a href="javascript:void(0)" class="style_item jQclr dark_theme" title="dark">dark</a>
        <a href="javascript:void(0)" class="style_item jQclr green_theme" title="green">green</a>
        <a href="javascript:void(0)" class="style_item jQclr brown_theme" title="brown">brown</a>
        <a href="javascript:void(0)" class="style_item jQclr eastern_blue_theme" title="eastern_blue">eastern blue</a>
        <a href="javascript:void(0)" class="style_item jQclr tamarillo_theme" title="tamarillo">tamarillo</a>
    </div>
  </div>
  <div class="sepH_c">
    <p>Backgrounds:</p>
    <div class="clearfix">
      <span class="style_item jQptrn style_active ptrn_def" title=""></span>
      <span class="ssw_ptrn_a style_item jQptrn" title="ptrn_a"></span>
      <span class="ssw_ptrn_b style_item jQptrn" title="ptrn_b"></span>
      <span class="ssw_ptrn_c style_item jQptrn" title="ptrn_c"></span>
      <span class="ssw_ptrn_d style_item jQptrn" title="ptrn_d"></span>
      <span class="ssw_ptrn_e style_item jQptrn" title="ptrn_e"></span>
    </div>
  </div>
  <div class="sepH_c">
    <p>Layout:</p>
    <div class="clearfix">
      <label class="radio inline"><input type="radio" name="ssw_layout" id="ssw_layout_fluid" value="" checked /> Fluid</label>
      <label class="radio inline"><input type="radio" name="ssw_layout" id="ssw_layout_fixed" value="gebo-fixed" /> Fixed</label>
    </div>
  </div>
  <div class="sepH_c">
    <p>Sidebar position:</p>
    <div class="clearfix">
      <label class="radio inline"><input type="radio" name="ssw_sidebar" id="ssw_sidebar_left" value="" checked /> Left</label>
      <label class="radio inline"><input type="radio" name="ssw_sidebar" id="ssw_sidebar_right" value="sidebar_right" /> Right</label>
    </div>
  </div>
  <div class="sepH_c">
    <p>Show top menu on:</p>
    <div class="clearfix">
      <label class="radio inline"><input type="radio" name="ssw_menu" id="ssw_menu_click" value="" checked /> Click</label>
      <label class="radio inline"><input type="radio" name="ssw_menu" id="ssw_menu_hover" value="menu_hover" /> Hover</label>
    </div>
  </div>
    
  <div class="gh_button-group">
    <a href="#" id="showCss" class="btn btn-primary btn-mini">Show CSS</a>
    <a href="#" id="resetDefault" class="btn btn-mini">Reset</a>
  </div>
  <div class="hide">
    <ul id="ssw_styles">
      <li class="small ssw_mbColor sepH_a" style="display:none">body {<span class="ssw_mColor sepH_a" style="display:none"> color: #<span></span>;</span> <span class="ssw_bColor" style="display:none">background-color: #<span></span> </span>}</li>
      <li class="small ssw_lColor sepH_a" style="display:none">a { color: #<span></span> }</li>
    </ul>
  </div>
</div>
after <body> and also include gebo_common.js.

Sidebar

Gebo Admin has two columns by default, main content and a hideable sidebar. This sidebar can be hidden on page load by adding sidebar_hidden class to body.
In this template sidebar state is saved to cookie. If you don't want this functionality just coment/remove some code in js/gebo_common.js (lines: 63-75;82;87).
There is also implemented scrollbar in this sidebar, if your content in sidebar is longer than window height then this scrollbar will show up.
If you want to move sidebar to right add sidebar_right to body: <body class="sidebar_right">

Search Page

Search page result have two views: list view (default) and box view. You can change default view by adding box_view class to div with search_panel class. 
<div class="search_panel box_view clearfix">
//search results
</div>

Layout, grid & elements

Gebo Admin is based on Bootstrap Framework, they have great documetation on http://twitter.github.com/bootstrap/index.html. If you need to find out how elements works, how to build custom layout or how to use their js plugins please use Bootstrap doumentation.

Credits

Changelog

  • v1.8.1 (15.03.2013)
    • updated chosen plugin (0.9.12)
    • fixed widget.html
  • v1.8 (11.03.2013)
    • updated jQuery (1.9.1)
    • updated bootstrap framework (2.3.1)
    • updated multi-select plugin (0.95)
    • updated input mask plugin
    • added toggle buttons
    • added dynamic tree plugin
    • added hint.css tooltips
    • added click event for links in top menu
    • fixed sidebar scroll
    • fixed table tools issue with invisible layer
    • fixed top bar dropdowns (mobile view)
    • fixed some performance issues in ie8
    • removed external links for buttons
    • minor css/js fixes
  • v1.7 (05.02.2013)
    • updated jQuery (1.9)
    • updated jquery UI (1.10.0)
    • updated bootstrap framework (2.2.2)
    • updated colorbox plugin (1.3.34)
    • updated datatbles plugin (1.9.4)
    • updated tag handler plugin (1.3.1)
    • added table tools for datatables
    • added editable elements
    • added blog page
    • fixed hover for top menu
    • fixed datatables view on mobile devices
    • changed scroller plugin (replaced by jQueryUI scroller plugin)
    • minor css/js fixes
  • v1.6 (05.11.2012)
    • Changed mobile menu
    • New invoice page
    • Updated 2 column multiselect
    • Fixed issue with jquery cookie
    • Fixed issue with tooltips (updated)
    • Fixed issue with dropdowns (touch devices)
  • v1.5 (19.09.2012)
    • Bootstrap Framework updated (v2.1.1)
    • jQuery updated (v1.8.1)
    • jQuery UI updated (v1.8.23)
    • fullcalendar plugin updated (v1.5.4)
    • datatables plugin updated (v1.9.3)
    • fileupload and rowlink plugins updated
  • v1.4 (30.08.2012)
    • added password strength checker plugin
    • added "scroll to top" plugin
    • added toolbar for pages
    • added user avatar to top bar
    • added fix for new Opera browser
    • fixed sidebar bugs
    • simplified use of style switcher
    • fixed issue with drag&drop widgets
    • changed login page (login box is now centered)
  • v1.3 (25.07.2012)
    • added chat page (CLEditor plugin)
    • added CLEditor plugin (chat page)
    • added drag&drop feature to widget boxes
    • added button state example
    • added style switcher
    • added background patterns
    • added sub-menu to main menu
    • added notification plugin (smoke.js)
    • added pagination next, prev buttons for datatables
    • added another calendar example (google calendar)
    • added colorpicker plugin
    • added static user page
    • added option to move sidebar to the right
    • added example with form elements inside modal window (fixed z-index issue)
    • added simple calculator (contributed by maumao)
    • added option to disable external link for single link
    • made videos responsive
    • updated timepicker plugin (new option: 24h or 12h)
    • updated tinymce plugin
    • simplified use of mouse hover event for top menu
    • fixed datatables horizontal scroll example
    • fixed search input in chosen plugin
    • fixed search input for server side datatables (multiselect)
    • fixed validation errors
    • fixed page loader (high cpu usage)
    • added changelog with information what files were changed/added in this update (changelog_files.html)
  • v1.2 (22.06.2012)
    • new mailbox page (inbox, outbox, new message, message view)
    • new widget boxes
    • added drag&drop multiupload
    • added scrollbar to sidebar
    • added fixed layout option
    • added preview for new icons
    • added option to align dashoard quick access navigation
    • added fix for ios orientation change
    • improved documentation
    • fixed small js, css bugs
  • v1.1 (12.06.2012)
    • added 2 more colors (new colors for table header, charts, calendar events)
    • added layout max width
    • added mouseover as an option
    • added mixed gallery (images and videos from youtube, vimeo, self hosted)
    • added plus/minus icon for accordion
    • added flag icons
    • added dashoard quick access
    • added drop down buttons
    • added action button (delete,edit etc) for table
    • added gallery table view with action button (delete,edit etc)
    • added documentation for search results default view
    • improved documentation
    • fixed show/hide sidebarbar icon
    • fixed login page validation
    • fixed small css, js bugs
  • v1.0 (02.06.2012)
    • Initial release