1401 comments

It doesn't appear that when the sidebar is in a minified state that it's position is fixed when class page-sidebar-fixed is applied to the page-container. If the sidebar is expanded the position is fixed.
I added to the style.css file to resolve the issue.

.page-sidebar-fixed.page-sidebar-minified .sidebar {
position: fixed;
}
Hi Collinszac10,

Thanks for your feedback. We will include this in the next Version 1.3.0. : )

Best Regards,
Sean.
Really great theme! A user profile page, edit settings page and maybe read and compose email pages would be make it even better.
Hi mattbeedle,

Thank you for your feedback. We will put your suggestion on our todo list.

Best Regards,
Sean.
rmanke PURCHASED
Is there a reason the side menu indicator triangle (arrow) is not pointing right when it is collapsed and pointing down when it is opened?

Just curious if there was a reason it doesn't work this way.
Hi rmanke,

We are using the default caret from bootstrap (pointing down) is to provide the flexibility for the developer who use our template to choose their own way to present the collpased menu for the sidebar. For ex. some of the developer are using the caret to pointing right as default.

Best Regards,
Sean.
When i am using the table element with the filter and sorting, the sorting function by clicking on the table header is not working when it get minified to mobile or ipad size. can take a look into it. really like the rest of the design.
Hi Kazuto123,

We have tested with ipad Mini, ipad Air, Android & Iphone, the table sorting is functioning. Can you provide us the detail of your tested mobile phone brand name or send an email with the screenshot of the problem that you have occur. So that we can assist you to solve the problem quickly.

Best Regards,
Sean.
Thanks for the theme! Love it! Really looking forward to Tree View!
Hi Tigramaan,

Thank you for your kind word. : ) We will put more afford to create more function & design for our theme.
Stay tuned.

Best Regards,
Sean.
Hello Sean,

do you plan to release less supported version of your template? I really love it. It looks awesome but I am little bit terrified of just css version. Less is much more comfortable for me.

Thanks, Marko
Hi Maekoboss,

We are preparing the less supported version. Will release it once we have done. Stay Tuned. : )

Best Regards,
Sean.
hi. This admin can work well on IE8 right?
Hi Yumeizhang,

You are right. Color Admin is working well on IE8.

Best Regards,
Sean.
Hello Sean ... purchased this 2 days ago .. love the simplicity of this theme.

Have a question though, I noticed on the iPhone (safari) in mobile view, the right/left sidebars once opened do not close, leaving the user trapped with a sidebar overbearing the main content. I am speaking of the page template with both left and right sidebars (http://seantheme.com/color-admin-v1.3/page_with_two_sidebar.html).

Also, when sidebars are set to default, they do not move with the rest of the content in mobile mode on an iPhone.

Can you take a look at this for us?
Hi Pagenet,

We are fixing the iPhone safari browser now. By the way, the purpose of sidebar overlay the main content is because the sidebar is only for the user to navigate it and go to the target pages. There is no point to move the rest of the content in mobile mode because user can't see the content with both sidebar and content showed in one screen. We will update you the changes need to do once we have fix the iphone safari bugs.

Thank you.

Best Regards,
Sean.
Hi Sean ... I think you misunderstood me. The point is, if set to default (not fixed) there is no way to scroll either sidebar when they are open if they are longer than the page. I hope that makes more sense.

Thanks for looking into this.
Hi Pagenet,

Sorry we have misunderstood your question. We have found out the bug on the default sidebar for mobile view. We will get back to you very soon. Here is the solution for page two sidebar on iphone safari browser.

Add the following code into apps.js
for
FUNCTION: handleMobileSidebarToggle
LINE: 71
BEFORE: $(document).click(function(e) { }

document.addEventListener('touchstart', function(e) {
$(document).trigger('click');
}, false);

Best Regards,
Sean.
Hi Pagenet,

For a quick fix for the default sidebar for mobile view. Add the following css styling on style-responsive.css

@media (max-width: 767px) {
.sidebar {
position: absolute;
z-index: 1030;
}
.sidebar-bg {
z-index: 1020;
}
.page-sidebar-toggled .sidebar-bg {
position: fixed;
background: #2d353c;
left: 0;
animation: sidebarSlideInLeft .2s;
-webkit-animation: sidebarSlideInLeft .2s;
}
}

We will include all the fixes in next future update (v1.4).
Thank you for your feedback. We really appreciate it.

Best Regards,
Sean.
Hi Pagenet,

We have found the best way to solve the issues. Please remove the code that we have mention at the previous comment. Here is the code that you need to modify for /assets/js/apps.js

LINE 73:
$('.sidebar').click(function(e) {
TO
$('.sidebar').on('click touchstart',function(e) {

LINE 81
$(document).click(function(e) {
TO
$(document).on('click touchstart', function(e) {

Thank you.

Best Regards,
Sean.
That seemed to fix the problem! Thanks Sean!
As for the other issue ... when sidebars are set to default, how can they scroll and access the rest of the sidebars??? They do not appear to be able to scroll at all.
Hi Pagenet,

Can you send us an email with some screenshot or explain furthermore about your issues on sidebar? Because we have tested it and working find on our site.

Best Regards,
Sean.
Hello Sean ... there is no way to show a screenshot of this. To replicate the problem, open the following URL on an iPhone: http://seantheme.com/color-admin-v1.3/page_with_two_sidebar.html.

Then set HEADER and SIDEBAR settings from FIXED to DEFAULT.

Then open right or left sidebar and you will see that you are trapped .. you cannot scroll either sidebar to see all menu options or all stats.
Hi Pagenet,

Thank you for your feedback, we have solved this problem. Please check it out ya.

p.s. Basically the page sidebar setting for the theme panel is just for demo purpose. Some android mobile browser wouldn't render well the positioning css if you change the css from position fixed to absolute.

Best Regards,
Sean.
Thank you for fixing this problem. When will you release the fix for this? Next version? When will that be?

Thanks again.
Hi Pagenet,

We will release all the fixes with version 1.4 by next week.

Thank you.

Best Regards,
Sean.
Hi, we noticed a strange effect on iPad: when you select a link in the sidebar one element on the same sidebar flash for a moment like in a :hover state. It's the 6th element on top of what we select (including submenus items).

I recorded this video:
https://www.dropbox.com/sh/aamwqyo4hctoc4k/AABFPDp-RN-O0Tnq5zxquiD0a?dl=0

Noticed this because on our application with Color Admin theme, this problem shows for the element immediately on top of what we select: it flashes for a moment (like in :hover state) and then the correct element gets selected. Quite annoying.
Any explanation?
Thanks.
Hi Physiocoder,

Base on your video, we have tested with the following device and browser
- iPad mini (with no retina display)
- iPad with retina Display
- iPad Version 7.1.2
- Browser: Safari
- page (Dashboard v2).

The sidebar is working find on our side. Can you provide more testing detail on your side to us? E.g what browser you use, what OS on your iPad and etc. So that we can assist you to solve the problem. Thank you.

Best Regards,
Sean.
It's an iPad retina (3rd generation) with iOS 7.1.2. The browser is Safari mobile.
It's kind of a random behaviour since I recorded a second video to show the browser bar and with a better quality and this time this glitch is flashing the element immediately above the one clicked (it's the same behaviour that I noticed in the web app where we used this theme) :-/

https://www.dropbox.com/s/sx7tzyjztu7qxq3/IMG_5707.MOV?dl=0

Let me know if there are some other details I can provide to solve this.
By the way this is an otherwise beautiful and well crafted theme. Kudos.

Roberto.
An update.
If I click on "Remove this frame" and use the theme from seantheme.com the problem is gone. So It can be an interaction between some libraries from wrapbootstrap.com and your theme.
Since this problems shows also on my app it could be of great help to identify which library is the culprit.

Roberto.
Hi Roberto,

After we have check the issues, the problem that shows on your video is because of the padding top css issues on the parent site that using iframe.
E.g wrapbootstrap are using a page that contain a FIXED top navigation bar with an iframe to link to the demo the site. They are applying the css padding-top 45px in order to have some space on top navigation bar. This cause the ipad touch event have a gap of 45px when you click on the sidebar navigation. Thats why the sidebar navigation will have some hover state for the previous navigation.

We are still finding the solution to solve this issues. Once we solve it, we will show the solution here.

Thank you.

Best Regards,
Sean.
Hi Roberto,

An update. The issues also caused by the inconsistent height for wrapbootstrap iframe.
Wrapbootstrap are using jQuery to detect the windows height when the website page is loaded and set the iframe height. This will cause the fixed sidebar can't load properly because the parent container which is iframe is not consistent when document is ready. To solve this problem, please prevent from using fixed sidebar when you are using an iframe to load the website page or you can prevent from using iframe to load the website page.

Thank you.

Best Regards,
Sean.
Hi Sean,
thanks for taking the time to investigate.
Searched for padding-top: 45px on wrapbootstrap navbar with remote debugging in safari, but couldn't find it.
I checked the classes 'topbar', 'fill' and 'container' with no success.

The issue shows also on my webapp, where I don't use iFrame at all, so I don't think it is related.
Of course there are fixed elements like top and side navigation bar, but they are from Color Admin...

What I noticed with further investigation is that the problem worsen if I go to portrait from landscape: in this case the :hover-like effect shows under, instead of above. Beside this it seems that if I tap on upper part of item the flash is on the item immediately under, while if I tap on the lower part the flash is on the item two places under... Really weird, gives the effect of a pseudo-random bug...

Here is the new video with the theme applied to my app without iFrames:

https://www.dropbox.com/s/lscop0szbh54qq4/IMG_5717.MOV?dl=0

It seems related to the way the events are bubbling through the DOM, as if target element get the "touchstart" event and some other element gets the "touchend" event, like what I intentionally do in this other video (I swear it's the last! :-) ) :

https://www.dropbox.com/s/rnnkdcl9b8l40li/IMG_5727.MOV?dl=0

Roberto.
Hi Roberto,

We have watched your uploaded video and we are tested again with our iPad Device. We have found out the issues is from the slimscroll plugins. But the problem only occur when inside an iframe. When we visit the full website, the sidebar click action is work smoothly on our side. If the problem still exists, you may try to remove the scrollbar data option and try and see whether the problem still exists or not.
<div data-scrollbar="true" data-height="100%">
--- sidebar navigation ---
</div>

You also can send us an email via https://wrapbootstrap.com/user/seanngu. So that we can have a quick conversation in order to solve the problem that you have.

Thank you.

Best Regards,
Sean.
Howdy,

Sweet theme, really looking forward to buying it, however, tests on iPhone 5s Safari are causing issues.
The design presents in the correct mobile view, pressing the 3 lines in the top to show the menu throws out the menu from the left... all fine - but when I press any part of the menu, it just disappears... can't press any links or drill down sub links either... any ideas?

I did read some of the comments further up the thread, I'm using your online demo, and unless it's not been updated those fixes haven't solved the issue. Cheers.

A
Same goes actually with the avatar menus too...
interestingly the theme / customisation cog on the right behaves as expected...
Hi Howdy,

Thanks for your feedback. We are now fixing the issues. We will update you the solution after we have fixed it.

Thank you.

Best Regards,
Sean.
Hi Howdy,

We have fixed the mobile view sidebar issues. We will include this at the next version of update. For your quick fix, here is the code that you need to modify for /assets/js/apps.js

LINE 73:
$('.sidebar').click(function(e) {
TO
$('.sidebar').on('click touchstart',function(e) {

LINE 81
$(document).click(function(e) {
TO
$(document).on('click touchstart', function(e) {

Thank you.

Best Regards,
Sean.
Thanks Sean,

I have implemented that fix, and that now responds in a similar way to desktop.
I would say though the scroll behaviour is a little strange, it takes a a good swipe to get the the nav moving and when it does it speeds on and jumps to the bottom of the list fairly quickly.

Is there some tweaning/animation/quantitive script going on there that is causing that - I can see that would be nice on desktop but itsmakes it hard on smaller mobile devices to get the scroll accuracy.

Cheers!

Ash
Hi Howdy,

The scrollbar for this theme is using the plugins from slimScroll which you can find it from
http://rocha.la/jQuery-slimScroll

You can set the scrolling speed by using the options wheelStep & touchScrollStep. For mobile view. You can make some changes on
FUNCTION: generateSlimScroll()
FILES: /assets/js/apps.js

var generateSlimScroll = function(element) {
var dataHeight = $(element).attr('data-height');
dataHeight = (!dataHeight) ? $(element).height() : dataHeight;
$(element).slimScroll({height: dataHeight, alwaysVisible: true});
};

to

var generateSlimScroll = function(element) {
var dataHeight = $(element).attr('data-height');
dataHeight = (!dataHeight) ? $(element).height() : dataHeight;

var scrollBarOption = {
height: dataHeight,
alwaysVisible: true
};
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
scrollBarOption.wheelStep = 1;
scrollBarOption.touchScrollStep = 100;
}
$(element).slimScroll(scrollBarOption);
};

Thank you.

Best Regards,
Sean.
Hi

is it possible to have the side bar menu on top?

Thanks
Hi Phlcastro,

Thanks for your feedback. We are planning to add the horizontal navigation bar on top. Stay tuned. : )

Best Regards,
Sean.
Hello ... still loving this template, but noticed another snafu.

When pinch-zooming on tablet or phone, the top header and sidebars become dismantled from the rest of the page and zoom (over) the main content. Looks horrible. It seems each container is independently zooming separately from the other containers. This happens when header and sidebars are either in FIXED or DEFAULT modes.

Is there a way to make pinch-zoom work as if the entire page was cohesively one container? Please fix in your next update if possible.
Hi Pagenet,

Thank you for your feedback, we will include the meta tag to prevent the zooming for tablet or phone in next update.

Best Regards,
Sean.
Sean ... thank you. I had thought of preventing zooming, and as a bandaid, that helps. However, it would be preferable to allow zooming (as some people still use very small phones or just have bad eyes) ... just keeping the sidebar, header and main containers cohesive as a single page, so they don't split apart when zoomed.
Hi Pagenet,

Thank you for your feedback. Keeping the sidebar, header and main containers cohesive as a single page is only able to apply with the page without fixed sidebar and header. This is because the css styling is not able to configure while you are zooming with your tablet or phone. This is why we are stick to the solution by preventing zooming in smart phone & tablet.

Thank you.

Best Regards,
Sean.
Hi Sean ...

That would be fine as I am using the DEFAULT sidebar and header. Mobile users should be able to zoom as intended. As a mobile user, I can't stand it when a website won't let me zoom in the way I should be able to. Many of my users will feel the same way.

Is there some code or way we can use to place the DEFAULT sidebar and header in a single page/containter so that we can zoom properly without the page splitting apart?
Hi Pagenet,

Set the fixed sidebar & header to without fixed will solve your problem. Please check our documentation file how to set sidebar & header.

Best Regards,
Sean.
Hello Sean ... I think I am already using WITHOUT FIXED (DEFAULT) on both header and sidebar ... still no joy .. the page still gets ripped apart when zooming on an iPhone or iPad.

Page Container class is set to "fade page-with-two-sidebar"
Header class is set to "header navbar navbar-inverse"
Sidebar class is set to "sidebar sidebar-grid"
Sidebar-right is set to "sidebar sidebar-right"

Did I do something wrong?
Hi Pagenet,

Can you send us an email via
https://wrapbootstrap.com/user/seanngu
in order for us to solve your question quickly.

Best Regards,
Sean.
yangkun7 PURCHASED
Thank you for providing awesome theme and introducing useful plugins.
Clients liked to use our solution.

I hope you'll upgrade "Color Admin" continuously.
I sincerely wish your health.

* Sorry about clumsy English.
Hi Yangkun7,

Thank you for your kind word. We will try our best to make our template more and more complete. Stay tuned : ).

Best Regards,
Sean.
Not sure if I missed it ... How do you add tooltips and/or popovers? I couldn't find it in the documentation.
Hi Jason,

You can find it from /assets/js/apps.js

var handelTooltipPopoverActivation = function() {
"use strict";
$('[data-toggle=tooltip]').tooltip();
$('[data-toggle=popover]').popover();
};

Best Regards,
Sean.
Thanks, but found a much easier way to use tooltips ... Woks with most HTML elements in bootstrap.

JUST ADD ATTRIBUTES
data-toggle="tooltip" title="Example tooltip"

FOR EXAMPLE
<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a>

ALWAYS TRY TO KEEP IT IN THE HTML DOM IF POSSIBLE
Hi Jason,

We do keep the default HTML DOM required by bootstrap to activate the tooltip / popover.

The function of handelTooltipPopoverActivation() is used to ACTIVATE the HTML DOM that have an attribute (data-toggle="tooltip") or (data-toggle="popover").

This is because every bootstrap tooltip or popover is not loaded when document is ready. They are needed to call the .tooltip() & .popover() function in order to use it.

You may remove the function handelTooltipPopoverActivation() in apps.js. You will realize the tooltip or popover will be malfunctioning when page is loaded until you call the .tooltip() or .popover() function.

Best Regards,
Sean.
Sorry, I am not a jquery expert. How can we use tooltip / popover as in the following example without problems?
<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a>

It seems to work fine now, but I have not tested fully.
I love your theme, what a great job.. I am looking for 2 specific features, a tree view and nestable lists..

I was unable to find these in the demo, any plans of adding them in a future release??

thx..
Hi KPR,

We are glad that you love our theme. Yes, tree view and nestable lists is in our to do list. Stay Tuned.

Best Regards,
Sean.
Hi,

I am trying to integrate the color admin theme to my yaemon project using the angular-fullstack generator. I am trying to use angular_version of the theme.

Can anybody guide me on how to integrate this?

thanks
Sanjeev
Hi Seanngu,

Can you help me how to integrate this theme in my existing yeomon project? teh scaffolding is based on angular_fullstack
Hi sanjeevghimire,

We have replied your email. Do check it out ya.

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
5868Purchases

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: