eakroko supports this item


441 comments found.

how to display a notice without a link?

similar to $

 ('# myModal'). Modal ('show')

Oh ok, you want the notice to be displayed automatically (without the link trigger) right?

You need to do this with javascript.

    title: "The title",
    text:     "The body",
    image: null,
    sticky: false,
    time: 3000



I’ve purchased this template and it’s great. I’m having a problem with the footer on a form wizard page. When I go to a wizard step that is longer than the others, the footer is over it. Here’s a screenshot of what I mean: http://amonci.com/reveal/footer-over-long-wizard.png

I’ve tried to fix it a few different ways (sticky footer, stackoverflow suggestions) but with no luck. Can you please let me know how to fix this?

Thanks, Monica

Hi, could you please send an URL to that site to me? If you don’t want it public just email it to me. It’s pretty hard to find the problem without an URL!

Regards, Ernst

It’s not live yet because I’m just now getting the new template installed and still have a ways to go.However, I fixed it by adding height: auto !important; to the css for #content.container-fluid I’m sure that’s a hack because I’m not great with css.

Thanks for the super quick reply!

All right. Great that you solved it :).

For any questions just contact me again!

Hi. Is this admin theme for a CMS? Or is it just HTML?


This is just a HTML/CSS/JS template. Regards

Hi there, I’ve purchased this template and I having some problem with the side bar + menu. If you have menu with sub menu that sit near the bottom of the side bar, then when you click the menu item to show the sub menu, you will have to scroll down to see the whole sub menu. The “grey” sidebar doesn’t extend itself. This isn’t looking good.

I wonder can you do: 1) make the “grey” sidebar extend when require. OR 2) if the menu is near the bottom, can it adjust the itself to appear on the available space? instead of always extend below the parent?

I hope you know what I try to said.

Hi, could you please send me an URL? I won’t be able to fully solve the problem without! If you don’t want to post it public here just send me an email with it! Regards Ernst

Hi there, thanks for your reply.

I don’t have a site for that yet, still working on that. You can replicate that by using the more-blank.html, copy the menu items/block “Settings” multiple times until you have the length of menu longer than your browser height. Then try to either expand the “Default hidden” menu or expand the last “Settings” menu. You will see the expand cause more scroll down, and the sidebar “Grey” color doesn’t continue with the expand.

If you still can’t make it happen, I will try to get a temporary site to show you.

Ok, I will try to reproduce that error and fix it in the next version. Thank you! Regards

This isn’t so much a bug. Just aesthetics. You should have a look at a form with form-horizontal form-bordered (and having two columns using span6), the first column doesn’t seem to border completely through, and bottom borders aren’t complete.

Thanks for the bug report. I will check and fix that problem in the next version. Stay tuned :)


its a very cool Template. The Documentation is also very well. But my question is, how can i change the Calendar items. Where can I add sth or remove. Is it right that you speak german?


Hi and thank you. Yes I speak german. You have to add calendar events/items in javascript. In the template you will find the markup for it at demonstration.js on about line 736. For more information about this plugin I would suggest to visit the plugins page & documentation. http://arshaw.com/fullcalendar/

If you need help or have further questions just contact me via email. Regards :)

Love this theme! I see the newest version has a way to disable the sidebar menu. Is there a way to disable the sidebar menu in the first version?

The feature to disable the sidebar by default wasn’t included in the first version – it was added in 1.5. But you know that you can download the template again to get the newest version, don’t you?

Yes, I do. I’ve made slight changes to some CSS and JS files and don’t want to overwrite the changes.

Ok do the following to get that feature:

In application.js (line 40) replace
    $("#main").css("margin-left", $("#left").width());
if(!$("#left").is(":visible") && !$("#left").hasClass("forced-hide") && !$("#content").hasClass("nav-hidden")){
    $("#main").css("margin-left", $("#left").width());
Also add this to application.js after $(document).ready…
    if($("#left").is(":visible")) {
        $("#main").css("margin-left", $("#left").width());
    } else {
        $("#main").css("margin-left", 0);
And then use this class on the #content element
<div class="container-fluid nav-hidden" id="content">

That should work for ONLY that feature. There may be incompatibilities with other things now.. I would suggest to export your custom CSS/JS stuff to separate files in order to always use the latest theme version for less bugs etc..

Regards :)

It would be great if you can update the form wizard with https://github.com/VinceG/twitter-bootstrap-wizard

A comment here earlier suggested being able to click on the steps. This plugin can do it with other features too. Would be a great add.

I will take a look at it and maybe integrate in an upcoming version! Thanks

I like your passeword strengh !

Will you add check username availability ? It can be useful for wizard form :)

Good idea, I will add that in the next version! Thanks :)

Hi, On this page there is a problem with JavaScript components-messages.html when you click over the message # – ReferenceError: el is not defined – Can you fix it! Thank you in advance

Hi and thank you for the bug report. It is now fixed in the live demo. You can copy the application.js / application.min.js from there. Regards

in the old version it works

It’ll be nice if you add other column filter input type(select for example) to Table “Column filter/search” and put some nice styles for them. Just add to your dataTable code at eakroko.js
                    "sPlaceHolder" : "head:after",
                                        // !!!!!!!!!!
                                        "aoColumns": [{},{},{},{},{
                                             type: "select",
                                             values: [ 'A', 'B', 'C' ]
For other options take a look at http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter.

Data tables one of the most needfull feature of all admin templates.

I found your eakroko.js usefull for default initialized elements, but some elements need to be customized. So would mind adding some bypass code to achive the goal. For datatables it’ll be nice having the following code:
    // dataTables
    if($('.dataTable').length > 0){
            if($(this).hasClass("dataTableCustom")) {return true;} // !!!!!
,so if we put class dataTableCustom to our new table that we have completely customized we can initialize it by ourselves.

Thank you.

Thank you for filters, it’ll be great to have it. Let me clarify my request about the bypass code. The actual reasons of that one is DataTable js framework automaticaly add class dataTable when you create the object of the class. So, even if I set only one class myDataTable then as result will be “myDataTable dataTable”. And it leads for double initialization – one is my instance and the second attemt is yours, because your selector is all elements with class dataTable. So here it is the conflict…. And the only reason to prevent it is doesn’t include your js script, but it isn’t better way, because as I wrote in my previouse post I found it very usefull it has most default initializers. Or of cause I need in constantly fix the issue by adding some bypass code. So there is the motivation to do it.

Thank you again, for your work.

Oh I see I didn’t know that dataTables automatically uses the dataTable class. Well then your suggest is ok. However I think then it will be better that I should just use a different class other than dataTable. Than you could easily create your own classes/initialization.

But that would result in incompatible html files from previous versions for the users. Therefore I will use your way in the next version.

Thanks for that! :)

Thank you again!

double post.

Hi there, first off all thanks for this great theme, we are really like it.

I have a questions about the tabs in http://www.eakroko.de/flat/components-elements.html. How can you set a tab passed true a link.


so the second tab will be openend and not the first one. If there is not an parameter (#??) is set, then he opens the first one.

Hi, thank you I appreciate it :).

The bootstrap tabs doesn’t have that functionality included by default. I will think about implementing that feature to the tabs in the next update, so stay tuned!

I’m modifying index.html to make it look how I want to, including changing charts.

1 – How do I modify the charts to change the actual values of the line chart itself? E.g. The months and values.

2 – How do I change the contents of the calendar?

3 – When I remove the “Balance” stat (green box) the date box becomes static and not based on the current date. How do I remove this?



1 – Please read the documentation of the chart plugin. It’s just way too hard to explain it here and would be too much. https://github.com/flot/flot/blob/master/API.md

2 – The contents of the calendar are of course only for demonstration. So they are in the demonstration.js. You need to add custom JS to add event data. Here is some example code from demonstration.js

$('.calendar').fullCalendar('addEventSource', [
        title: 'All Day Event',
        start: new Date(y, m, 1)
        title: 'Long Event',
        start: new Date(y, m, d-5),
        end: new Date(y, m, d-2)

For more detailed information see the plugin docs: http://arshaw.com/fullcalendar/docs/usage/

3 – The balance stat is connected with JS so if you remove it and keep the demonstration.js there will be some JS error. I will fix that bug in the next version. Be sure to NOT include demonstration.js in your files because that file is only for demonstration purpose (generating random events/data/charts etc)



This is understandable. I wasn’t really looking for a step by step explanation, rather where in the code/pages can I find the values so I can modify this myself? I simply want to take the existing pages and “change” the way they look. Any reference to the files/sections I need would be great.

I changed the demonstration.js but didn’t seem to do anything. Also, couldn’t see any reference to the charts.

regards, nikoa

If you do any changes to demonstration.js, be sure to include demonstration.js (normally demonstration.min.js is included!!!).

That’s maybe your problem…

I don’t really know what you mean with the first paragraph. What values are you looking for?


hello thanks for the new update, looks great :-)

when i use the tab-component and have color schema satblue, the action-group icons on hover doesn’t change to the same color, is that something i can fix?

rgds Martin

Confirmed. I will fix that in the next update! Stay tuned.

Thanks for the report, Ernst

thank you :-)

Something unusual is happening that I never saw before: I copied and pasted your forms-basic.html, removed all forms and left just one form. My input fields aren’t flat, they have beveled borders which look ugly and inconsistent. On the other hand if I open your forms-basic.html, the fields are flat.

Elements have all the same CSS classes, and the page is including all the CSS files.

Here it is:

Any ideas?

Please ignore my comment. It was my mystake. Fixed!


When I navigate to the demo on my iphone and/or ipad I notice very slow load times and hang ups. Is that just because it is the demo? Anyone else notice this problem. About to purchase but mobile aspect is very important to me.

Seems like a great theme!


Hi, I don’t have real stutters/slow load time in mobile device (ios/android). The dashboard is a bit slower because those charts slow things down a bit. The other pages load fast here. Maybe it also helps to remove the overlayed topbar.

Glad you like it – thank you :)!


hello again, when i try the demo for drag and drop, and drags all elements from one column so that it is empty, then I can not drag any elements back to that column? is there a way to fix that?

thanks Martin

Hi, yes I noticed that also, I don’t really know why this happens.

However you could do a little trick. Just add an empty, hidden box in the columns. Seems to work then..

<div class="box box-color box-bordered blue" style="display:none;">
  <div class="box-title">
      <i class="icon-file">
      Hidden Widget
  <div class="box-content">
    Lorem ipsum Eu minim non sint sit exercitation in cillum culpa sit elit culpa commodo.


thank you, will try that :-)