MantraThemes supports this item


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

1028 comments found.

The main issue with the iPad is you have to click everything twice. For example, take the main picture icons at the top. You click on them once and you get the tooltip, and then again to do the actual click.

Same with the ajax load example, click once, it highlights, click twice to action.


This is a common issue with websites on touch devices. You can easily make the template touch-compatible by adding a simple touch-detection script in the head of your pages:

if (!('ontouchstart' in document.documentElement))
    document.documentElement.className+=' no-touch';

Then in the CSS, just prefix all problematic :hover styles with the newly added class:

// this...
.someClass:hover { ... }

// ...becomes:
.no-touch .someClass:hover { ... }

This way, only mouse-based browsers will use the hover effects, and touch devices will be much more responsive ;)

Note that for more robust touch devices detection, you should rather embed Modernizr – just replace the script, it adds the same class as in my example.

Of course, this will be in the next update (using Modernizr), but you can implement it right now. Tell me if you need more details! :)


Great theme. I am just starting with this and I have a few questions:

1) I would like to lower the block labels (i.e., the blue blocks on the upper left border – like “Web Stats”, “Planning”, etc.). So that they are aligned with the tab actions. Is there an easy way to customize that part? I tried doing it and succeeded in lowering the text but the background blob would not move, etc. 2) The tasks in the task list get highlighted when the mouse moves over them. However, the user list does not do that. Is it possible to have it behave the same way as the tasks? 3) Is there a select list with display groups like countries and the cities listed under their respective country? 4) The pages load very slowly and some functions do not become available until several seconds later. I guess this is because of Ajax. If we don’t want Ajax, are there things we can safely remove?



Here are my answers:

1) This can easily be done with a few CSS, you may either:

  • Affect the general style if you want all labels to move down: look for the selector .block-content h1, .block-content .h1 in standard.css, and change the top property to what fits best (for instance: 0.444em)
  • Create a dedicated class:
    .block-content h1.shift-down, .block-content .h1.shift-down {
        top: 0.444em;
    And add the class shift-down to every title label you want.

2) You just need to add a custom hover style, in block-lists.css:

ul.grid > li:hover {
    background: #DBE8F0;

3) You can use a standard select, with one optgroup for each city

4) The template is slow only if you keep all plugins and features activated. I suggest you start from a blank page, and embed only the files you need – see the documentation for more details: the required files are specified on each feature page.

Tell me if you need more details! ;)


Thanks for your answers. I haven’t read the doc pages fully yet starting from a blank page makes lots of sense. The hover and h1 changes you suggested work great! One comment though: on the h1, sometimes the header background is not there like on the “Control Panel” and “Simple Form”. In those cases, the h1 now overlaps with the content of the block (“General options” and “Fieldset with background”, respectively). I don;t think I will use the h1 tag without the background bar but it may make sense to modify the css to fix this.

Hopefully I will get a chance over the next few days to fully go through all of the features.

Thanks again!

I was looking at your theme CSS and noticed this:

        ul.arbo li:last-child {
            background: url(/Content/images/arbo-points-v-end.gif) no-repeat 8px -7px;
        /* IE class */
        ul.arbo li.last-child,
        ul.arbo li.first-child.last-child {
            background: url(/Content/images/arbo-points-v-end.gif) no-repeat 8px -7px;

Is there a reason that you have two lines that specify ul.arbo li:last-child ?


Actually, there is one difference: the second line uses the class .last-child (with a dot) instead of the pseudo-selector :last-child (with double dots). The class is used by the template under IE7-8 which doesn’t support :last-child.

I know this is hard to see if you don’t know it ;)


I customized the login page with some extra fields and a background image. But somehow, the opacity kicks in and fades the image. Is there a way to turn this off?


Well, hard to tell without seeing the actual code, do you have a online demo I may check? Or if you can send me the markup you use.

I am sure I can help ;)


To follow up: there is an image in standard.css that was causing this. This is the line in the body {} tag:

background: url(../images/bg.png) no-repeat center top;

I simply removed it.

Hi! I am a newbie to web development. I love the design of this site. What are some use cases that could be used with this admin template? Is this used to make other website or manage website?


This template is a skin for developers building their own webservice or CMS. It is not functional by itself, you need to implement it on top of an existing framework. If you know how to do this, then you can use this template for virtually anything you want ;)

Hi, is it possible to use a datatable-powered table inside a tab? I’ve seen some comments about it somewhere I can’t find right now.

The JS works, but I get no style when placed inside a tab element. My guess is that the CSS selectors do not match it when used inside the tab div somehow? Thanks!


There should be no problem doing this, actually. Maybe there is some kind of interaction with the tables when Datatables initialize, but it seems unlikely to me.

Do you have an online demo where I could run some tests? It would help me find how to fix this ;)

I am using jquery-1.6.3.min.js and need to update to jquery-1.8.3.js

When I do may features do not work like tool tips, the top nav and so on.

Anyone else make this update?


Everything works fine with version 1.8.3 of jQuery, as long as you use the latest available version of the template.

Did you check your browser’s console for javascript errors? They may give a hint about what’s not working. If you don’t know what they mean, tell me and I’ll guide you into fixing them ;)

there are no errors just tht teh tool tips are always showing in the upper left corner of the screen and not above the item you are rolling over.

Mmh… Hard to tell why. Do you use the latest version of the template (1.5)? Check the documentation to know which version you are using.

If you already use the latest version, do you have an online demo I could check? I am quite sure I can find how to fix this ;)

Hello, That skin is so nice ! when will you have a next version ? I have a problem when I have 2 menu-opener buttons on top of each other. The content inside of btn1, instead of going on top of btn2, it goes underneath it does not change anything if I add style = “z-index:99999” for btn1 Thanks for your help

Code below :

<ul id="status-infos"> <li class="margin-right"> <div id="btn1" class="button menu-opener"> xxxxxxx </div> </li> </ul> <div id="btn2" class="big-button menu-opener"> xxxxxxx </div>

ça a demandé un gros travail ;)

Merci ça a marché !! it worked !

Content d’avoir pu aider ;)


is it possible to make a previous enabled tab “disabled”, and vice-versa?


Not by default, but you can easily create functions to do this, for instance:

function disableTab( ID )
    var link = $('a[href="#'+ID+'"]'),
    if (link.length)
        // Create a replacement span
        span = $('<span>'+link.text()+'</span>').insertAfter(link);

        // Store the object in the link to retrieve it later'replacement', span);

        // The link is hidden, it may be restored by enableTab()
function enableTab( ID )
    var link = $('a[href="#'+ID+'"]'),
    if (link.length &&':hidden'))
        // Check if a replacement span exists
        span ='replacement');
        if (span)

        // Reveal link;

Then just use these functions to enable/disable tabs:


Hope this helps! ;)

Oh it helps! 5*, saved my day!

Hi again ! On the following page when you hover on the LOGIN button (top right of the page) and enter any login/password There is a space between the DIV block-content and the P class=”message no-margin” I cannot figure out how to take off that space although on this page, there is no space Thanks for your help ;)
<div style="zoom:1" class="block-content">
    <div class="block-header">Please login</div>
    <p class="message error no-margin" style="">Wrong username or password, please try again!</p>
    <form class="form with-margin" name="login-form" id="login-form" method="post" action="">


The margin is caused by the style .result-block div in standard.css, which defines a larger margin than the default one. You may remove this style, as it looks like you don’t need it anymore.

Just a quick tip: when you notice such spacing/margin issues, right-click on the element and choose “Inspect element”, it will open the developer tools panel, and you will see all styles applied to this element on the right column. Then it is quite easy to figure out which one messes your layout.

Tell me if you need more details! ;)

Thanks !! it solved my problem :D

How do you use the table with datatables? Is there an easy way to do this? I added $(”#myTable”).dataTable(); and it renders but the style is not there… shouldn’t the up/down arrows, etc work?


You need to use the complete setup you’ll find at the bottom of index.html, under the section Table sorting: it sets the correct classes, and adds some hooks for proper styling.

Note that, in the datatable() method options, you can ignore aoColumns and sPaginationType, they are just for the demo. Just set your own configuration instead.

Tell me if you need more details! ;)

Excellent, thank you!

Hello, I want to get back to finishing my design with this template. I started with a simple password change form but I am stuck! I don’t how to add form submit and reset buttons! Whatever I do, these elements do not look anything like buttons. Whenever I try to cheat and steal block-controls or block-footer button codes, they don’t mix well with the form layout and mess things up.

How do you add simple form buttons at the end of the form styled similarly to other buttons?


You just need to use standard buttons:

<button type="submit">Submit</button>

The styles are defined in common.css, so they should always be available. If you added some external plugin/stylesheet, there may be inheritance issues: just right-click your button and choose inspect, the developer tools panel will open, then check the styles that apply to your button to see what’s going on.

If you still can’t find the solution, please show me a sample of the code you use and I will see if I can spot the issue ;)


This shortcut works!


HI, is it easy to ad API calls. We have all of the api calls ready etc. Best Regards Sam

Hi. As you told here before, you are working in on an update to this skin. Can you tell us if it will be responsive in the next update? I’m asking this, because I need to implement this anytime to my project, and if it will not be included in the next update, maybe I will start to do it myself.


I do not plan to make the template responsive anytime, so you can start working on your own version ;)

Tell me if you need support on doing this!

Well, if I need any help, be sure that I will nag you ;)


great theme, everything so far is working. would be good if we could change a menu item like the fade onesyou have?

my main issue is using the search page. i have changed to search.php and trying to display results from my recordset (mysql) query. could you please message me so i can send you the code i have and see how i can get it working with the search bar you have.

all else is great.

many thanks


I can’t contact you directly through ThemeForest, but you can send me a message on my profile with your php code, and I will see how I can help ;)


Great theme! It's has greatly helped me move a project along!
I have a question about nesting a table. I'm creating a simple form using the 'Simple Form' example. Inside of this form I would like to have a table. I would like the table to look like the other table examples but be inside an existing 'fieldset' tag (so it all groups nicely). The table doesn't render properly. More to the point, the header does render at all and the column header appears mis-aligned. Have you tried doing this before? Do you have any advice?

Sure, here is the markup I used: Just a standard table inside a fieldset ;)

That totally worked. There was some serious user error on my part not getting that working. :) Thanks for the help.

You’re welcome :)


I quickly need your help: I am using the user block list (grid-picto user) on a page and it looks good. My question is on the grid-actions. My user list occurs within a form and I would like the edit/delete URL’s in grid-actions be form buttons instead of direct anchors with href’s.

In othe words, I would like the edit/delete images be form inputs like the checkboxes next to them. I am not html savvy so I hope I have described it ok.



You have 2 options for this: you may either use javascript to submit the form, or create a custom style to mimic the icons with CSS.

If you prefer to use CSS, here is a example style you may use:

.grid-action-button-delete {
    width: 16px;
    height: 16px;
    border: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9000px;
    vertical-align: -2px;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    .grid-action-button-edit:hover {
        background: url(images/icons/fugue/pencil.png) no-repeat;
    .grid-action-button-delete:hover {
        background: url(images/icons/fugue/cross-circle.png) no-repeat;

Then just use this markup for your actions:

<button type="button" class="grid-action-button-edit with-tip" title="Edit">Edit</button>
<button type="button" class="grid-action-button-delete with-tip" title="Delete">Delete</button>

Not tested in every browser, though – you may need to tweak it a little.

Hope this helps! ;)

Perfect! I went with the CSS version and it works great.

Thanks a lot!

Hi, Is there a way to display the pagination you have under Sortable Table? I can’t see any settings. We are using DataTables.

I see this is in your HTML but doesn’t get generated in ours.

<div class="sub-hover paging_two_button"><div class="control-prev disabled" title="Previous" /><div class="control-next" title="Next" /></div>

Soooo close! It would be good but there is a gap at the top. Is there a way to pass a style like this:

<div class="block-controls" style="margin-bottom: 0px;"> .... </div>

The margin-bottom is what is need to reduce the gap.

I don’t think you can pass inline styles to DataTables… The best way to solve this is to add the generic class no-bottom-margin to the sDom option:

sDom: '<"block-controls no-bottom-margin"<"controls-buttons"p>>rti<"block-footer clearfix"lf>'

Hope everything’s fine this time! ;)

That worked! Thank you.

I uploaded the content the php folder to my server. When I access with my web browser everything isnt formatted, as if it has no css.. did i do something wrong?


Depending on your server configuration, the CSS gzip compression may fail in some cases. If so, just edit css/mini.php and remove/comment these lines:

if (extension_loaded('zlib'))
    header('Content-Encoding: gzip');
    ini_set('zlib.output_compression', 'On');

Tell me if it solves your issue! :)

great that fixed it.

What functionality do i gain by using your php file version over your straight html version?

The Php version has JS/CSS minification (for better performances), dynamic server detection (for display on the header), a complete error handler and an example login script, ready to use – just fill the user check part in the Php code ;)

Good Day,

Hi sir its me again, i have some problem on “Web stats” actually the height of web stat is fixed. is there any way how can i make it fluid here’s the sample link

i already change the height to 100% but it didn’t work.


Good Day,

Thanks for your quick response, i already replace the drawVisitorsChart at the button (the jquery code) but nothing happen, i also try to delete the file but its not reflect on my Tab.

here’s some screenshot sir if you notice the tab “Medias. User, Information” has a single text inside but the height is like on the “Charts” , is it possible to make it fluid, and not depend on the bigger height like on “Chart Tab”

Ok, I understand what you mean :) The solution is simple: just remove the class same-height from the tabs UL, and the tabs plugin will no longer equalize the tabs size.

You will find more details on this in the documentation, in Functions / Tabs.