58 comments found

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

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

orangehilldev

:) Thanks Zentar!

  • Has been a member for 6-7 years
  • Bought between 10 and 49 items

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

orangehilldev

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.

  • Bought between 10 and 49 items
  • Has been a member for 4-5 years

Great Work – any plans for an RTL version?

orangehilldev

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

  • Exclusive Author
  • Has been a member for 0-1 years
  • Australia

Nice and Clean Work

  • Sold between 1 000 and 5 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Referred between 1 and 9 users
  • Exclusive Author
  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
  • Europe

Good Job, I Like It, GLWS ;)

orangehilldev

Thank you!

  • Has been a member for 2-3 years

I think the demo problematic

orangehilldev

Could you explain a bit more the problem please?

orangehilldev

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

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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.

Default-user

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?

orangehilldev

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.

  • Italy
  • Sold between 1 and 100 dollars
  • Exclusive Author
  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

Really good job! :)

  • Bought between 50 and 99 items
  • Brazil
  • Exclusive Author
  • Has been a member for 5-6 years

Awesome work!

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

orangehilldev

It wasn’t too obvious, but the login page is actually there if you logout: http://proton.orangehilldev.com/login.html (we’ll fix this soon and make it more obvious)

orangehilldev

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.

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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!!!!

orangehilldev

Thank you for purchasing Proton UI. Widget dimensions can be modified by overriding the default CSS and JS widget width / height / gutter values. However, since these values are used to style the widgets in more than one place, we would recommend using LESS version to modify the widgets.less file and then recompile the CSS for production usage. We will be launching a Proton UI update to make this bit very easy to change using LESS variables.

The JS change would need to be made to dashboard.js where widget total width (width + gutter) is currently hard-coded to 330px (300 + 15 + 15) in the “setBlankWidgets” function used make the widget area responsive. We will also be making this easier in the updated version and no JS change will be needed after changing widget width in CSS/LESS.

You can expect to see the updated version available for download by the end of this week. It will also bring additional features and improvements. Regarding notifications, the dashboard notifications are launched from dashboard.js (“alerts” function). You first need to set up some basic pnotify plugin options and can launch notifications programmatically or by binding them to an event. Full documentation on pnotify notifications plugin usage is available here: http://sciactive.github.io/pnotify/. You can also find working bind to event examples here: http://proton.orangehilldev.com/ui-components-general.html#notifications

Default-user

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?

orangehilldev
Hi, you can add this piece of code to the proton.dashboard.events() 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.
Default-user

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

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

hi,

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

orangehilldev

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 http://proton.orangehilldev.com/maps.html

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.

orangehilldev

The update we pushed on last Friday add the save the re-arranged layout feature. We also included an example of the larger widgets: http://proton.orangehilldev.com/example-widgets-larger.html For more detailed information please check: http://proton.orangehilldev.com/changelog.html#version-1.1-–-dec-6-2013

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
  • Sweden

hi,

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.

orangehilldev

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.

  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • United States

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.

orangehilldev

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!

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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, ... )

B.

orangehilldev

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.

orangehilldev

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

  • Has been a member for 0-1 years

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:

orangehilldev

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 :)

  • Bought between 1 and 9 items
  • Has been a member for 4-5 years

Is there a way to have the menu permanently open?

orangehilldev

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.
Default-user

Exactly what I was looking for! Thanks!

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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

  • Has been a member for 0-1 years

@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.

orangehilldev

Thank you for your good wishes :)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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’.

Default-user

I have found this arcticle: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/ :: It would be very helpful for me – if you could help me to set things up right!

About the ‘user-menu’: Can we expect an update with a ‘user settings’ and ‘user-profile’ page?

Many thanks!

orangehilldev

Hi ottigerb, thank you for purchasing Proton UI.

Yeoman and Grunt are both developing very rapidly so the changes are hard to keep up with unless you’re using angular on every-day basis. While we do have experience with angular apps I would need to check out the latest update of the angular app generator to be of help with this question. The main thing you would need to do is to “merge” default proton ui grunt config file with the latest angular app generator grunt file. For someone working with grunt often this wouldn’t be too hard to do, so I’ll be checking this and will give a more detailed answer later on. The modular structure of Proton UI makes it very easy to use with Angular or any other MVC-like framework. Any @include statement used for the default Proton Grunt build would only need to be replaced by the ng-include to get the same results. Currently we’re very busy working on the update, which brings me to your next question. An update will be released by the end of this week and it will feature a new user profile page and we might also add the link to it in the user nav as you suggested.

The user nav is fully customisable, so if you would like to say edit the default user nav to add a “Messages” text along with the icon you could do something like this:

<a href="javascript:;" data-expand=".messages-view" class="messages-access"> <i class="icon-envelope-alt" /> <span>Test Text</span> </a>

Then you would only need to set up a style for your new span, the important thing is that the display is set to display:table-cell. This is done to vertically center the user nav content. A simple example style for your span element might be this:

display: table-cell; vertical-align: middle; top: 3px; position: relative;
Default-user

I’ll be checking this and will give a more detailed answer later on: Many thanks for this – looking forward!

Default-user

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.

orangehilldev

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!

orangehilldev

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: http://proton.orangehilldev.com/angular-poc/demo.zip

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 :)

  • Bought between 50 and 99 items
  • Brazil
  • Exclusive Author
  • Has been a member for 5-6 years

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

orangehilldev

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.

orangehilldev

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

by
by
by
by
by
by