orangehilldev does not currently provide support for this item.

65 comments found.

Man seriously, you made me wanna start buidling a new webapp just by checking out the demo. Really nice work. Good luck with the sales! Thought i don’t think you’ll need it

:) Thanks Zentar!

Loving the look of this. Where are you pulling the test data from ? If it live or static ?

Test data is static, though it should be fairly simple for a programmer to tap into a live data source based on a provided example code.

Great Work – any plans for an RTL version?

Hi, RTL coding is not a small task. We’d do it if there was a demand big enough.

Nice and Clean Work

Good Job, I Like It, GLWS ;)

Thank you!

I think the demo problematic

Could you explain a bit more the problem please?

There were some problems with Chrome on certain Windows system, this has been fixed with the new version.

I see a lot of these dashboards that would fit my needs and yours has finally made me ask this question… I don’t know where to begin if I was to buy this theme… do you have any links that would quickly describe what I would do with themes such as yours? Thanks.

I guess just general bootstrap knowledge… I’ve skimmed over a few examples of different dashboard code and none of them are dealing with dynamic data (ie. tables and graphs are defining values straight in the html)... I’m guessing this is a php solution? Or does bootstrap do something different?

I’m not sure if I understood your question correctly, but you may observe themes like this one as a static HTML examples that you’d use in your project either by creating server side generated dynamic pages (PHP, Python, Ruby etc.), or by using it for a Javascript based MVC project such as Angular JS, Backbone, Ember or something similar.

Awesome work!

Ps: you could create a landing page with signup form up.

We’d like to also include the landing page add-on in one of the future versions, thought it doesn’t really belong in the admin template category. Our primary focus at this time is the enrichment of the admin template features, but we will definitely also add the landing page if the demand is big enough.

Awesome template! On android it is perfect! I bought the template few hours ago, I can’t find the way to change the widget dimensions and how to use notifications. I’m not a developer, but I want to use it as an interface for my brewery control system….it’s too beautiful!!!!

Thanks! All work well now. My last problem is to find a way to capture the “DONE” click event on widgets….what is the easiest way?

Hi, you can add this piece of code to the function in dashboard.js to detect DONE click: $(document).on('click', '.proton-widget .back .toggle-widget-setup', function(event) { event.preventDefault(); var $thisWidget = $(this).parents('.proton-widget'); // your code here }); That will work for all widgets, and you can get the specific widget clicked on from the $thisWidget jQuery object if you need to manipulate it.

Perfect! Sorry for my questions, I’m still learning, but I almost finished my site now, I’m very happy. Thank You very much!!!!


Can we add more drag and drop from user interface

Can I have different sizes, like 2 col-wide, for eg I want to show a map, or a collection of pictures.

Can we have thumbnails pop up?

Do you have a map that can fit for main dashboard page

How can I save the re-arranged layout, will you post back, can you include sample

I’m assuming that all of these questions are related to the dashboard page. Adding / removing both the quicklaunch icons and the widgets is possible, it it just beyond the scope of the demo since users will decide what content should be used and we only have a small demo modal example on how this might look for quicklaunch add. You can use any technique to insert a new quicklaunch icon or widget to DOM, though you will need to rerun some dashboard functions once you new html is in place. After inserting new quicklaunch icons you should run the proton.dashboard.quickLaunchSort() function. After inserting new widgets you should run the proton.dashboard.widgetSort() function. Both of these are declared in dashboard.js file. Of course, if your custom widget uses any plugins, you need to initialise those as well after injecting new widget to the DOM. For widget sizes, yes, custom sizes are possible, please see the reply for the previous comment for more details on how to do this. Proton update due to launch by the end of this week will make this very easy to do.

You can use whatever content you need inside the widget area, maps, images, data. Widgets are two-sided so here’s a template you might use to create a custom widget:

<div class="proton-widget"> <div class="panel panel-default back"> <div class="panel-heading"> <i class="icon-cog" /> <span>WIDGET BACK TITLE</span> <div class="toggle-widget-setup"> <i class="icon-ok" /> <span>DONE</span> </div> </div> <!-- WIDGET BACK CONTENT START --> <div class="panel-body"> </div> <!-- WIDGET BACK CONTENT END --> </div> <div class="panel panel-danger front"> <div class="panel-heading"> <i class="icon-chevron-sign-down" /> <span>WIDGET FRONT TITLE</span> <i class="icon-cog toggle-widget-setup" /> </div> <!-- WIDGET FRONT CONTENT START --> <div class="panel-body"> </div> <!-- WIDGET FRONT CONTENT END --> </div> </div>

(sorry for bad code formatting in TF comments)

Given that, you can implement any lightbox plugin you need on the widget content area, giving you the desired on-click thumbnail pop up effect. Or you can use fill your widget area in the same way as we fill the panels on

One important note is that widget size must be consistent, so if you make this 400px x 300px, all the widgets should have the same size.

Saving the re-arranged layout will be added to the updated version coming by the end of this week.

The update we pushed on last Friday add the save the re-arranged layout feature. We also included an example of the larger widgets: For more detailed information please check:–-dec-6-2013


can you add the option to have the theme as a fixed layout?, or make it possible to decrease the width of the theme.

and can i after buying the theme make the texts more visible, currently you feel like it hard to see texts in the theme.

There wouldn’t be many modifications to make Proton fixed width, but since it’s built to resemble an app (with the main menu and sidebar on the left, and user menus top-right) that would defeat the purpose. But yes, it’s possible by changing the layout.less file.

Both text color(s) and text size/font can be changed site-wide by altering the proton-variable.less file. The key variables to do change are:

@text-color @font-family-base @font-size-base (14px by default)

You can also use the easy to create theme LESS files. Several example themes are available and you can change the themes in the demo by clicking the eye icon in the user menu in the top-right position. Note that the themes do not alter inner-page components, only the menus and dropdowns. To do a full recoloring of Proton UI it’s best to directly change the variable values in proton-variables.less file.

This one Proton UI is almost the same as Photon UI a previous theme by this author. I wish him good luck with sales, but note by purchasing a theme from this author you might not receive any updates until you die on any of his work just like the Photon UI never was updated.

Thanks Haso.

Right about that time we were planning updates for our Photon Theme Twitter Bootstrap v3 was announced. Since some big structural changes were introduced with TW BS v3 it was pretty much impossible to convert Photon theme’s markup to support TW BS 3.

As our company Orange Hill uses Photon and Proton UI Themes to build admin panel dashboards for our clients on a daily basis as a part of our core business, it was imperative to switch to TW BS v3 as soon as possible, which orphaned some of the efforts planned to upgrade the Photon UI Theme to latest TW BS version.

However, most of the updates non-related to TW BS were made, and we will definitely wrap those changes up and create a Photon UI v.1.2 Theme that will be free for all that bought it.

As for Proton UI Theme, we’re pushing the next set of changes by the end of this week. Those updates will be free for everyone that already purchased Proton UI theme.

I wish you all the best in dev buiz. Cheers!

So, reading the hasokeric’s comment.. you will not update anymore this template? :( ( or add new features or something else like a gallery, wizard for forms, ... )


Yes we will. The update for this template will be released by the end of this week. Update will include a number of new features and upgrade to the latest Twitter Bootstrap version. We will continue to update the theme in the future.

Bline, new version has just been released. Please check it out.

wow seriously? two same templates on themeforest? I am not sure how themeforest accepted this template when it is same like your old template. hmmmmm weird :confused:

We redesigned the theme from the scratch, while preserving the most basic layout and functionality. Changes are very obvious both graphically and programatically, and it’s both common and natural among admin theme authors to upgrade and evolve their ideas by building new themes that stem from the previous one. Thanks for your concern though, it’s people like you that make this marketplace better :)

Is there a way to have the menu permanently open?

I’m assuming that this relates to the desktop size.

Yes, you only need to add “expanded” class to <nav class="main-menu"> element to keep it open. Though keeping it open constantly would obscure the sidebar element so this is only useful if you either don’t need the sidebar or plan to change the layout.less file to move the sidebar and page content more to the right.

Exactly what I was looking for! Thanks!

In my opinion the templates are different, in both technology and style. I love this new template and it is base on bootstrap 3.

@stefanolmo addding bootstrap3 is nothing but upgrading the template not a new item!!! he must be releasing it as a update to the old template. I am sure everybody knows the basics here. Any way I wish good luck with the sales.

Thank you for your good wishes :)

Hi orangehilldev!

Thanks for this template – nice and clean. Struggling over the following – thanks for any helpful suggestions:

- how would you setup an angularJS app based on this theme? What ‘gruntfile’ modifications would you do – to start with angular?

- just a quick look – anyway: in app/common/user-nav.html I am unable to solve this: Want to show some text also not just an icon – like: <icon-user> Username. In general confused about ‘user-menu-wrapper’.

Wow – after 6 hours of try and error – I give it up. Thanks for helping me out here! Don’t want to hurry you – ask anyway: when do you think you will find time to ‘angularJS’ your amazing work? Many thanks and greetings from switzerland.

I’m sorry for the trouble you went through that didn’t yield success. I can’t really promise anything, but if we do some Angular based project that includes usage of Proton UI for a customers we’ll make sure to port it in a future Proton UI update. It’s just too many working hours if we’d do an Angular integration just to put it in the theme alone. I hope you understand. I wish you best of luck and lots of success!

After checking out the latest version of angular generator it was fairly easy and fast to build a proof of concept so I hope this might help until such time when we have a full Angular integration available for Proton. You can download the POC zip here:

Note that you will need to set up the app using the same / latest yeoman angular generator we used (v0.6.0). To ensure you’re using the latest run: “npm install -g generator-webapp”, and after that in the directory where you wish to run the app run: “yo angular”.

Say no to the bootstrap include question, but leave all other generator options checked as they are by default. When the app is ready (it takes a while since it downloads nearly 70mb of npm data), you’ll also need to install the LESS compiler, just run: “npm install grunt-contrib-less—save-dev” in the app folder. After that, copy over the contents of the POC zip to your app folder (overwriting the files when asked) and run “grunt serve” to start the server. This should yield a working dashboard page.

The only Angular controller file is ”/app/scripts/controllers/main.js” and there are only two routes in app.js, one for dashboard page, and all others leading to a 404 page.

When developing an Angular app, a very important step is to replace all the jquery READY functions you might have used on a regular web app with $scope.$on(’$viewContentLoaded’, yourReadyFunction) or $scope.$on(’$includeContentLoaded’, yourReadyFunction), depending on whether you want it to fire on view ready or included-view ready. jQuery ready is useless in Angular since the DOM is always ready before Angular does it’s stuff and populates it. You can see the main.js controller file to hint on how you should do this.

It should be fairly easy to repack all the core Proton JS files due to them being fully modular. I hope this will be enough to get you back on track. Note that this might still not be the recommended way on how an Angular app should use third party JS plugins, but it works and requires the least amount of Angular knowledge to create a full app. This is also a very simple POC, you could of course move the main nav/menu outside of the ng-app view in index.html to have it always loaded on page and only have the page content changing. Same can be done with the sidebar or the user nav. Angular might be a bit tough to grasp at start but it gets easier when you play around with it. Happy coding :)

Hi, did you test you theme with google chrome ? I see some css errors at dashboard.

Hi, yes, errors were noted on Windows Chrome and will be fixed with next release that will happen by the end of this week. Thanks for reporting.

New version is out, an issue with Chrome on Windows has been fixed.