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.
Updated: 25.07.2012
v 1.3
About Gebo Admin template
Main features:
- Responsive two column layout (hideable sidebar)
- Fixed top bar
- HTML5/CSS3
- Based on Twitter Bootstrap Framework
- Location finder (Google Maps)
- Custom search page
- Custom mailbox
- Charts (lines, bars, pies)
- Chat
- User page (static)
- Drag&Drop Multiupload
- Datepicker, Timepicker
- Image grid
- 2 icon sets (glyphicons & splashy icons)
- Custom error page
- Tables (static, dynamic, server side proccessing)
- Notifications (sticky, modal boxes)
- Responsive file explorer
- WYSIWYG editor with integrated file explorer
- Regular and extended form elements (sliders, progresbars, enchanced select elements, 2 column multiselect, styled form elements, colorpicker, masked inputs, tags handler and many more)
- Tooltips (always visible in the viewport), Popovers
- Bootstrap Javascript Plugins (modal, dropdown, tab, popover, collapse, typeahead, rowlink, fileupload )
- Form Validation
- Step by Step Wizard
- Drag&Drop Widget Boxes
CSS Files
-
bootstrap/css/bootstrap.min.css,bootstrap/css/bootstrap-responsive.min.cssMinified stylesheets from bootstrap framework
-
css/style.cssMain Gebo Admin styleshet
-
css/blue.css,css/brown.css,css/dark.css,css/green.css,css/eastern_blue.css,css/tamarillo.cssThemes for Gebo Admin
-
css/ie.cssStyleshet 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)
-
bootstrap/js/bootstrap.min.jsPlugins from bootstrap framework.
-
Plugins located in
js/Configuration for plugins & small js plugins
- Actual width/height of hidden DOM elements
- Animated Progressbars
- Character and Word Counter for textareas
- jQuery Cookie
- GMAP3 (Google Maps)
- Grid layout
- jQuery Library
- jQuery Easing
- Fileupload (with thumbnails)
- ImagesLoaded
- Input Mask
- Responsive Table
- Rowlink
- Small charts
- Special jQuery event that happens once after a window resize
- Textarea autosize
-
Plugins located in
lib/More complex plugins
- Breadcrumbs
- Calendar
- Charts
- CLEditor
- Colorbox
- Date library
- Datatables
- Datepicker
- Enhanced select elements
- Floating header list
- Form validation
- jQuery UI
- 2col Multiselect
- Nice form elements
- Plupload
- Searchable, sortable list
- Smoke.js
- Sticky notifications
- Syntax highlighting
- Tag handler
- Tooltips
- Wizard
- WYSIWG Editor
-
File manager
file-manager/
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 add gebo_nav_mouseover.init();menu_hover class to body tag: <body class="menu_hover">
Dashoard quick access navigation
By default this 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
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. Style switcher is included in
dashboard.html
Sidebar
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
box_view class to div with search_panel class.
<div class="search_panel box_view clearfix"> //search results </div>
Layout, grid & elements
Credits
- Bootstrap Framework http://twitter.github.com/bootstrap/index.html
- Plugins mentioned in JS Files section
- Video player http://videojs.com
- Glyphicons http://glyphicons.com/
- Splashy icons http://splashyfish.com/icons/
- gcons icons http://www.greepit.com/open-source-icons-gcons/
- Flag icons http://www.famfamfam.com/lab/icons/flags/
- Google fonts http://www.google.com/webfonts
- Background patterns http://subtlepatterns.com/
- Calculator maumao
Changelog
- 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