ace supports this item


This author's response time can be up to 1 business day.

1147 comments found.

Hi Ace, just a quick question is it possible to have a Grid/Portlet Collapsed by Default when a page loads? also; about the problem that palmtown has with Datatables Tabletools, it might be the SWF location (tabletools uses flash for that functions). i had the same issue and fixed it editing the datatables.min.js and pointing manually the copy_csv_xls_pdf.swf location.

Hi there Yes the data-tables plugin is bit annoying even there latest update uses flash :/ but they do not have any other options, still investigating on this problem with data-tables, well if you want to

Knowledge Base

Close Port-lets By Default

To your grid add the class closed

<div class="grid simple closed">


and afterwards we need to point the arrow up so you will find the div .collapse inside the grid

change it to


Thanks, i’ll try it later. and like i said i just changed the file dataTables.tableTools.min.js there search for

and replace it for

Hi, we experience problems compiling SASS files. I have read about a fixed version somewhere in the comments? Are there any known issues with SASS?

BTW. any plans for update to this excellent theme?


Hi there You should be able to compile it properly though, there was a minor update issue with 2.5 where it was not sync with the LESS files, but we now have a proper update and will be available in themeforest soon

but if you want to SCSS files please email to

SCSS Latest Update Available

Hi, I really want to purchase this theme but could do with a blog page layout. Is one coming in the future or is it easy enough to create one on the blank page template with the existing features? thanks

Hi there Im assuming your talking about the front end, but if you look at the admin panel design dashboard we have made a couple of blog widgets :) yes we are planning to update the front end so blog page would be an awesome idea

link for example login page.

You can add a background image on the login panel page?

Yes why not but you need a js custom code, that we could provide, quick question do you have a set of images stored on a directory and your retrieving it from that or from an api ? :)

set of stored images.

Hi there Open up core.js or even login.js to put the custom code to change images

$.fn.randomeBackground = function(numberofimages,dirpath,ext) {
       var random = 1 + Math.floor(Math.random() * 6);
//Function Call
//Para -  Number of images, Path to dir, Extenstion

very nice and professional design. Well done!

Hi there Thank you very much, appreciate the great comments :)

Hi Ace,

We are implementing Datatables ColVis in our application. We have about 16 items. On load, only 6 display in order to keep the elments within the grid (grid simple). What happens, is when the user displays more than 8 and the page needs to expand, the white-bordered background (grid) does not expand with it. The table elements simple overlay it.

Is there a way to achieve a responsive result that when the page expands to the right, that the grid (grid simple) can expand with it?

Please let me know if you need a screen shot for better clarification.


Hi there Sorry about the late reply, I think I got what you said but a screenshot would be very helpfull, did you try out the datatables responsive plugin

Its already available in webarch

HI Ace. I am using the responsive datatable element and it works when screen size is different. Sending screen shots

Hello , What should i do for using scrolling feature in grids. ?

Hi there Simply add the following div after grid body, note that you must specify a height :)
<div class="scroller" data-height="220px" data-always-visible="1">
Your scroll content

Hi, is the “Slide Toggle” scalable? Perhaps with ”.input-lg”/”.input-sm”? I`d like to have it smaller but i did not find documtation.

Hi there Unfortunately its not this is a third party plugin, but we have already made one for the new update,

Pre Checkbox update : slide toggle

Send an email to

We will mail you the code :)

Cool. I will wait for the update, thanks :-)

Hi Ace,

I am trying to view on an iPhone as a live preview it jumps from one view to another, meaning that it shows the two posibilities you can have as a layout or with or without the expanded side bar. So my question is: will this happen to me after I will purchase is it just for demo purposes?


Hi there Im not sure if I got exactly what you were saying, you mean when you have the themeforest top bar and without it ? :)

Small questions:

  • How do I colorize the fontawesome icons with eg the .primary color or any other color?
  • I do not see my logo in the header in tablet view. It appaers correctly in mobile and desktop view?
  • How do I change color of the left sidebar menu mousever (for the icons). The menu is my primay color but on mouseover it has a default color (from your demo).

forgot to ask how to force desktop view also on tablet? Thanks!

Hi there Answers 1) Try the 4 main color and the class


2) By default we have set it to go to condensed menu there for the logo also condense with the menu

to open the main in tabets

Just add the class .opened to main-menu div :) Done! we have already enabled that feature in 2.5

3) Have you use LESS because that would be quite easier to change the theme colors if not we can change the ill tell you the CSS line number :)

Found bug.. Go to “Layout – options”, click button “Toggle Chat”, and click “Show/Hide Menu” or button with three strips..

Hi there I think your talking about the settings gets over layed by the chat right ? :) yes its demo only bug will fix it Thank you very much

This is a great template with lots of possibilities! However, there seems to be a small bug regarding the charts javascript.

When I delete all chart widgets from the widgets.html but keep the corresponding js files in the body, some of the animations from the other widgets won’t work anymore. When I delete the javascript files from the body,everythings works fine.

Hi there

I think its a small mis understanding, when you delete a chart you should delete the appropriate JS code relevant to that chart or else it will try to find it and if its not there it will through an error, I know why didn’t we error handle ? unfortunately these 3rd party plugins don’t but I’ll give you a best practice hint

In the package folder open the barebone :) from that you build your project, it has all the minimum requirement to run webarch, you simply import necessary plugin links( follow documentation).

To debug code Open up chrome and press f12 and go to console tab or else in OSX right click inspect element :)

To find the relavant chart JS in the HTML code you will find a div with a specific unique ID, open the chart.js in assets/js folder and find that same ID :)

Hope this helps

Sorry for asking again but I can’t figure out how to use only the desktop and the phone view (and their corresponding navigation) but not the tablet view.

In other words: When on tablet I want to see the left navigation menu in opened state (like on desktop), I can then close the menu and use the small left navigation if more space is needed.

How do I get this behavior?

Thanks in advance.

Hi there You want the desktop view even in the tablet right ?

so you once you scroll down in the source you will find the

<div class="page-sidebar" id="main-menu">

and the extra class opened

<div class="page-sidebar opened" id="main-menu">

Hope you got it :)</div></pre></div>

Hello, I purchased your theme and it’s great … Can you tell me if the filter widget that appears within Live Preview is available within the downloaded code base?

I’m referring to filter fly-out menu on the right side of the page, that allows the user to preview different themes and layouts.

Hi there Its only for demo usage and it use LESS.js to complie the LESS files realtime but if you want to we can send you the code for the demo version, Please send an email to :)

how to close sidebar ?

Hi there Yes you can, you can view the guide here to do that

or we simply add Add condense-menu class to the body tag

Greetings! Big Fans of your work!

1) When is the next release coming out?

2) How do we integrate a stripped down version of the portfolio (frontend) into webarch, master template – what is needed. Got it stripped, struggling with integration

3) somewhere you mentioned you are working on a visual layout generator. Is that going to be a part of the upcoming release. Cannot wait!

thanks for your awesome work and business practices. Best Luck

After that use the following css its always available on front end style.css

.isotope-item {
    z-index: 2;
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;

.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;

/**** disabling Isotope CSS3 transitions ****/, .isotope-item,
.isotope {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;

.portfolio-filter ul{
.portfolio-filter li{
.portfolio-filter li a{
.portfolio-filter li a:hover{

.portfolio-grid ul li a.hide {
    display: none;

.portfolio-grid {
    width: 101%;
    margin: 0 0 0 -1%;
    padding: 0;
    float: left;
.portfolio-grid ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
.portfolio-grid ul li {
    float: left;
    margin: 0 0 1% 1%;
    padding: 0;
.portfolio-grid li .project-title {
    font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
.portfolio-grid li .project-description {
.portfolio-grid li:hover .project-title { 
        -webkit-transition: opacity .4s .5s;
        -moz-transition: opacity .4s .5s;
        -ms-transition: opacity .4s .5s;
        -o-transition: opacity .4s .5s;
        transition: opacity .3s .5s;

.portfolio-grid li:hover .project-description {
        -webkit-transition: opacity .4s .8s;
        -moz-transition: opacity .4s .8s;
        -ms-transition: opacity .4s .8s;
        -o-transition: opacity .3s .8s;
        transition: opacity .3s .8s;        
.portfolio-grid li:hover .item-info-overlay{
                transition:all 0.4s ease 0s;
        -moz-transition:all 0.4s ease 0s;
        -webkit-transition:all 0.4s ease 0s;
        -ms-transition:all 0.4s ease 0s;
        -o-transition:all 0.4s ease 0s;
.isotope-item {
    z-index: 1;
.isotope-hidden {
    z-index: 0;
.col2 li {
    width: 48.98%;
.col3 li {
    width: 32.25%;
.col4 li {
    width: 23.92%;
.portfolio-grid ul li img {
    float: left;
    width: 100%;
.item-info {
    float: left;

.item-info-overlay a.overlay-link {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
    left: 0;
    top: 0;
.item-info-overlay {
.item-info-overlay {
    left: 0;
    top: 0;
    z-index: 120;
    background: rgba(10, 166, 153, 0.80); 
    text-align: center;
.item-info-overlay div {
    margin: 0 9%;
.item-info-overlay h3.title {
    margin: 9% 9% 0 9%;
.item-info-overlay h3.title, .item-info-overlay h3.title a {
.item-info-overlay h3.title a:hover {
    color: #fff;
.item-info-overlay p {
    color: #fff;

.item-info-overlay .outline {
    box-shadow: 0 0 0 1px #999 inset;
    color: #999;
    line-height: 16px;
.item-info-overlay .outline:hover {
    color: #fff;
.item-info-overlay .button + .button {
    margin-left: 5px;

After wards you need to copy the HTML code that is in the Fronted portfolio :)

thanks cannot wait for your next update. Keep up the good work!

This may be a stupid question but I have never played or tried Boostrap yet. If I purchase this theme does it come with the demo layouts i.e can I just upload the files to my test server and learn by going through the code of each page or do I have to build all those admin pages by hand?

i.e would uploading the files I ll get when I buy the theme be enough to have the same pages and look as your demo? Thanks in advance

Hi there The package contains HTML / CSS / JS and if your going with a rails app then it has HAML/SCSS or LESS. It depends on you requirement and we would always be happy to help you out in the difficulties you face :)

Hi, There’s a problem with some of the styling under Chrome, this screenshot is from the latest version (downloaded 2 minutes ago) without any modifications, using your demo:

The break between the table titles and the rest only happens in Chrome and only when there’s a <form element on the site, anywhere. Somehow <form> interferes with it!

Please help, Thanks!

Hi there This is noted before and happens occasionally, we were thinking of migrating to boostrap panels :) thats the best way to solve it

Awesome design!

Can I use this on my wordpress/woocommerce Admin?

If yes, do I have to know anything about coding? Would I be able to customise the whole admin interface just installing this?

DO you have a documentation on how to install and configure?


Hi there Unfortunately its not a wordpress or wordpress admin theme, it falls in the HTML category where you can convert it to wordpress but keep in mind you need do some work of coding :)

Hi Author.

I’m crazy with your admin template and the frontend design.

But the only with I’m missing on your template is a gantt chart.

There is a not a gantt-chart setup on any admin template on temeforest.

I think there could be very good earnings in a gantt-chart because there is over 165.000 search for gantt charts on google.

Best Regards

Christian Heidemann

Hi Ace. It sounds cool with a beta version of a Gantt design on webarch. The big update August 8th is for webarch…

Best Regards Christian

Can you write a short appetizer for the upcoming features on 8 august…

Hi there In terms of Webarch, we will add the gantt chart, SCSS updates, form elements updates. But the biggest surprise is to be kept as a surprise ;) we are working day and night to get it on the 8th but might have small change in dates :)