1409 comments

Hi Sean,

Loved the template and currently using it at the V in an MVC prototype :)

Quick question regarding the 'Panel' functionality that you have implemented: Do you know if the panels can be dynamically reloaded? E.g. after X seconds or after the user does something on the page (without reloading the whole page). I am using the HTML version, the Ajax version in my template download doesn't quite work - I get 404s for all pages!

Cheers,
Hans
Hi Hans,

For the panel functionality, you need to write your custom ajax load in order to handle the panel dynamically reloaded. Can you send us an email with more detail on the function requirement, so that we can create a custom function for you.

Best Regards,
Sean.
Hi Sean,

I have emailed you as requested.

Regards,
Hans
Hi Hans,

We have replied you with the custom function that you required. Do check your mailbox. Do let us know if you didn't receive the email.

Thank you.

Best Regards,
Sean.
Hi Sean,

Thanks for sending these across. I have made a few minor tweaks to the JS functions you sent me to show the 'spinner' while the data is being fetched as follows:

var handlePanelLoadUrl = function () {
if ($("[data-load-url]").length !== 0) {
$("[data-load-url]").each(function () {
var targetUrl = $(this).attr("data-load-url");
var targetBody = $(this).find(".panel-body");
var target = $(this).closest(".panel");
var spinnerHtml = "<div class=\"panel-loader\"><span class=\"spinner-small\"></span></div>";
$(target).addClass("panel-loading");
$(targetBody).prepend(spinnerHtml);
$.ajax({ url: targetUrl, cache: false }).done(function (data) {
$(targetBody).html(data);
$(target).removeClass("panel-loading");
$(target).find(".panel-loader").remove();
});
});
}
};

var handlePanelInterval = function () {
if ($("[data-reload-interval]").length !== 0) {
$("[data-reload-interval]").each(function () {
var targetTimeLoop = $(this).attr("data-reload-interval");
var target = $(this).closest(".panel");
var targetUrl = $(this).attr("data-load-url");
if (targetUrl) {
var targetBody = $(this).find(".panel-body");
setInterval(function () {
var spinnerHtml = "<div class=\"panel-loader\"><span class=\"spinner-small\"></span></div>";
$(target).addClass("panel-loading");
$(targetBody).prepend(spinnerHtml);
$.ajax({ url: targetUrl, cache: false }).done(function (data) {
$(targetBody).html(data);
$(target).removeClass("panel-loading");
$(target).find(".panel-loader").remove();
});
}, targetTimeLoop);
}
});
}
};

var handlePanelRefresh = function (targetPanel) {
var targetUrl = $(targetPanel).attr("data-load-url");
var targetBody = $(targetPanel).find(".panel-body");
var target = $(this).closest(".panel");
var spinnerHtml = "<div class=\"panel-loader\"><span class=\"spinner-small\"></span></div>";
$(target).addClass("panel-loading");
$(targetBody).prepend(spinnerHtml);
$.ajax({ url: targetUrl, cache: false }).done(function (data) {
$(targetBody).html(data);
$(target).removeClass("panel-loading");
$(target).find(".panel-loader").remove();
});
};
Hi Hans,

Thank you for your suggestion. We will include it in next feature updates.

Best Regards,
Sean.
Hi, do you have tutorial how to use this in Meteor js ? thank you
Hi Pinegrow,

We have no tutorial in implement the Color Admin into Meteor JS. Color Admin is build with pure HTML with JQuery and CSS. If Meteor JS is support with the jQuery, there shouldn't have problem to implement this into Meteor JS.

Best Regards,
Sean.
iPowered PURCHASED
First I need to give credit where credit is due...

I purchased your template a couple months ago and was immediately impressed with it. Over the past couple of months I have explored many the features you packed into it (we use the AJAX version) and have customized them to fit my needs. The deeper I dig into the code, the more impressed I get. You have created an excellent piece of software...thank you for that!

Now onto business...

As I mentioned, we are using the AJAX version of Color Admin. I have a question about having a menu option in the sidebar show as selected when a user visits the corresponding page by clicking a link on a page instead of the link in the menu. Hopefully the following example will add some clarity to my question:

For simplicity, assume the sidebar has a simple menu structure with just one Tier 1 menu option (MAIN), and that option has three Tier 2 sub-menu options under it (Overview, Contact Info, Preferences), as shown below:

HOME
--> Overview
--> Contact Info
--> Preferences

Assume the "Preferences" menu option links to "#ajax/preferences/index.html" When a user clicks on the Preferences menu option, the correct page is loaded and the menu highlights "Preferences" to show that was the menu option selected. That works like a charm and I have no issues with that.

Here is where the problem comes in...

On the website's home page (/index.aspx) I summarize a customer's Preferences and include a link on the page they can click to modify them if they want. The link points to "#ajax/preferences/index.html", which is the exact same link that is in the sidebar for the Preferences menu option. When the user clicks the link on the page, the Preferences page loads correctly via AJAX; however, the menu does expand the options under HOME, and "Preferences" is not shown as being selected. Instead, no changes to the menu occur.

What I need to have happen when the user clicks the link on the page is this: the AJAX page loads (as it currently does), the HOME menu expands to show its 3 sub-menu items, and the "Preferences" sub-menu item shows as being selected.

I'm guessing there's there a way I can do this, but I don't know how. Any help would be greatly appreciated.

Thank you,

Tom
iPowered PURCHASED
I was able to figure out how to "activate" the menu items as needed using jQuery as follows:

<script>
$('#nav-menu ul, #nav-menu li').removeClass('active');
$('#home-menu').addClass('active');
$('#home-preferences').addClass('active');
</script>

The above code does the following:

1. First it removes the "active" class from all UL and IL elements in my Sidebar menu (ID="nav-menu").
2. Then it adds the "active" class to the Home menu (ID="home-menu") to expand the menu and show its 3 sub-menu options.
3. Finally it adds the "active" class to the Preferences sub menu (ID="home-preferences") so it is highlighted in the menu.

There may be a more efficient method of doing this, but the above works flawlessly.

I hope this is of benefit to anybody that needs help with this.

Best Regards,

Tom
Hi Tom,

Thank you for your comment and feedback. We have created a solution for you.
You can replace the following function inside apps.js and apps.min.js.

FUNCTION NAME: handleHashChange
CODE:
var handleHashChange = function() {
$(window).hashchange(function() {
if (window.location.hash) {
if ($('.sidebar [data-toggle=ajax][href="'+ window.location.hash +'"]').length !== 0) {
$('.sidebar [data-toggle=ajax][href="'+ window.location.hash +'"]').trigger('click');
}
handleLoadPage(window.location.hash);
}
});
};

Best Regards,
Sean.
iPowered PURCHASED
Thank you Sean...I really appreciate it!
Good morning.
How do I order the first column in descending order, in TableManager?
Hi Crisaf,

To order the first column in descending order, you need to use the following JS configuration
$('#data-table').DataTable({
"order": [[ 0, "desc" ]]
});

Best Regards,
Sean.
I had already done this and it didn't work. The error message that appears is the following:
DataTables warning: table id=data=table - Cannot reinitialise DataTabe. For more information about this error, please see http://datatables.net/tn/3

My code is:
$(document).ready(function () {
App.init();
TableManageTableTools.init();

$('#data-table').DataTable({
"order": [[0, "desc"]]
});

});
Hi Crisaf,

You need to put the table option inside the function of TableManageTableTools

var handleDataTableTools = function() {
"use strict";

if ($('#data-table').length !== 0) {
$('#data-table').DataTable({
"order": [[0, "desc"]],
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "assets/plugins/DataTables/swf/copy_csv_xls_pdf.swf"
}
});
}
};

Best Regards,
Sean.
Hi, i have purchased your template. very impressive i am very new to web development so takes me awhile to understand.

my question to you guys is how do i populate data from an xml file into dashboard table? whats the best method? thanks in advance
Hi Gawai,

Thank you for your comment and feedback. Basically we are using jQuery to retrieve the data from an xml file and format the data to display into the dashboard table. You may refer to the jQuery API function (parseXml)
http://api.jquery.com/jquery.parsexml/

Best Regards,
Sean.
iPowered PURCHASED
*****************
DISCLAIMER
I want to preface this post by saying that I am not affiliated with Sean (the developer) in any way, and I have never had any communication with him other than a few comments I posted on this board.
*****************

In reviewing prior posts to this board for an answer to a question, I came across a comment Webmakerpros made 3 weeks ago. They stated that Sean is a consummate professional who does great work, and goes above and beyond in his support for his template by providing fixes and customized improvements quickly.

I completely agree with this comment.

My company has built dozens of company-owned websites over the years (both completely in-house and with the help of outside developers), and Sean's template would have cost us more than $5,000 to have it developed from scratch. We recently started using templates as starting points for our sites, and Color Admin is much better than some templates we have purchased for $500, $1,000 and more. So at $18 Color Admin is a complete bargain.

Sean has created an outstanding piece of code, and he goes above and beyond in his support of it. And since Sean doesn't receive any additional compensation for his quick fixes and new features, it's obvious he's doing it because he cares about his customers.

If you are a developer or have used other templates, you will immediately appreciate the quality of Sean's work and support. If you are new to the game, you will quickly learn to appreciate Sean's excellent work (trust me).

Webmasterpros suggested that Color Admin customers consider giving Sean an additional donation for his hard work if you like his template...I echo that sentiment completely. What better way to show your appreciation than donating a few bucks to the guy who did the work?

Anyway, those are just my thoughts...take em or leave em. :-)
Hi Tom,

Thank you for your comment and feedback. We are really glad to hear that. We are trying to help all our customer / user to solve their problem no matter they have purchase the template or not. Normally we didn't need the donation from other people. If you like our works, leave a positive comment here will do. : )

Once again. Thank you for your positive comment.

Best Regards,
Sean.
iPowered PURCHASED
Hi Sean,

I have an issue with the collapsed Sidebar in Color Admin that I'm hoping you can help with.

ISSUE SCREENSHOT
Here is a link to a screenshot of the issue: http://bit.ly/1xlZPgT

ISSUE SUMMARY
The Sidebar for our dashboard is three levels deep. In the expanded view, everything works ok. However, when in the collapsed view we are having issues accessing some of the Level 3 menus because they are not adjacent to the Level 2 menu item that causes the Level 3 menu to display. The Level 3 menus all align to the top of the Level 2 menu, so if a menu item on the bottom of the Level 2 menu opens a Level 3 sub-menu, the Level 3 menu cannot be accessed.

ISSUE DETAILS
As you can see in the above-referenced screenshot:

1. Hovering on the dashboard icon in Level 1 of our Sidebar Menu opens a Level 2 sub-menu that has 6 menu items: Dashboard Summary, Products & Services, Special Offers, Message Center, Update Center, Support Center

2. Hovering on "Support Center" in the Level 2 menu opens a Level 3 sub-menu with 4 items: Overview, FAQ, Help Desk, LiveChat

3. We cannot access any of the Level 3 menu items because the Level 3 menu is not adjacent to "Support Center" anyplace. As soon as we move the cursor off "Support Center" the Level 3 menu disappears.

Do you know how we can have the Level 3 menu display so it is adjacent to the Level 2 menu item that opened it?

Thank you in advance for your help.

Best Regards,

Tom
Hi Tom,

Thank you for your feedback and report. We already fixed this while developing the Color Admin v1.7

Here is the solution for the Minified Sidebar Menu Level
<style type="text/css">
.page-sidebar-minified .sidebar .nav li.has-sub {
position: relative;
}
.page-sidebar-minified .sidebar .nav > li.has-sub li.has-sub .sub-menu {
margin-top: -10px;
}
</style>

Best Regards,
Sean.
iPowered PURCHASED
Thanks again Sean...it works like a charm!
iPowered PURCHASED
I noticed that the Expand/Collapse icon in the Panel Heading doesn't toggle between "+" and "-" (it stays "-"). It's not a functional issue, but it was bugging me so I added some code to to make it toggle.

I copied the existing function and pasted it below, and I added my code between comment lines so you can quickly see what I did. Feel free to add it to your code if you want. :-)

Cheers,

Tom

NOTE: The original code shown below is in the "/assets/js/apps.js" and "/assets/js/apps.min.js" files in both the HTML and AJAX versions of Color Admin.

$('[data-click=panel-collapse]').click(function(e) {
e.preventDefault();
$(this).closest('.panel').find('.panel-body').slideToggle();
// --- START: Code I added to toggle the Panel Collapse icon between "+" and "-" ---
var newclass = $('i', this).attr('class') == 'fa fa-minus' ? 'fa fa-plus' : 'fa fa-minus';
$('i', this).attr('class', newclass);
// --- END: Code I added ---
});
Hi Tom,

Thank you for your suggestion and enhancement code. We definitely will include it in next future release.

Best Regards,
Sean.
It can be used in software as se service with a simple lisense?
Hi Fblaccerda,

You may contact Wrapbootstrap admin in order to understand more about the licensing issues.
https://wrapbootstrap.com/support

Thank you.

Best Regards,
Sean.
Artem24 PURCHASED
Good day! On the Login.html page "login-header" class disappears in IE8 and IE9. How to fix it?
Hi Artem24,

Thank you for your comment and report. We are really appreciate it. Here is the solution for the login page header issues.

<style type="text/css">
.login {
position: relative;
}
</style>

Best Regards,
Sean.
Artem24 PURCHASED
Thank you, seanngu! That works fine!
I have one more question... How to hide sidebar when the max width of the window is 983px?
Hi Artem24,

You can customise the css in order to hide the sidebar from the certain window size.

<style type="text/css">
@media (max-width: 983px) {
.sidebar,
.sidebar-bg {
display: none !important;
}
}
</style>

Best Regards,
Sean.
betazed PURCHASED
Quick queston we are using the form wizard and have checked our code against your example more times than we care to count. It will not go past the first tab and there are no errors in the console. We can send a link through PM as we are at liberty to expose the URL publicly.

Thanks
betazed PURCHASED
WOOPS Found it gotta be careful with " andd ' :D
Great product and proving itself! Great product! Works great in Rails 4.x
Hi Betazed,

Thanks for your comment. We are happy to hear that you solve the problem.

Best Regards,
Sean.
Congratulations on creating such a great product! Just had two question regarding Datatables -
1. How to integrate 'dropdown select' plugin in table(because by default the 'dropdown select' style is that of browser). like that in 'show # entries'.
2. How to put filters just beside the search bar. because as of now the maximum that i have been able to achieve by installing external 'datatable column plugin' is to put filters either on header or on footer. I just want to put filters between 'show # entries' and 'search bar'.
Thanks!
Hi Xpressmart,

Thank you for your comment. Regarding your question,

1. You can execute the rendering script for dropdown select after the dataTable is rendered. Here is some example for execute the dropdown select plugins
<script>
$('#example').dataTable( {
"initComplete": function(settings, json) {
$('.selectpicker').selectpicker('render');
}
});
</script>

2. You can refer to the dataTable documentation how the DOM positioning
https://datatables.net/examples/basic_init/dom.html
Here is the example for the DOM positioning that put the filters beside the search bar.

<script>
$('#data-table').DataTable({
dom: 'TfRC<"clear">lrtip',
});
</script>

Best Regards,
Sean.
Botan PURCHASED
Hello,

first of all I'd like to thank you for this awesome theme!

But now to my proplem :
On my website, I load pages via $.post to the DIV #content. Everything works as expected. But the Ajax result contains a panel and I wanted to make it draggable. For a test i just put <script>handleDraggablePanel();</script> to the result of that ajax request. And it worked. But!. I found out that if I drag and drop that panel the localStorage gets broken. It only contains "[[]]". In result: On reloading the website, it'll stuck on loading screen. Javascript TypeError: e is undefined.

Well it's not required to have the panle draggable but I'd like to know If i miss something or If there is a better way to handle the panels.

(I'm sorry for my bad english though)
Botan aka Holger
Hi Botan,

Thanks for your comment and report. We will update the error handling for panel draggable function. For each panel localstorage, you need an unique ID like the following code:
<div class="panel panel-inverse" data-sortable-id="morris-chart-1">
--- panel content here ---
</div>
You may try to clear the local storage and update with the unique data sortable id.

Thank you.

Best Regards,
Sean.
Botan PURCHASED
Yes, I found a solution wich works for me. Even with setting data-sortable-id the site gots broken. Because I'm not leaving the main url at any point. All content is loaded via Ajax Post. So I modified handleLocalStorage() and handleSavePanelPosition() to simulate a page change. I just put after the declaration of targetPage the following two lines :
if (typeof Page !== 'undefined')
if(Page != "") targetPage = Page;

And to get rid of the broken site. I added a new if clause to handleLocalStorage() in $('.panel').parent('[class*="col-"]').each(function() { after var targetColumn = $(this); :
if (storageData != null) {
$.each(storageData, function(index, data) {.....

I'm not very good at javascript and I guess there may be some better solutions.

Regards,
Botan
Hi Botan,

Thanks for your report and solution. We will update the solution in next version.

Best Regards,
Sean.
I think a nice feature will be "language selector". Anyways thanks for this awesome template
Hi EctoplasMJ,

Thank you for your commet and suggestion. We are really appreciate it. We will include it in next future update as well.

Best Regards,
Sean.
evinco PURCHASED
Does this template have an MVC version?
Hi Evinco,

MVC Version is still not available yet. For your information, currently we only have Ajax & HTML version.

Best Regards,
Sean.
Hi,

When I go to the standard "login.html" I get the following error:

"Pace is not defined apps.js:723:4".

What can be wrong?

BR
Mikael W
Hi Milkosten,

Thank you for your report. We are really appreciate it. This error occur because we didn't include the pace loading plugins file. We have fixed it and will release with the new version v1.7 soon. For your quick fix, you may include this plugins files in order to solve the errors.
<script src="assets/plugins/pace/pace.min.js"></script>

Best Regards,
Sean.
Hello, how is working this ? http://seantheme.com/color-admin-v1.7/admin/html/ui_language_bar_icon.html

I tried to change but nothing happens http://prntscr.com/6ti76k
Hi EctoplasMJ,

Thank you for your comment and feedback. Language Bar that show on our template is only for demo purpose. There have no backend trigger event / action yet. You need to write your own backend code in order to change your language / do something.

Best Regards,
Sean.
Hi, I want to buy your theme, but I was wondering can i have the RTL version of the theme?
Hi Sepinali,

Sorry to say that RTL version is not available yet. You might need to change the css text alignment if you use our template.

Thank you.

Best Regards,
Sean.
Sparksos PURCHASED
Hi !
When can we expect these :
FRONT END - blog
FRONT END - corporate
FRONT END - e-commerce
FRONT END - forum

??
Hi Sparksos,

Thank your for your comment and feedback. Here is our initial plan for the future updates.

FRONT END - blog & forum (V1.8)
FRONT END - corporate (V1.9)
FRONT END - e-commerce (V2.0)

Best Regards,
Sean.
Hi Sean, first of all I must say I really love your work.

Secondly I'm facing a problem. I use tables on my dashboard page... I have noticed that it is possibly to drag and drop tables and graphics.... The problem is that (at any time) they messes up which each other without me using this drag and drop thing.

How can I solve this? thank you
Hi Limon,

Thank you for your comment and feedback. Can you send us an email with some attached screenshot about the problem that you are facing right now? Support email is provided from the documentation page.

Best Regards,
Sean.

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

$30
5878Purchases

Licenses: Details »

Single application $30
Version:3.0
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: admin template, blog, bootstrap, css3, e commerce, forum, html5, jquery, one page parallax, responsive
Item#:WB0N89JMK
Released:3 years ago
Updated:4 months ago
Sold exclusively on WrapBootstrap
seanngu

seanngu

Signed up 4 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: