Discussion on Gebo Admin Responsive Template

Discussion on Gebo Admin Responsive Template

By
Cart 3,191 sales
Well Documented

tzd supports this item

Supported

This author's response time can be up to 2 business days.

719 comments found.

Can i make use of this template in my already developed ASP .Net application , with master and child page concept ?

Hi, Gebo Admin is a html/css/js template. It’s up to you to integrate frontend with server side language, you can use php, ruby, asp or anything you want.

tzd. Do you have some example that shows a little image thumbnail, near the username? At left of username?

Regards.

Hi, I don’t have that example but it’s quite easy to add image near username, just add
<img style="height:22px;margin-right:5px" src="your image url" alt="">
before your username
<img style="height:22px;margin-right:5px" src="your image url" alt="">Johny Smith <b class="caret"></b>

the horizontol scroll looks like this esp when my table size is big. the left panel size remains the same and at the same position. check the image.

http://i45.tinypic.com/o0v3g9.png

also for any updates can you give us only the updated components, so that we dont have to download the whole file again. it is very difficult to know where and hwo many scrips you have updated. for eg i am finding it difficult to include the scroll bar for the sidebar as mentioned earlier despite including all files & reading your sample code..

Hi, it’s because your wide table, to fix this please check responsive table example from dashboard (“Latest Orders”). Sorry, I can’t give you just updated components, you have to download updated package and compare versions with http://winmerge.org/ or open changelog_files.html.

Hi tzd, I think you have a bug on user_profile page. I’m testing on Ubuntu Firefox 14.0.1. When you resize the window, you will see that the input box increase the size that makes the horizontal scroll bar appears. On Ubuntu Google Chrome Version 21.0.1180.81. sometimes happen the same.

Regards.

Hi, yes, I know about this. It’s because input width is fixed (js multiselect width is set during initialization). To remove this horizontal scroll bar just refresh the page.

Hi tzd, I have had some difficult to understand which css and js, are need when I want to use some components independently. For example, imagine that I only want to use Multiselect or Multiselect with search or Enhanced Select (in form_extended.html)? Do you have any list that shows, to use component X you will need css Y and js Z?

Thanks. Regards.

Hi, sorry, I don’t have that list. I added comment before every css and js eg
<!-- 2col multiselect -->
<link rel="stylesheet" href="lib/multiselect/css/multi-select.css" />
<!-- multiselect -->
<script src="lib/multiselect/js/jquery.multi-select.min.js"></script>
and in gebo_forms.js
//* 2col multiselect
gebo_multiselect.init();
you can also check plugin page (multiselect, wysiwg etc) mentioned in documentation to find out more.

has anyone managed to hookup the typeahead auto-complete to search a database? i am having trouble… i found this: https://gist.github.com/2935906 but am getting an error that the response is null (when i know that the search parameters DO have a match)

thanks!

tzd. did you receive my email?

Regards

Hi, yes, please check your email.

In for the form validation script using qTip, (gebo_validation.js), there is a section for rules. Can I create my own custom rules and if so, can you share an example?

For example, if I have a multi-select and at least two options need to be selected, how might I go about writing a custom rule for that?

rules: {
    state: { required: true, minlength: 3 }  //at least two states need to be selected
}

Thank you, again.

Thanks TZD for the reply on the error above, related to the slider. the issues is that i dont have a slider at all on my page – should i just remove that entire block of code from the JS file?

Hi, yes, You should remove this code from js file but better approach would be to create page from blank.html, copy elements that you need to that file, create new js file and copy functions to this file.

got it, thanks!

i am copying the form javascripts over to a new page i have created, and i am getting this error:

Timestamp: 21/08/2012 15:29:05 Error: TypeError: select0 is undefined Source File: http://domain.com/system/js/gebo_forms.js Line: 270

any idea what it could be? i have tried comparing the scripts, and i am pretty sure i have copied them all over. it seems to be related to the jQuery UI sliders – but i have both the UI JS and CSS files in the file.

also – i sent a couple of questions to your email via the contact form – did they come through?

Hi, yes, this error it’s related to jquery slider. Make sure you included jquery-ui and html code for this slider
<div class="sepH_c">
    <form class="form-inline">
        <label for="ui_slider3_sel" class="sepH_b">Minimum number of beds</label>
        <select name="ui_slider3_sel" id="ui_slider3_sel" class="input-mini">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </form>
</div>

Hi tzd. I’ve a problem when I resize the browser to a size of a table or a mobile phone, check this out please: http://i50.tinypic.com/f0n239.png. The main problems are: – The sidebar disappear and scroll up and the top menu stay stuck at top of the page. – Check out the users widget, the input box goes out of the widget . – With tabs widget happens the same.

This only happens with I resize the browser to a small window, you know what can be cause this?

Regards.

Hi, do you see this problems on demo page? It seems that there is something missing on your page. Could you make this site online and could you give me link to this site?

tzd. I send you an email, with that information.

Thanks. Regards.

Hi tzd, the bootstrap has been upgraded to 2.1, do you have a plan to upgrade that for Gebo?

Hi, I think so but first I need to check what changed and how much time it takes to upgrade bootstrap framework.

Hi tzd. I’m creating the dashboard area, but I’ve some problems with the small charts that you have on that. Do you know the small chart that you have on “Weekly Sale”, “Monthly Sale”, which js and css I need to include to use this small charts?

Regards

Hi, you just need to include
<script src="js/jquery.peity.min.js"></script>
Please check http://benpickles.github.com/peity/

Love the new static Profile page—thanks!

If the content is blank, the formatting stops working. I’m hacking it now by putting in nbps;, but I’m hoping you can fix it in the css.

<li> <span class="item-key">ProtocolsHtml</span> <div class="vcard-item"> </div> </li>

<textarea>

  • ProtocolsHtml  
  • </textarea>

    Since this comments editor won’t display HTML , here’s the code that I have to use without the angle brackets:

    span class="item-key" ProtocolsHtml /span
    div class="vcard-item"   /div

    Thx,

    Tac

    Hi, thank you. Please open css/style.css, find .vcard > ul > li and add
    overflow:hidden
    

    Hey Tzd,

    Is there a way to make the width of the left-nav bar a little less? Where would I find the property in the style sheets?

    thanks again,

    Hi, yes, it’s possible but that would require some modifications (css, js and backround image). Please send me message from my profile page with details (width, sidebar right/left position etc)

    how insert scroll bar in sidebar menu panel.

    Hi, sorry for the delay, do you want to insert this jquery scollbar in sidebar menu or just regular scroll bar?

    i need jquery scollbar in sidebar menu.

    Please check documentation for this scroll https://github.com/LearnBoost/antiscroll

    Hello, How could I make the login box to be placed in the center and middle of the browser? And I don’t want a vertical scroll bar appeared in login page.

    Hi, sorry for the delay, please send me message from my profile page, i’ll send you back this login page.

    Hi, I sent you message from profile page, but didn’t receive the login page.

    Hi, please check your email.

    tzd one more question. How can I maintain the same menu/submenu open on sidebar, between pages transition? It is possible to reload only the “contentwrapper” content?

    And it is possible to apply an action when I click on a menu of the sidebar? right now you only have actions on submenus of sidebar, I would like to apply some action on menu too. How can I do that?

    Regards

    Hi, to maintain menu/submenu open you need to add classes in and active to this menu/submenu with server side language, in php there will be something like:

    <div class=”accordion” id=”side_accordion”> <div class=”accordion-group”> <div class=”accordion-heading”> ... </div> <div id=”collapseOne” class=”accordion-body collapse <?php if($page == “active”) { ?>in<?php } ?>”> <div class=”accordion-inner”> <ul class=”nav nav-list”> <li class=”<?php if($page == “active”) { ?>active<?php } ?>”><a href=””>...</a></li> ... </ul> </div> </div> </div> </div>

    and if you want to change main content without reloading the page please check http://www.ajaxml.com/examples.html#simple

    tdz, Can you provide us and example of this functionality? 1º – Keep the menu/submenu active between pages transition 2 º- The best way to reload the “contentwrapper” or “main_content”

    Best Regards.

    Hi, I gave you answer to your questions in my previous comment so please check again my previous comment about menu/submenu active between page transitions and how to reload just main content.

    Hi tzd. How can I create a menu like this: http://tinypic.com/r/28ixh69/6 That shows the selected option? Do you have something in your template?

    Regards

    Hi, please open your color stylesheet (blue.css etc) and add !important to:
    .navbar .nav .active > a, .navbar .nav .active > a:hover {
      background: #206484 !important;
    }
    
    and add class active to li
    <ul class="nav">
      <li class="dropdown active">
        ...
      </li>
      ...
    </ul>
    

    Hi. That’s solve the problem, but how can I remove the icon that shows the button is drop down, the white triangle?

    Hi, delete
    <b class="caret"></b>
    

    Hello,

    How can i make a <button> with image on it with gebo theme?

    Hi, you can add any icons (http://www.tzd-themes.com/gebo_admin/index.php?uid=1&page=icons) to buttons
    <button class="btn btn-primary" type="button"><i class="icon-home icon-white"></i> Button</button>
    <button class="btn" type="button"><i class="icon-home"></i> Button</button>
    
    by
    by
    by
    by
    by
    by

    Tell us what you think!

    We'd like to ask you a few questions to help improve ThemeForest.

    Sure, take me to the survey