orangehilldev does not currently provide support for this item.

65 comments found.

Will you be adding any more UI components in the next version? The theme is awesome but missing some common components like file uploader, gallery, etc. I’m going to wait until the new version comes out before I purchase.

New version is out, please check it out.

Simply awesome ! The best theme I have ever downloaded. Everything is easy and beautiful. I’m very impressed.


1. Do is possible configure the Main Navigation Menu in horizontal mode?



Hi and thank you for purchasing. Creating a horizontal main nav is not a simple task. Not so much because of the coding time needed, but more due to needing a completely new UI design solution. We might consider it in a future version if the demand is big enough.

Hi everybody, Version 1.1 is out.

Changelog: New: Login Page New: Image Gallery Uploader Page (with drag and drop support) New: Calendar New: Autotab Input Fields New: Form Validation New: File Input Field and Button Enhancement: Enhancement: Enhancement: Update: jQuery 2.0.3 (older browsers like IE 8 fall back to 1.10.2) Update: Fixed: Chrome page rendering bug when using web fonts / icons on some windows systems Fixed: Graphs not redrawing when expanding / retracting sidebar Fixed: Minor tabs stacking problem on mobile devices Fixed: Tooltip line height when there is more than one row of text

Changelog is also available as a neatly formatted Proton UI page here:

Ok, the new version is perfect! How can I change the black and white logo on small views?

The icon element can be found in the user nav part of the html, its class is “icon-proton-logo”. You can change the Proton icon in a few ways. One would be using some other font icon available with Proton, you can see all of them here: To do this, if you wanted to use “icon-rocket” for example, you would only replace the “icon-proton-logo” class with “icon-rocket” class. If you wanted to use your own icon, you would first need to create a new webfont containing that icon and then match it to a new CSS class you would use to replace the “icon-proton-logo” class. There are many good tutorials on how to create font icons from SVG files. The third option would be to just remove the font icon element <i class="icon-proton-logo" /> and use an img element there instead. This might require some CSS tweaking to get the position right, but the base css would look like this:
position: relative; display: table-cell; height: 30px; width: 30px; text-align: center; vertical-align: middle; You could then use top and left values to tweak the position.

I’m creating font icon from svg file…thank you!

I would buy this if there was more flexibility in the dashboard grid specifically around mixing size of columns and boxes – to have a 5×2 grid would not work as we would want a calendar included for example and it would be too small using this layout but if we could make the calendar 2×2 then it would be fine. Likewise, we would need a 1×4 for listing information and so on for different data types – add that ability and this will sell a lot more IMO.

While it is possible to resize the widgets to any size you want ( see ) all widgets need to have the same size. The only reason for this is to maintain the responsiveness of the dashboard. So a 6×2 widget grid on a large screen becomes 4×3 grid on a smaller screen or folds to a single column on mobile screen while preserving the same order. It is definitely possible to easily customize the dashboard to use the same html layout found for example on You can create any grid combination you want that way.

Hello, The theme looks very nice and modern and it is what we need. I just have one question: If we would like to remove the extended side bar completely, but still have the logo in the main wrapper what would you suggest? How would be easiest to do that?

Hi, I’m glad you like the theme. What I would suggest in your case is deleting the sidebar from DOM, then making the .wrapper element always have the .extended class. Also, you may want to modify the .wrapper left “CSS” property to be “left: 80px;” since there will be more space available there when you remove the sidebar.

Then you could add a absolutely positioned element containing your logo inside the .wrapper, and set the left and top values to position it in the top-left wrapper corner (you may need to set a z-index too). Then you would probably also need to move the breadcrumb nav more the right by modifying the .breadcrumb left “CSS” property to leave some space for the logo on it’s left side. Hope this helps a bit. For mobile size, you’d only need to swap the .icon-proton-logo element, explained in detail in one of the previous comments here.

A+++, Very impressive. Thanks a million

Thank you.


I have a database that contains a table and every record of this table is considered as a “Sticky Notification” I want to show every record that are created in the table to show as Sticky Notification with a close (X) and open ( ) buttons on every Sticky Notifications.

The user will login to see this information.

Is this possible using your template?

I’d say that you have all the UI elements to make this happen. Other than that – it’s just backend coding, and that’s something not included in the template out of the box.

Hello, Thanks for the reply. If I can give you the mysql DB can you do the backend coding for a fee? if this is possible please send me a message / email. Regards

Hi, sorry I missed your reply here. Can you please go to our website at and fill out the contact form there, as I can’t find a way to rich you directly.

Hello, Really good work. Are you think some new pages like invoice etc. ?

and can you replace bootstrap icons?

Hi, thanks for purchasing. Yes, new pages are being worked on, and you will receive a free update once we publish it, as all other buyers will.

We’re not planning on replacing Font Awesome vector icons anytime soon, though.

I’ve bought this template and downloaded it. When i execute login page(html) i have no problem, but when i execute other page, i see only the menu, i can’t see the content. Ex. Forms, maps.. Login page: Other Page:

I want to know how can i see the final version?

Hello, can you please provide us with the browser type and version you used to view the site? The screenshots look much like an older version of Safari which might not support JavaScript functions. Thank you.

I am using Safari 6.1 and firefox 26(last version) on Mac OS. I think browser version is not the problem. I am executing the html file from dist folder, is it the correct folder?

I see the problem. The theme was built to be used with a web server and will not function properly when opened from a local directory. For Mac OS we would recommend MAMP which is an easy to set up web development environment:

You will need to copy the Proton theme’s dist folder to web root and use by accessing http://localhost/proton (if you rename the dist folder to proton). The theme should start up when used with MAMP without any problems in all supported browsers. Thanks.

Hi, I love the theme and would like to know if there is an easy way to load information into the content area pane using ajax whilst preserving the two navigation levels, for example if you visit the documentation area on the demo can each of the items in the treeview be a separate page loaded into the content area on demand whilst keeping the main nav and the treeview in place? if so then its definitely what I’m looking for and we’ll making a purchase. Thanks

You might want to take a took at Angular JS to make the modifications you need to make that work the way you want it. Note that we do not have an Angular JS version of Proton at the moment, but have provided a proof of concept and a more detailed explanation on how you might get started with this in a reply to an earlier comment:

But it is definitely not that easy if you have no previous experience with Angular JS or similar frameworks.

Pre-sales question:

Is it possible to have the sidebar menu extend on hover, and to not have to click twice to go to menu items without sub-menu? (don’t know if this is ment to be or a bug? testing on Chrome on Windows)

I finally solved it with this, if anyone has the same problem:

$(’.touch’).on(‘mouseover’, function(event) { $(this).removeClass(‘touch’); $(this).addClass(‘no-touch’); });

Hi, sorry for the delay in reply. Yes that’s one way to deal with it. The down side is that there is no guarantee that all touch events will work properly after changing to no-touch. The touch/no-touch class is modernizr added and is still the industry standard when it comes to RWD. Since the hybrid touch/no-touch devices are gaining ground, we will (all of us web developers) have to take this in consideration in the future. All in all, your solution (to choose one over the other) is good if you’re not planing to use the touch input.

Hi, How to compile this template? I downloaded this theme, and there is three folders (app,dist,dist-minified). If i run app\index.html, it doesn’t works. Sorry, I’m newbie…

Thanks in advance!

Hi, you will need to use dist-minified or dist version if you’re not familiar with Grunt. The app folder is only meant for developers using the Grunt server to start the app. Thanks.

Hi there,

Great theme! Before purchasing, how do you add more links to the tree structure … is it standard html code or javascript and whats the maximum depth level … sub sub links?


The sidebar tree uses the jstree plugin ( ). The content of the tree is auto generated from all the html elements with “section-title” class (using the inner text of the element). The maximum depth is not limited by the plugin. The current Proton version only has the 2-level depth fully tested, but we will most likely have a page showing multi-level tree in the 1.2 update which is coming soon.


Thanks for replying back. Is it possible to make some of the tree contents a link or to trigger off ajax rather than just anchor points?

Sure, what you see is just an implementation for Proton, you can combine the actual plugin with any type of event (or link to another page). You would only need to replace the Proton tree initiation function with your own (it’s all in the sidebar.js file). Thanks

The inclusion of Jquery UI on the dashboard causes an issue with the bootstrap tooltips, making them not appearing on the dashboard


If using tooltips or a similar plugin, best practice would be to disable them for the duration of your drag event. To do this for widgets, you can alter the widgetSort function in dashboard.js to be something like:

        var isDragActive = false;
        $( ".widget-group" ).sortable({
            cancel: '.placeholder, .flip-it',
            placeholder: 'drag-placeholder',
            start: function(event, ui) {
                isDragActive = true;
            stop: function(event, ui) {
                isDragActive = false;
            tolerance: 'pointer',
            handle: ".panel-heading" 

You could then use the proton.dashboard.isDragActive object to stop tooltips (or other plugins) from showing their DOM elements until the drag is completed (which resets the proton.dashboard.isDragActive to false).

You would probably need to do something similar to the quickLaunchSort function:

        proton.dashboard.isDragActive = false;
        $( ".quick-launch-bar ul" ).sortable({
            containment: 'parent',
            tolerance: 'pointer',
            start: function(event, ui) {
                proton.dashboard.isDragActive = true;
            stop: function(event, ui) {
                proton.dashboard.isDragActive = false;


is it possible to add weather widget? and maybe an auto-complete address? check this out


Any content can be embedded in the dashboard widget element. The ones on the dashboard are just demo widgets to showcase different possibilities. You can use your own code to access a weather API you like and generate content. Or anything else you might need. The widgets can also be made larger or smaller depending on your needs.


Any plans for a 1.2 release anytime soon?

Thanks for the rocking theme.

Hi, we’re working on a new version which will contain new features, a few small fixes and a Bootstrap version update. We’re hoping it will be ready by mid February. Thanks!

cant wait! what are the new features?

We’re hoping to have the changelog and the update released soon. We’re actually just waiting for Bootstrap to release version 3.1.0 so we make that a part of the update. According to their version tracking it’s 99% ready so it’s shouldn’t be long.

Along with adding more third-party plugins, we’ve also been working on a session control plugin. It has just been released a few days ago and we’re making it a part of Proton. You can read more about it on our website: Session Timeout with Keep-alive jQuery Plugin

User menu doesn’t work in IE8 (tested on VirtualBox Win XP IE 8 )

We will check this and get back to you soon. Thank you for your patience.


We checked this and believe that the problem is that there are console.log commands in your JS. By default Proton ships with verboseBuild set to true so you can see how each of it’s JS components are built. This will however cause IE8 to fail since it doesn’t support console.log. The solution is to modify the main.js file and change:

var verboseBuild = true;
var verboseBuild = false;
We will make this option false by default for IE8 in the next update to avoid future confusion.

Also, check if you used any console.log in your JS customization if any was made. That should fix the issue.


Is it possible to add unlimited widgets on dashboard ?

Hi. If not unlimited, then a very large number of them at least :). As long as the browser can handle the amount of widgets you throw at it, you can put as many as you like since the dashboard is scrollable and responsive to allow anything from 0 to X widgets. Thanks.