KaijuThemes supports this item


229 comments found.

Hey just wondering if in the next update there will be a front end theme as I am thinking of buying one, thanks

No, there is no plan for a front end theme for Avant.

Hello red team i found some bugs in form component , when you remove text area in page the jquery will not working… I’m still looking for this bugs thanks

there is one more bugs i found

when side nav bar with unilimited drop down toggle to mini sidebar and when you toggle again to big side bar the drop down is gone ?

How do i fix this ?

no no, you need to remove the fseditor line from javascript and remove the fseditor script from loading. Doing those will not cause any errors.

hha , yes i should create the copy of demo-formcomponent.js :p

and how about the side nav toggle drop down i can’t found how to fix this.. the side navbar drop down always magically disappear :(

Nice to see an update. Do you have a list of which files were affected by the Bug Fixes?

Yes, we have provided a changelog in the new download package.


Hello Once again :) and once again complement for the nice template too :)

Okay now I am having few queries regarding using datatables and editable datatables.


I have setup datatables (quite easy) but now I want to set small pagination instead of regular size. Bootstrap has small size pagination but how to set it for the specific table and not in all?

Another thing if there is not more pages the pagination still visible which is quite annoying to me. Is there anyway to hide pagination if there is not more page than one?

While using Datatables withing the responsive div (to make it table responsive – see bootstrap responsive table section) it is adding h-scrollbar. I have checked with small size table and not for full width.

Editable Datatables:

When I tried to use it, I am able to click to make the td to editable field but it is miss-aligning text and changing the td width. I don’t know what I am doing wrong here.

Also how can I use this editable datatable using PHP-MySQL so I can edit and modify the data?

Will appreciate your quick response.

—Thanks :)

- for small pagination, go to assets/plugins/datatables/datatables.bootstrap.js line 47, you will find the ol class=”pagination”. Add pagination-sm class to it.

- for hiding pagination, http://stackoverflow.com/questions/11050826/disable-pagination-if-there-is-only-one-page-in-datatables

- datatables don’t work well with responsive. you can try custom solutions such as https://github.com/Comanche/datatables-responsive

- the width of tables change because it has borders. if you set the border width to zero then you shouldn’t have problem with changing width.

- you can capture the data change in JS and then pass it to PHP. See the code here http://datatables.net/examples/api/editable.html

Thanks for your support. I will get back to you soon.

Hi, can you add a file manager for this? Thanks.

do you have any particular plugin in mind?

I was thinking about FileVista or elFinder or whatever you think is better if possible.

See this post on StackOverflow for how to fix validation on the login template: http://stackoverflow.com/a/18754780/1681418

Hello. We recently purchased your theme and really enjoy working with it. One thing we have noticed why using the code locally is that the “tables-responsive.php” examples are not working properly. Both the “Flip Scroll” and “Vertical Tables” do not change as the viewport shrinks. The data is displayed past the right edge of the viewport, and do not wrap / behaive in a responsive way. Do you have any thoughts on how to address this? This is a large requirement we have since many tables with our app can contain many many columns.

Thank you.

hi. It seems to work on mine. Can you try with another browser?

Thank you for the quick reply. It does not look like a browser issue, and is actually a viewport size issue. Or more specifically, that the functionality works below the max-width of 767 (”@media (max-width: 767px) {“). That means when the viewport is between 767px and the actual min table width (around 1000px wide), the examples start to push off the screen.

I took a screenshot of my viewport around 928 as an example: http://imgur.com/sJhyKfr

Do you have a recommendation on how to change the breakpoint of the table to be a bit larger, without changing your CSS drastically? We hope to keep your CSS intact without having to override too much with custom solutions.

Thanks again.

You can go to assets/less/extend-core.less line 71 and change the @screen-xs-max to whichever pixel you want for the breakpoint:
@media (max-width: @screen-xs-max) {...}

This code block controls both .table-flipscroll and .table-vertical

I have found another issue with the sidebar. When we collapse the sidebar and when we open it back to the normal state, the sub menu item is getting hidden all the time. JS adding visibility:hidden inline style on the root menu item.

How to resolve this?

Edit: I think it is keeping the cookie of the collapse state for the sub menu items

Hi, I’m looking for a treeview like a browser files , do you have a plugin to do this ?

We don’t, but you can try adding http://www.jstree.com/

Thank you, i did it ans it’s ok now.

Is there a way to set the side navbar to a fixed position so the content area can scroll independently?

You could set #page-leftbar {position: fixed} which will put the sidenav as a fixed position. However this reacts badly with collapsed navigation, which is why it’s officially not included.

Hello Red Team i’m looking forward the solution for blank side bar when you toggle from wide to small one.. Could you help me ?

Sorry, I couldn’t recreate the problem as is, however, it might happen that you have two pages open in two tabs. One is wide and the other is narrow. Since the collapse state is read by the cookies, they can read conflicting information.

The only way to resolve that problem is to remove the support for cookies completely.

Is there a way to decouple the Bootstrap/Fontawesome stuff from the Avant less/css files?

I’d like to have all those 3rd party css into one file and the other part in another.

Avant is heavily integrated in Bootstrap, so that can’t be decoupled. You can remove the FontAwesome references from the styles.less file though, but it would also require you to hunt down all the to the icons you require.

what I want is not to remove bootstrap or fontawesome… but have them referenced of external CDN’s and not in the main styles.css file.

Ah, again, you can reference external CDN with font-awesome, but the bootstrap files have been modified in certain cases (like the navbar). Just remove the fontawesome import in styles.less and add the fontaweomse CDN in the head section of your html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Hello Red Team, do you offer documentation with your template ? Thanks.

Yes, the documentation is available when you purchase the theme :)


Theme looks great … sending you an email with query relating to validation on login form.

Thanks, Paul.

Solved it: Added a container function into the parsley errors settings to return one container higher than it was.

Hi. I saw that there was a new update bootstrap (3.1). Will you update your template?

Yes, an update will come soon :)


For bootstrap 3.1 (v1.2.2 Avant) did you guys taken in consideration this:

Deprecations #10370: Deprecated the .pull-right method for aligning dropdown menus. Includes the following changes: Removed an old and unused pair of selectors that didn’t properly target the right-aligned navbar alignment of dropdown menus. Deprecates the .pull-right alignment in favor of a more specific and unique class name. Adds .dropdown-menu-right as the new alignment class. This is then mixin-ed into the .navbar-right.navbar-nav dropdown menus for auto-alignment (keeping the current behavior we have today). Adds new ability to override that auto-alignment though with the new .dropdown-menu-left, which is mixin-ed in the same way to provide the appropriate specificity of an override. This should never need to be used except for within right-aligned .navbar-nav components.

No, we simply updated the css and less files. Making full-on changes with the html might break some implementations from already existing users as bootstrap 3.0 has been in the market for some time now.

On a related note, the navbar.less from bootstrap has been extensively modified to support our implementation of the offcanvas menu and the navbar for mobile devices, the changes in our case will be redundant.


After the 1.2.2 update, at resolutions above 1280×1024 if you go the any of the horizontal layout examples, the panel seems to not be aligned with the rest of the template anymore and shifts to the center.

Do you guys have a fix for this? This seemed to work fine in 1.2.1


Hi. There seems to be a minor error during our conversion. If you could go to variables.less line 897 and replace it with this, it should be fixed:
@container-large-desktop:      100%; // ((1140px + @grid-gutter-width));


Hello. I’ve noticed that if I use a SPAN tag (or a DIV) in the Messages used on the header it forces the tagged text into a line by itself. I assume this is forced in the style sheet. EM doesn’t seem to be affected but it causes italics, is there an inline workaround so that a new line isn’t forced on SPAN?

Or should I just stick with font-style:normal in an EM tag so I can use my other styles?

In topnav.less line 86 the span’s are defined with a {display:block} which forces the span down.

Perhaps you can put a span.customclassname with a {display:inline} that will work around the block issue.

Ok, thanks. I’ll look into that.

Hi i want to use the charts but i would like to know how can i use database value to the charts in PHP, Please advice me how can i solve this i see that the data is in the js file when i change that data it is effecting to the Presentation Layer, But i wan to use database value to that please help me how with an example.

You can read the database values using php and interpret that using js.

See example here: http://stackoverflow.com/questions/1312302/retrieve-data-from-mysql-by-php-to-create-flot-graph

Thanks a lot and U r team is excellent


You’ve helped me with this before, but it seems to have gotten broken again. The menu highlighting of the active page is not working in Internet Explorer (Tested version 8 – ‘Edge’), but it works fine in Chrome.

Previously you told me to add display: inline-block to leftbar.less, and that you’d release an official fix. This fix does not seem to apply anymore :(

Suggestions? We’re releasing an early demoversion of our product early next week and would love to have this fixed by then.

Also, is there a way to keep the menu-items always expanded when clicked? When having alot of menu-items, it’s a bit cumbersome to always click to open submenu-items when navigating between views.

As always, an amazing template! :)

I’m sorry. I’ve mixed up two different issues here. What I’m trying to say is that you once provided me with a fix that kept the menu elements highlighted even though a ?param=someParam was set in the url. This fix uses window.location.origin, which is not working in Internet Explorer. Hopefully, this explained my problem more clearly? :)

In application.js, here’s the fix you provided me last time:
    var targetAnchor;
    $.each($('ul.acc-menu a'), function () {

        var ss = (window.location.origin + window.location.pathname);
        if (this.href == ss) {
            targetAnchor = this;
            return false;

In the Internet Explorer console window, the statement console.log(window.location.origin) returns the following: undefined whereas in Chrome it returns http://localhost.

Aaaand I found a solution:
    var targetAnchor;
    $.each($('ul.acc-menu a'), function () {
        if (!window.location.origin) {
            window.location.origin = window.location.protocol + "//" + window.location.host;

        var ss = (window.location.origin + window.location.pathname);
        if (this.href == ss) {
            targetAnchor = this;
            return false;

Could this please be addressed in the next update?

Sorry for the spamming ;)

Yes of course :)

Good luck!