ace supports this item


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

1131 comments found.

Hello there,

Are you offering customized design? I have an existing site and would like a few changes made to frontend template.

Hi there Sorry about the late reply, What kind of work are we looking at ? :) we would love to help but Im not sure if we have enough time to take it as project :) but you could always send us an email for support

Hello Ace, the kind of work is mainly design work. I have a mockup based on your original design and would like you to implement those changes adding a touch of creativity. It’s mainly on the frontend design template.

edit:problem resolved :)

Hi there bgvc Great! glad you solved, we have bit of a weird time difference

Hi , no it does not it’s safe to use document ready :) sometimes the 3dd party plugin will not work

okok thank you

There is some overlap with bootstrap’s datepicker and jquery ui’s datepicker. How can they be isolated (style-wise)? Calling the default and intended jquery datepicker displays a mixture of bootstrap’s styling and that of jquery.custom. Thank you :)

Hi there Did you try noConflict() ?
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;  
<pre /></pre>

works like a charm, thank you! :)

I was wondering about the iconic validation: would it be possible to show the validation error message as well (together with the icons)?

Hi there Sorry about the late reply, Hope you had a great weekend :) Yes why not, when you open up your validation JS you find the function


$('<span class="error" />').insertAfter(element).append(label)

I use CORPORATE layout but there is a little probleme on small screen on MENU ..some icons wont there, see here :

don’t understand… what I have to change ? because I juste change -white to -dark it wont work ?

yes you have to change white to dark

yes okok thanks it’s ok


Just want to share with you a minor bug fix I made.

In core.js and breakpoints.js, instead of 768px, it should be set at 767px in order to sync with the media query breakpoints in responsive.css

Otherwise there is some funny behaviour as user resizes window around that breakpoint.

Cheers and great work


Hi there Yes that was a known bug and we have noticed it that breakpoint needs a slight adjustment, but Thank you very much for informing,we might have to release a small quick update like 2.5.1 but collecting more bugs, so far 2.5 has been the most stable version :)

Another issue:

perhaps you intend this? .page-sidebar-wrapper > .user-info-wrapper { display: none; }

currently it is being displayed… causing the entire mini sidebar to be shifted down a little

user-info-wrapper is the class that display user information with the user profile in the sidebar, this is pretty much hidden in the condensed menu, could you elaborate a-bit how that is causing an issue, maybe a screenshot would be easier :)


I’m having trouble setting web-arch to start with a hidden navigation menu.

Could you help me out, please?

Thank you so much!

Hi there You could do it two ways one is JS

add this to page bottom

or if you look at the body tag add the class hide-sidebar

<body class="hide-sidebar">

Should have looked better in the examples provided. Thank you. Works like a charm :)

The slight toggle under “form elements” is really cool, but it doesn’t work with IE9. The colored circles in the radio buttons aren’t centered in the outer ring too in IE9. Anything we can do?

Hi there Its a 3rd party plugin and a beta version still sadly, we might have to do some tweaking to get it working on IE9 properly but not 100% sure, will check it up

I have big problem… even on you online-demo of datatable.. I have two problems… I can’t scroll on my smartphone… to who right side of the table… it’s unscrollable and I can’t click on ”+” to open detailRow …. I don’t understand why I can’t open my rows … and scroll to who all table :)

Hi there Yes sorry about that the second two tables are not initialized for repsonsive datatables

this is the plugin
  • Add the data-class="expand" attribute to the th element for the respective column that will you want to display the expand icon in. The th element cannot be for a column that will be hidden.

  • Add data-hide="phone,tablet" to the th element for the respective column that will you want to hide when the window is resized.

  • Add data-name="Hidden Column Name" to the th element for the respective column that will you would like its label to be set to when hidden.

also remeber to add the JS init for the particular table

var responsiveHelper;
var breakpointDefinition = {
    tablet: 1024,
    phone : 480
var tableElement = $('#example');

ace, Thank you so much for the HAML files ! it just saves me so much time ! I my opinion all good themes shall be packed this way !

Do you plan to include a Gulp / grunt build script in future releases ?

Hi there Great! :) glad it helped, not at the moment but these suggestion are always welcome for future updates

Thanks for quick reply :) Next time, while packaging your release, don’t hesitate to leave “partials” as well (menu, left sidebar, right chat bar). As lots of purchaser are backend guys and coding with templates, some of them, just as me, hate to put hands in the front code, and partials will save us even more time ;)

Hi this project include any PSD file with the UI Interface?

Btw awesome theme ;)

Hi yes It includes PSD for all widgets in the dashboard, UI elements that is buttons, forms & etc , Main layout and every other page :) p.s charts.html will not be included as they are 3rd party plugin :)

Couple of issues:

On page load if the menu bar is set to collapsed then there is an issue with it displaying properly.

Image and video hosting by TinyPic

Also, the submenus are not collapsed on page load so you have to close them every time which is a bit of a pain.

Image and video hosting by TinyPic

Otherwise amazing theme and I’d love to buy it.


Separates the menu bar into two colours:

Image and video hosting by TinyPic

Hi there jamesaps :) Thank you for the feedback Im going through one by one and finding a heard time to replicate them, Lets look at the first screen shot of the user profile :)

Im also using OSX and chrome, and the green side bar seem to be closed properly,

I tried resize window and also firefox OSX still issue on user profile, is there any specific settings like screen resolution that Im aware of :) ?

No you not being a pain :) Its very helpful for us to know all these.

2) Auto closing menu is possible and its already set to all tablet devices and can be enabled on desktop as well :)

3) The Scroll to top is by design align to in the middle of the green bar edge, but if you think its a bit odd we can help you to align it any where you want :)

4)Was able to replacate the bug, will be able to get out a hot fix for this, Thank you!

Thanks for the reply :) I’ve bought the theme and will await the update – any ideas when you’ll have this ready?

My screen is a retina screen. The settings I have on the theme are:

direction = ltr layoutOption = condensed-menu theme = default

Otherwise everything else is left as is.

No worries :)

Hi could you add the following to the theme:
  1. Ecommerce store apps pages (like Sentir theme)
  2. in the right chat slideout area, can you add tabs (like Sentir theme)
If you can add those 2, i will buy this theme over that.

Hi there Missed the comment :/ Extremely sorry on our end :) yes planing to add an e-commerce page and its going to be focused more on form elements this time :)

I use step wizard bootstrapp… but I want go one step back If the previous step isn’t valid…how check this ? for example: I click on tab to step 3 and when click next I want to validate previous steps to go back …

Hi there Did you see of the Boostrap JS is set to version2 on 3 because that plugin doesnt support 3 and there wont be an issue any way :)

yes I use bootstrap2 no problem… I know for this bug but I just need to go one step back if we click fill on navigation step 3 and when clicking NEXT from tab 3… how Can I check if the previous tab form are validated ( I use jquery validate)

Hi there Its quite easy if you look at the boostrap wizard and the code in form_validation.js

you will find
              'onNext': function(tab, navigation, index) {
                  var $valid = $("#commentForm").valid();
                  if(!$valid) {
                      return false;
                    $('#rootwizard').find('.form-wizard').children('li').eq(index-1).find('.step').html('<i class="fa fa-check" />');    
onNext we validate $(”#commentForm”).valid();

and we have a separate validation rules for it set for that in the normal way :) as jquery validate

    var $validator = $("#commentForm").validate({
          rules: {
            emailfield: {
              required: true,
              email: true,
              minlength: 3
            txtFullName: {
              required: true,
              minlength: 3
            txtFirstName: {
              required: true,
              minlength: 3
            txtLastName: {
              required: true,
              minlength: 3
            txtCountry: {
              required: true,
              minlength: 3
            txtPostalCode: {
              required: true,
              minlength: 3
            txtPhoneCode: {
              required: true,
              minlength: 3
            txtPhoneNumber: {
              required: true,
              minlength: 3
            urlfield: {
              required: true,
              minlength: 3,
              url: true
          errorPlacement: function(label, element) {
                $('<span class="arrow" />').insertBefore(element);
                $('<span class="error" />').insertAfter(element).append(label)

Hope you got it :)

Hey, is it possible to make the animated weather icons retina-ready like this:

(just scroll down a bit)

Hi there Yea the current weather icons are skycons SVG which does not look so sharp on retina, but thank you we can have this on the new update, Im assuming your going to start work on your new project ?

Yea I’ve started on my new project but I’m working on the backend at the moment so I’m not in a hurry :)

Thanks for the prompt replies… Best seller I’ve bought from on here

Hi there James, Thank you very much, yes few bugs are left we will give out a prior update, I dont think it will conflict you much as long as you stick with LESS, much easier to update the theme :)

Hey guys!

You really should clean up your messy less and scss files. First of all: Why is there a different file structure for less and scss files? Also why isn’t there any /themes folder in /scss like in /less? And what’s with files like /css/magic_space.css – you don’t even import them anywhere in your .html files. Do I need them? If so, what for? Also, why are there no less or scss sources for them?

Currently my biggest concern is: I’m using your .scss files in my project. Everything is being imported properly, most of the stuff also works fine but I found quite a lot annoying differences in e.g. bootstrap alerts and buttons.

Example: When i use a div with .alert.alert-error with the precompiled versions of your css (/css/style.css and /css/responsive.css) my alerts have border-color: #f8cdcd.

On the other hand, when I use the original scss files (/scss/style.scss and /scss/responsive.scss) my alerts have border-color: #e24847. Which is obviously a whole different red tone then the previous one. Same goes for all alerts, including their backround and font colors.

I looked at your scss files and found the source of the color which is:

// in scss/variables.scss $light : #111; $color-danger: #F35958;

// in scss/modules/message_notifications.scss .alert-danger, .alert-error { [...] border-color: $color-danger – $light; [...] }

Feel free to check out my codepen: I get the same results when using your less files. So my question is: How could it be that the color values in the precompiled css files are different than in your less or sass files?

Another example would be: Why does .btn-success have the same background color as .btn-primary when using scss or less files? Suming up: There is much more of weird stuff going on that I just can’t understand. Please fix them and keep your less,scss and css files in sync.

Why do I prefer using the scss version of your theme? I really appreciate the diversity of webarch, however sometimes it’s not really economic to include a few thousand lines of css if you’re only using 30% of the theme’s components.

Nonetheless, thanks for being awesome and creating this huge theme (and continuously improving it!). I’m sure it saved all of your customers tons of time – including me of course! Best, Martin

Hi there Thank you for purchasing and the feed back :)

Im assuming your using the latest 2.5 version ? :)

Yes the LESS and CSS are sync properly but we could not update the SCSS and planning to release one tomorrow evening (Excuse the timezone different) Apologies on the part where SCSS is not Sync with the LESS files :)

You may have missed my message did you try to replicate the bugs I encountered with these settings: direction = ltr layoutOption = condensed-menu theme = default

Hi there Yes I did, The user profile thing is only a demo version issue and you will not see it in the package, what it does is toggles condensed menu so if its available it will remove, But no worries it will not be in the package, And as for the green and black bar mixing up we might have to remove the fixed option on condensed menu :) Will forward a quick fix for it, and the To Top black Icon is by design and not alignment issue do you wish to change that ?

Hi there! is this file come with SASS or SCSS?

Hi there Im sure SASS is also SCSS because its Sassy CSS (Main Syntax formate in SASS) so the extension is provided as filename.scss :)

The styling for the simple drop down component (the one with the timezones in the form_elements.html) stop working when I remove the iOS slide toggle. Specifically, if I remove the following line from the HTML, the drop down for the timezones will lose the formatting;:

<input type=”checkbox” name=”switch” class=”ios” checked=”checked”/>

Do you confirm this a bug? If so, what would be the fix?


Hi there Not tried a datepicker in a modal, Im not sure if the Boostrap datepicker would function that way, will check it uo

Hi guys Not sure if you were able to check out whether the date picker would work inside a modal window. I tried browsing bootstrap docs, but did not succeed. Thanks!

ACE was able to reply to my question by providing the following code tweak:

Hi there Lets add a small tweak to the stylesheet, open up style.css and add

.datepicker{ z-index:1151 !important; }

It worked like magic. Thank you!

Hey Ace, I’ve found a lot UI bugs, as soon as I get some time, I’ll make a list and send it over.

I’m happy to report that indeed it was select2 bug, updating the plugin solves the issue.

Atm I can tell you that something is wrong with select2 and webarch. I checked original select2 plugin and couldn’t reproduce the bug, so it’s something with Webarch.

Steps to reproduce the bug: Click on the select item. Once it’s open, click on the same spot (select item itself) to close it. After it’s closed, click on any other input on the page.

After you click on some other input, select item will gain select2-container-active class that will emulate :focus look. This is even reproductible in official demo. I’ve updated select2 plugin, problem still persits.

I looked up with inspector, and for some reason, select2-container-active is removed upon closing, and reapplied when you focus some other input, whereas in original select2 select2-container-active class is applied after you close dropdown, and removed as soon as you click anywhere on the page.

Hi there Yes its select2 bug, updating the plugin will work out, will update in plugin in future updates :) Thank you for pointing out