234 comments

Hello, I bought the theme but I can not change the background picture as in the demo. How should I do?
Hi,

Please include the following in your style.css and functions.js files.

CSS

/* --------------------------------------------------------
Template Settings
-----------------------------------------------------------*/
#settings {
position: fixed;
right: 0;
color: #000;
background: rgba(255, 255, 255, 0.88);
padding: 7px 8px;
top: 120px;
z-index: 1000;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
font-family: open-sans-regular;
border-radius: 5px 0px 0px 5px !important;
line-height: 20px;
width: 34px;
white-space: nowrap;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
transition: width 300ms;
}

#settings i {
font-size: 21px;
float: left;
margin-right: 10px;
}

#settings:hover {
background: #fff;
width: 130px;
}

.template-skins [class*="col-"] img {
border: 3px solid rgba(0,0,0,0.5);
}

.template-skins [class*="col-"] img:hover {
opacity: 0.8;
}

.template-skins [class*="col-"] {
margin-bottom: 10px;
}

JS - Add this inside document.ready

/* --------------------------------------------------------
Template Settings
-----------------------------------------------------------*/

var settings = '<a id="settings" href="#changeSkin" data-toggle="modal">' +
'<i class="fa fa-gear"></i> Change Skin' +
'</a>' +
'<div class="modal fade" id="changeSkin" tabindex="-1" role="dialog" aria-hidden="true">' +
'<div class="modal-dialog modal-lg">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">Change Template Skin</h4>' +
'</div>' +
'<div class="modal-body">' +
'<div class="row template-skins">' +
'<a data-skin="skin-blur-violate" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-violate.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-lights" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-lights.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-city" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-city.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-greenish" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-greenish.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-night" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-night.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-blue" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-blue.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-sunny" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-sunny.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-cloth" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-cloth.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-tectile" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-tectile.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-chrome" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-chrome.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-ocean" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-ocean.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-sunset" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-sunset.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-yellow" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-yellow.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-kiwi"class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-kiwi.jpg" alt="">' +
'</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#main').prepend(settings);

$('body').on('click', '.template-skins > a', function(e){
e.preventDefault();
var skin = $(this).attr('data-skin');
$('body').attr('id', skin);
$('#changeSkin').modal('hide');
});
Hi,
I have a problem in "flip in x" animation, it supports chrome but not firefox in the latest version of "super admin" (1.0.3), can you check and edit your animation.min.css and send it to my email please?

Thanks,
Its seems working from my side, can you email me where did you try this? If possible with a link?
gerecke PURCHASED
I like SuperAdmin and purchased for some trial work. Having a problem with getting date picker working in modal. From form-components I took below but when I click in input no date/time picker shows. I've gotten picker working in modal with stock bootstrap 3.0 by adjusting z-index, but that doesn't seem to be issue here. Suggestions?

<div class="col-md-4 m-b-15">
<p>Date Picker</p>
<div class="input-icon datetime-pick date-only">
<input data-format="dd/MM/yyyy" type="text" class="form-control input-sm" />
<span class="add-on">
<i class="sa-plus"></i>
</span>
</div>
</div>
Have you loaded the JS file which containing the date-time picker jQuery function? Can you email me the link so I can have a look?
Cool theme, I'm very interested for Extended license. But will need titles next to icons in main menu to be always visible, is this supported? Thanks
Yes, I will be giving after sales support and I will help you get it done.
Hi. Can you help me?
I pay for this template but i dont get it.. could you help me?
I waiting for it 2 days...
greetings.
I hope you got the download link.
The "remember me" check box doesn't work correctly on the login page. When you check the box the DIV style changes to "checked" but the input element does not change to checked="checked" so the jquery change() or clicked() handlers to not get called.

<div class="icheckbox_minimal checked" aria-checked="true" aria-disabled="false" style="position: relative;"><input id="rememberMe" type="checkbox" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>
Hi,

Checkbox and Radio are handled by the iCheck jQuery plugin thus you can use plugin functions in order to detact the changes.

eg:
$('input').iCheck('check'); — change input's state to checked
$('input').iCheck('uncheck'); — remove checked state
$('input').iCheck('toggle'); — toggle checked state
$('input').iCheck('disable'); — change input's state to disabled
$('input').iCheck('enable'); — remove disabled state
$('input').iCheck('indeterminate'); — change input's state to indeterminate
$('input').iCheck('determinate'); — remove indeterminate state
$('input').iCheck('update'); — apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); — remove al

Please check the complete documentation here;

http://fronteed.com/iCheck/
arccode PURCHASED
superadmin1.0.3 change skin disappeared.
arccode PURCHASED
oh, I notic this Doc.txt, there isn't icon in the interface, I should change the body id.
Glad you got it.
i bought this theme could you help me to add the settings icon on the right screen that can change the background? Thank You!
got working with this, is it possible that if end user choose one from the selected theme and apply the selected theme to other pages? could you help me coding it?
Hi,

You can use the HTML5 LocalStorage API for this. Check the updated skin switching jQuery functions below;

$('body').on('click', '.template-skins > a', function(e){
e.preventDefault();
var skin = $(this).attr('data-skin');

//Store the skin in local storage
localStorage.setItem('templateSkin', skin);

$('body').attr('id', skin);
$('#changeSkin').modal('hide');
});

and add the following codes as the first one inside your document.ready;

var getSkin = localStorage.getItem('templateSkin');
$('body').attr('id', getSkin);

Regards,
Rushenn
And to avoid the empty results, you can give a default skin;

var getSkin = localStorage.getItem('templateSkin');
var skin = '';

if(getSkin == ''" ) {
skin = 'defailt-skin-id'
}
else {
skin = getSkin;
}

$('body').attr('id', skin);
@rushenn Thanks for the reply, what file do i need to open and add/enter those codes? sorry just confused.
You can add this in your functions.js file. Please PM me if you need further assist on this.
tkp PURCHASED
Hi Rushenn,

I bought the template months ago and got it by download. But I got a problem with my drive where SuperAdmin initial sources were stored and lost it.
Is it possible for you to give me again the link to download the lastest version of SuperAdmin ?
Thank you.

TKP
You can use this link to request download links.

https://wrapbootstrap.com/support/download-resender
yop PURCHASED
Hi Rushan,
i don't know how to add "onchange" or "onslide" on sliders
can you help me ?
Hi,

Can you tell me what you are exactly trying to do? You're trying this to get the value out?
yop PURCHASED
Hi,
yes, i'm trying to get the value out
i want to launch ajax request when slider is changed

thanks
Did you try this way?

$('.input-slider').slider().on('slide', function(ev){
// $(this).closest('.slider-container').find('.slider-value').val(ev.value);
});
Sk3y PURCHASED
I have an issue with the Filemanager. If i upload files with 1 MB and greater it says "unable to connect with backend". Any solution?
Sk3y PURCHASED
2 minutes later: found out that nginx has a separate filelimit. Set it with client_max_body_size 1m; in you domain/server configfile under location
tosh PURCHASED
Do u have any plans on adding DataTables in your theme?
Sorry, I don't have at the moment...
vorchid PURCHASED
Hello rushenn, can you tell me how can i custom the toolbar of the editor? Or can i download summernote and using it in this theme? When i do this , i found the style will changed, is there any way to do this.
Hi,

There is no integrated way to edit the toolbars at the moment with Summernote. Please check this thread if you are looking to remove/add toolbar items.

https://github.com/summernote/summernote/issues/29
leadfoot PURCHASED
I am a total newb, and could use some directions for applying the them. Can you suggest a site for that?
ivan11 PURCHASED
Hello, I bought the theme but I can not change the background picture as in the demo. When look in js. file there is no document ready. THX
Hi, I've added that only for the demo version. You can still make it by adding the following codes. Also please download the bg images from the demo site if you need any....

Hi,

Please include the following in your style.css and functions.js files.

CSS

/* --------------------------------------------------------
Template Settings
-----------------------------------------------------------*/
#settings {
position: fixed;
right: 0;
color: #000;
background: rgba(255, 255, 255, 0.88);
padding: 7px 8px;
top: 120px;
z-index: 1000;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
font-family: open-sans-regular;
border-radius: 5px 0px 0px 5px !important;
line-height: 20px;
width: 34px;
white-space: nowrap;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
transition: width 300ms;
}

#settings i {
font-size: 21px;
float: left;
margin-right: 10px;
}

#settings:hover {
background: #fff;
width: 130px;
}

.template-skins [class*="col-"] img {
border: 3px solid rgba(0,0,0,0.5);
}

.template-skins [class*="col-"] img:hover {
opacity: 0.8;
}

.template-skins [class*="col-"] {
margin-bottom: 10px;
}

JS - Add this inside document.ready

/* --------------------------------------------------------
Template Settings
-----------------------------------------------------------*/

var settings = '<a id="settings" href="#changeSkin" data-toggle="modal">' +
'<i class="fa fa-gear"></i> Change Skin' +
'</a>' +
'<div class="modal fade" id="changeSkin" tabindex="-1" role="dialog" aria-hidden="true">' +
'<div class="modal-dialog modal-lg">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">Change Template Skin</h4>' +
'</div>' +
'<div class="modal-body">' +
'<div class="row template-skins">' +
'<a data-skin="skin-blur-violate" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-violate.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-lights" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-lights.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-city" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-city.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-greenish" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-greenish.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-night" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-night.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-blue" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-blue.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-sunny" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-sunny.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-cloth" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-cloth.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-tectile" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-tectile.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-chrome" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-chrome.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-ocean" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-ocean.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-sunset" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-sunset.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-yellow" class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-yellow.jpg" alt="">' +
'</a>' +
'<a data-skin="skin-blur-kiwi"class="col-sm-2 col-xs-4" href="">' +
'<img src="img/skin-kiwi.jpg" alt="">' +
'</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('#main').prepend(settings);

$('body').on('click', '.template-skins > a', function(e){
e.preventDefault();
var skin = $(this).attr('data-skin');
$('body').attr('id', skin);
$('#changeSkin').modal('hide');
});
ivan11 PURCHASED
I did that.. THX Work just fine..
Now hot to crate that in top of the table where is header add icon for new person in table and to add new person using modal?
Not getting you, please explain?
AsL PURCHASED
how do modify the calendar languages?
Please check this documentation
http://fullcalendar.io/docs/text/lang/
wraplex PURCHASED
Hello,

Yesterday I have purchased this dashboard, but do no not want to use the sidebar part of it. Ik have removed that from the index.html, but the space formerly uses by the sidebar is keeps empty and not being used by the main page. Could you tell me what to do?
Hi, You may try this,

Go to your css file and search for #content, then remove the following property;

margin-left: 233px;
ivan11 PURCHASED
Hello...new ?.. I have my one function (name executeSelect($db, $sql)) but when I put her on the theme they don't work and calendar, watch, rss stops to work to.. Do I have to put them in functions.js and write in js?
Could you please provide me a link? Please check the console in the browser, you may have to change the order of your js files.
ivan11 PURCHASED
Hello.. How to add scroll bar in table? Can we change a size of modal wider ?
Hi,

You can use the responsive table option by adding a container for the table with class .table-responsive. Please check the table page in the demo link.
ivan11 PURCHASED
I made
.table-container {
height:200px;
}
and it's show a scroller, but problem is that i have a form under the table, and scroller merged the table and the form.. I wont that form bee on the right side and the table on the left side... so i write for table <div class="col-md-8 pull-left and for the form div class="col-md-4 pull-right but form is still under the table? :/
No need to include the pull-left class. You may try like this;

<div class="col-md-8"> TABLE </div>
<div class="col-md-4"> FORM </div>
Hello, do You plan to add a progress indicator widget, like step1 > step2 > etc with highlighted active item? My second question is, how can I wire a click event on a checkbox? $('#checkbox_id').click(function(... is not working unfortunately. Thanks in advance.
Hi,

I will consider the progress indicator widget in my next release but can't give you an exact time frame. For checkbox and radio I'm using the iCheck plugin. You can use it's Callbacks such as,

ifClicked
ifChanged
ifChecked
ifUnchecked
ifToggled
ifDisabled
ifEnabled
etc...

Please check the official documentation for more information
http://fronteed.com/iCheck/

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$12

Regularly $18 -33%

3268Purchases

Licenses: Details »

Single application $12
Version:2.1
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
  • Fluid
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Categories:
Tags: admin, admin template, backend template, dashboard, lightweight admin, responsive admin, responsive dashboard, webapp
Item#:WB02N9M12
Released:3 years ago
Updated:5 hours ago
Sold exclusively on WrapBootstrap
rushenn

rushenn

Signed up 5 years ago

Need a front-end theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: