MantraThemes supports this item


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

1031 comments found.

Hi This a very nice template ;-) As the computer screen are almost all in the 16:9 or 16:10 format, that will be great to have the possibility to have a vertical “main menu”, like you have in your other template Developr, that you can expand/collapse too… Vincent

Hi, and thanks! :)

Well, I have no plan on adding a side navigation to Constellation, as I choose to make another template with this feature (Developr), but thanks for the suggestion! ;)

I would like to use your template but I have some questions. If I use your template is there some way that it will adjust if a user is working in for example portrait mode on an ipad? Also do you plan to add any more color themes to the template. It seems like you only have one color and a different background. Almost all the other fonts I am looking at have at least a few color themes now.

Displayinline – Can you check your answer to the last question. I think you gave me an answer for the Developr skin but my question was in the Constellation skin forum. I would like to find out how if the Constellation skin would work okay in portrait mode on an Ipad and also if you have plans to add more color themes. The Developr skin looks good but I would like to use the Constellation skin because it has a top menu and looks more conventional to me. Thanks, Gordon

You are right, sorry! I replied to fast… About your question, Constellation has a fluid grid you can use to fit most screen sizes, but does not include responsive features such as Developr. Having it to work on an iPad will mostly depend on what styles you use, and the size you give them – for instance, if you only use full-width or half-width blocks everything should look fine, but if you have a more complex layout some elements may break.

About the colors themes, the template includes a blue and red default theme, and I wrote a FAQ on how to create new color themes.

Tell me if you need more details! :)

Thanks for the update to my question. I would still like to use this theme as I feel it’s a lot more user friendly than developr which seems very cutting edge. Are you planning to add any new color themes and/or a theme switcher to this theme if you do another version of the template. Even if not in the next version will you add that to a future version. I think it’s a common thing that people may want and it would be a lot better if you were to use your color skills to help out with this. Thank you for your quick response. Gordon

Frankly can I ask what your plans are for the future with this theme. Are you planning on just maintenance updates/ bug fixes or will you add new features as time goes by. I am asking because it’s important for me to keep up with the new technologies and I think we all would like to purchase only a theme that keep itself updated with the web trends. Thank you for your quick response. Gordon


I am currently working on a global refresh of the template, which will include updated libs, bug fixes and new features. I can not give an ETA yet, but I hope to have it ready in the incoming months.

My goal is to regularly refresh the template, but never break compatibility for existing users – no major change in the markup or in the plugin’s setup, for instance. The JS and CSS code will be updated to match the current standards, but some new trends will only be available in new templates, because they’d require to much refactoring.


I would like to make use of your $.fn.loadWithEffect. The problem for me is that this function extends .load and I have a lot of areas in my code such as below where I make simple ajax calls without using jQuery .load:

                url: href,
                type: 'GET'
            .success(function (content) {
                    .html("<div class="block-border">" + content + "</div>")
            .fail(function (ajaxContext) {

Is there some way I could have the loading effect for this ajax that doesn’t use jQuery load?


By default, the template method can’t handle such ajax requests. But here is an example of a custom function that will take the jqXHR object returned by $.ajax and mimic the behavior of $.fn.loadWithEffect() :

To use it:

var deferred = $.ajax({ ... }).done( ... ).fail( ... );

If you wish to provide the “Retry” feature, you need to specify a function that will relaunch the ajax request as the second argument, for instance:

function sendRequest()
    return $.ajax({ ... }).done( ... ).fail( ... );
$('#some-div').ajaxWithEffect(sendRequest(), sendRequest);

Note: I did not test the code, so there might be one bug or two…

Hope this helps! ;)

I am using a modal window and at the top I would like to have a grey header area appear looking the same as though I included a block-controls class but with no buttons or controls inside of it.

Is there a simple way that I can do this? If I do the following:

   <div class="block-controls">
        <div class="controls-buttons">

I almost get what I need but it’s height is about half of what I need.


When a block element has no content, most of the time the line-height is ignored – hence the wrong size. To fix this, just insert a white char inside your div:

<div class="block-controls">
    <div class="controls-buttons"> </div>

It should have the right size now ;)

Thanks for the tip about sizing for my block-controls. Works fine now.

Changing to another topic.

I started to use HTML5 input validation for form elements. Works very nicely and it’s a lot easier than having to use jQuery validation for those of us with the latest browsers. Unfortunately the styling of validation bubbles is different for every browser and none match your template style. I am wondering if having some optional styling for the people who implement this would be possible for your next release.

Here’s just one article that talks about the styling:

Hope we can see some input validation style for this template even if it’s not available for older browsers and a “work in progress” as the browsers evolve to support input validation.


Glad I could help ;)

Thanks for the suggestion, I will be looking at the various styles and selectors I may add to improve this.

Regarding validation plugins, I am also still looking for a good one which will rely on HTML5 attributes and provide a robust fallback for older browsers, to avoid bloated markup and/or extra scripts… Looking forward to it ;)

Your template is use only for PHP or Windows base platform as well?



This template is for developers building an web product: it is built on HTML , CSS and javascript. It also includes a version with some useful PHP scripts, but the standard version may be used with any server language.

About using it with a Windows platform, it depends on the technology – if your platform handles HTML5 and CSS3 , you can probably use the template. Can you tell me more on the platform you want to use?

constellation theme is simply superb. I just wanted to get the datepicker work in a popup dialog, couldn’t so far. If anyone has code snippet how to get that, would really appreciate that.


Did you try to update the datepicker’s z-index to a higher level than the modal window? Just look for the #ui-datepicker-div in the plugin’s stylesheet you use, and set the z-index to a very high value, such as 999990.

Tell me if you still can’t have it to work! ;)

Hi displayinline, for retrieve a textarea text from modal window ? How can I do ? thanks


The best solution is to give your textarea an unique id:

var text = $('#modal-textarea').val();

Or you if you have only one textarea in you modal, you may detect it:

var text = $.modal.current.find('textarea').val();

Tell me if you need more details! ;)

$.modal.current.find(\'textarea\').val(); right, it work ! ;) thanks displayinline

Hello displayinline; I bought the template awhile back and never use it with old browsers, but I have a Terminal Server that uses Win2000 Server and it uses IE6 . the template displays but when it finish loading it jumps to the bottom and i can’t get back to the top. Do yo know what could be causing it or a solution? I upload it for a report interface and now I found this. Any help will be appreciate it.


Actually, I have no idea what may cause this… And it is hard to make a guess without testing it.

The template does not include any scroll-down code, just a scroll-to-top button, and it only uses one line of code.

You may try to remove all script from the page, then put them back one by one until the issue occurs again. If you can tell me which file causes the issue, I will check to find what may be the issue ;)

Thanks for your reply, I did that and it seems that is cause by common.js, however if i remove it then it won’t jump anymore but the functions aren’t there.

Well, I couldn’t find anything in common.js that may cause this… In fact, it does not use anything related to window scrolling. Weird.

Actually, common.js defines the template setup system, that is used by many other plugins. Does the issue also occur when this is the only file left?

I am sorry I can’t help more, but I can’t replicate the issue… If the file really causes the issue, you may try to use the same process to locate it: edit the file, and remove its code block by block until the problem disappears – a bit cumbersome, but it works.

Tell me if you still can’t find what’s wrong!

Thanks as always for your prompt support and assistance.

My modals are using code similar to this:

<div class="modal-window block-border">
<ul class="action-tabs right"><li><...></li></ul>
<div class="block-content"><h1>Login</h1>
<div class="modal-content modal-scroll"><form ... >
<div class="no-margin last-child">
<div style="line-height: 24px;" class="block-controls move-area"> </div>
<div class="block-content no-margin grey-bg">...
... modal content goes here ...

Is there a way I can change my CSS or js code so that I will be able to move around the modal by also holding the cursor down any place over the DIV with the class of “move-area”?


You just need to edit js/jquery.modal.js, find this line:


And add your custom class there:

win.find('h1:first, .move-area').mousedown(function(event)

Hope this helps! ;)

hi. is it possible to change the search position in the datatable in this template?



Sure, you just need to follow these 2 steps:

  1. Edit the sDom option in the DataTables init code: just move the letter f (which corresponds to the search input) to the desired location. You can learn more about the sDom option here.
  2. Edit js/libs/DataTables/jquerydataTables.css, and modify the properties for the .dataTables_filter class accordingly.

Hope this helps! ;)

Hello! How can I make a collapsed pseudo fieldset look the same as a collapsed fieldset? It is positioned too far right. Please compare:

<fieldset class="collapsed">
  <legend><a href="#">Real</a></legend>

<div class="fieldset with-legend collapsed">
  <div class="legend"><a href="#">Pseudo</a></div>

Thank you for your help!


There is just one missing css property for this case: edit css/form.css and replace this:

.form fieldset.collapsed legend,
.fieldset.collapsed .legend {
    display: block;
    margin-left: 0;

By this:

.form fieldset.collapsed legend,
.fieldset.collapsed .legend {
    display: block;
    margin-left: 0;
    left: 0;

It should work fine now ;)

Great, thanks!

Hi displayinline, have you a class for animated spinner (loading….) ? I’m looking for in documentation but can not find it, thanks


The template has no specific class for loading animation, but you can easily create one using an animated image from or – either by including it directly in your markup, or by creating a custom class ;)

Ok I found loadWithEffects function, can you give a example :) for spinner effect + load data ? tnx


Can you tell me more? If you want to load content inside an element, the loadWithEffect() method will do all the work for you – just check the documentation for detailed instructions.

If you are looking for something different or more complex, it depends on your app and on the way it works, so I need more details :)

[solved] ;) thanks no prob

Hi, i want to use your template for my Admin Section (Back-End) but i’m using ASP .NET with C# (C-Sharp). I don’t have knowledge of PHP .



The template comes with a HTML -only version, that you may use with any language. The Php scripts are here to guide buyers into using some functions (login, error display…), but they are not required by the template.

Tell me if you any other question ;)

Hi, Will i get a mobile version of this also, if i purchase your Admin Section (Back-End) Template OR i have pay more for that.



The mobile version is included in the package, as well as a comprehensive documentation and the original design PSD files ;)

Hi, in the simple list where each row has its own icon, I need to put a link on each row. While doing this the icon appears twice. Here the code: <ul class="simple-list with-icon"> <li class="icon-date"><a href=""><span>Lorem ipsum</span></a></li> </ul> Is there a way to avoid this? Regards Andrea


Just remove the span from your markup: the styles use either a span or an anchor to display the icon, you don’t need both ;)

The template is good but I am concerned to use as it’s been a year since you last updated. You said a few times that you are working on an update. Please can you tell us when it will be ready? I think maybe others are also waiting for this. I know you said you try to make everything work but it’s the thing we all want is to start are work with the latest version and not to start and then find another version comes out after that.


I am still working on the update, unfortunately I have no precise ETA right now… But you can follow me on Twitter to be notified when it is ready ;)

Note that the update won’t break anything in the existing markup or plugins options: users of previous version will only have to overwrite css/js files – as long as they did not change them.

Tell me if you need more details! :)