Looking forward to the new release.
There is a know problem with jquery scrollpane, having to do with the slider sometimes blinking when using chrome and safari. There seems to be a fix, which can be found with a google search.
Would it be possible to apply this fix in a future release, and/or respond to this comment, with instructions on how to implement the fix.
Sure, we will look into getting the fix implemented. I would imagine it would be simple enough to get done for this next release.
Version 1.3 is available for download now!
As far as the scrollpane blinking, can you show me how we can reproduce this? We were unable to find the issue you are talking about. If you can post a link or describe more what you mean and how it can be reproduced, we will gladly make the adjustment.
Version 1.3 is available for download now with accordion submenus and an upgrade to Bootstrap v2.2.2!
Let us know what you would like to see in the next release! We will start working on it in January.
Thanks for the note; the template has given the whole team a massive boost and although it’s we’ve changed it some as part of the integration and internal team education process with ASP.Net MVC; we wouldn’t had got to gain these skills this fast without it.
I’ve downloaded the 1.3 now and I’ll see sure to implement the submenu integration asap.
Thanks John, glad to hear!
For an easier upgrade process, you will only need to change out the core.css (or the color you have chosen), bootstrap.min.css and bootstrap.min.js.
I ‘ve downloaded the 1.3 but there still some bugs with left side scroll bar in Firefox and IE
Thanks for this item
We did not want to slow things down by putting in too many custom scrollbars, but you can easily apply the same scrollbar to the left side by following the instructions in the README file.
Let us know if you need help with it and we would be happy to answer any questions!
Thanks a lot Bryan
I have some questions :
check this link I uploaded whole clarity folder unchanged
check this link: http://nilanila.com/mails/clarity/index.html
I can’t toggle theme colors check that link above
Is there a way to change the width for every side layout (left or right)
and the height of header
For example I wanna fix right side layout at width=160px
header layout at height = 50px
Just a hint, For the theme to work correctly you must upload the contents of the folder to the root of your web server in binary mode with your FTP
Just saw your reply about adjusting the sidebar widths and header height.
Yes, this is very easy to do.
You can set defaults in your layout by adjusting the layout settings in responsive.js, starting at line 332 and line 355.
Simply change the number for northsize: to adjust the top height and east: and westsize: for the sidebar widths.
You can also set the min and max sizes for how each pane can resize.
Got a 404 while trying your link for color toggling. Let me know if you still have trouble with it.
Hope this helps!
Hey there. I’m interested in a 3 column layout with the left and right columns functioning how they do on soundcloud.
I’ll give an example: soundcloud dot com /the_verge
I finally found a theme with 3 columns that are similar, but I’d have to strip away all of the nav/menu options on the left, add a “max-width” for both the left and right bar, and try to generally improve the speed of your Clarity theme.
Seems like I’m going to have to modify a LOT, but do you think it’s doable? Should I find a different starting point or use your theme? I’m still conflicted… I would just try to download the soundclound theme locally and modify it as a base, but its an https website so I can’t
Let me know, maybe we can work together here
Thanks for your interest in Clarity.
Clarity is made to be customized into a web app interface. It is very easy to strip out the contents of the columns and replace them with whatever you want.
As far as speed, the preview is only slow because there are so many demo scripts on the dashboard view. No real webapp would have that many scripts. Everything could be minified and gzipped to speed up loading as well.
As I have mentioned in previous comments, this is a great template and your support is fantastic.
I am trying to install a jquery plugin I recently purchased from codecanyon called zoome, a jquery image zoom effect plugin. I order to get it to work with your Clarity template, I need to comment out lines 10 – 33 in application-other-pages.js. when using the chrome browser.
I have not tried it out with any other browser, so I can not tell you if the problem is only with chrome, or other browsers like IE.
Do I need the application-other-pages.js, or can I just remove the reference to it in my html.
What part of the template uses this js file?
It would also be nice if you could provide a small document with a brief description on what each application and responsive js files does and where they are referenced in the template.
This would insure that we would only load those css and js files that are required, depending on what part of the template we are using.
(p.s maybe this info could be also be include in your readme documentation file. I realize that some information is include as part of the current documentation about the third party plugins you use, but very little about the js you created.)
Thanks for the kind words.
The way application.js and responsive.js is used is described briefly in the documentation, but we will consider adding more detail to it.
So if you want a script to only load on mobile you can place it in the mobile area of responsive.js. If you want a script to load anywhere you would place it in application.js
When you talk about the issue with lines 10-33, that is the standard bootstrap tooltip loading there. It is compatible on all browsers and works fine for us on Chrome for mac and windows. Maybe you added something that is conflicting with it?
Once you get used to it, I think you will find it is a very efficient system.
Let us know if you have any other questions about it and we would be happy to help!
Still awaiting your response to my previous post.
We have had a busy last couple days, sorry for the delay. Let me know if you have any other questions though!
Thank you for your reply. I do have another question related to my initial question. what is the difference between responsive.js, responsive-code.js
The different files simply include different script snippets for the pages they are included on. Ideally, when building your app there would likely not be completely different scripts for different pages, and you would have just one responsive.js file for device specific scripts and one application.js for the rest of your functions.
Thanks for the great template. I was wondering if it would be possible to get the PSDs for the designs as I need to make some visual changes to match the current project i’m working on.
Thanks for purchasing!
This template was designed 100% in the browser so unfortunately we do not have photoshop files. We made CSS adjustments as straightforward as we could though.
Let me know if you have any questions while working with it!
I want to report an issue to the grey-light color theme.
The panels are blacks instead greys in v1.3
Waiting for v1.4 !
Thanks for the purchase!
We just double checked and all of the color schemes are working properly in v1.3. There is a grey color scheme with a dark sidebar (which is the default), and there is another grey color scheme with light sidebars.
Can you confirm on the original download files that you are having an issue with a color scheme missing?
I’m sorry, issue is on black-light color scheme.
-> http://themes.vibrance.co/clarity/index.html , choose the last on the right, sidebars are blacks.
I see. You are right. This is a simple fix and will be included in a minor update this week. Thanks!
Could you tell us when the new 1.4 version will be available?
I am going to create a new site right now and I would like to use the last version.
Thank you and congrats for your excellent job with this template
Thanks for purchasing smario!
1.4 will be a very minor update and will be released this week.
Hope all is well. If possible I would like to see an “Add To Home Screen” option when using a mobile device with template.
Thanks in advance.
FYI: Great work, this is one of the nicest templates I’ve seen.
Thanks for purchasing, and thanks for the suggestion!
We’ll keep this in mind, though most “add to home screen” implementations seem a bit intrusive to me.
Quick question. I see you are using JQuery, without digging too deep is there any ability withing your template to auto refresh a div and if so what are the best way to implement within your template. if not, do you recommend an implementation that works well with your templates and future upgrades.
var auto_refresh = setInterval(
There are a few ways you could go about implementing this, but the way that will be best is really dependent on your specific needs. We don’t plan to include functionality like this.
Something like the simple example you have above could be used, or if required, a more in depth approach might involve using something like backbone.js or websockets.
There isn’t a specific way that will work better or worse with Clarity.
K, Good info. Thank you very much Bryan..
Could you tell us when the new 1.4 version will be available?
We’ve decided to make the next update a larger update along with the release of a new theme. It will be a bit of time before it is released. Likely just over a month from now.
Is there any easy way to add a jquery script to allow for a top of page for the center pane? (ie: http://mattvarone.com/web-design/uitotop-jquery-plugin/ )
You can definitely add a script like that. Just make sure you configure it to scroll the center pane instead of the window. I believe you’ll want be checking the position on the ”.scroll-pane” container.
Hope this helps.
Can you tell me were I can set the following
- showArrows: true,
- arrowScrollOnHover: true
for the scrollpane. The default for both of these settings is false.
I tried to set them to true in the jScrollPane.js file, at lines 1355 and 1376, but this is not working.
You’ll want to add these settings to responsive.js after line 280. The function is there so that it only loads the scrollbars for desktops and doesn’t impact mobile performance.
You may also want to check out the jScrollPane.css file for aesthetic adjustments if you haven’t already.
Let me know if you need anything else.
Any idea when you will release the new version?
The official release of Bootstrap 3 just came out and we are working on the Clarity update now.
The update will likely be submitted for review at the end of next week.
Great – Look forward to new release
any news on when the new release will be available?
Thanks for checking in.
There is still a bit of work to be done. Likely the end of the month at this point. We’re going through thousands of lines of code to optimize Clarity in addition to the bootstrap 3.0 update.
Just wanted to let you know, Clarity 2.0 is out now!
Thanks for your patience. Let me know if there are any additional features you’d like to see in the future.
I like your template, only thing that worries me is the demo loading times, the js seems to take quite a bit of time to load.
Im not sure if that a problem with the server or whether its due to how much js is in the template.
The demo is slow to load, you’re right. The dashboard page is a kitchen sink example and is loading many more scripts/assets than you’d normally use in one view. Also not everything is compressed and gzipped like a real production app would be in the demo.
We’ve built out customized versions of Clarity for clients with very fast load times and under 250kb pageweight.
We are going to optimize the demo for the next release which we’re working on now. I’m glad you reminded me actually because the dashboard page now is a couple megabytes, ouch.
Any news up your next upgrade?
Thanks for checking in. We’re still working. This update is almost a complete rebuilding of the template framework so we’re putting a lot of time into it, but at the same time we have some new themes to finish up before the end of the year.
We’d originally hoped to have it ready by the 1st of this month, but right now it’s going to be a little while longer. It’ll certainly be worth the wait though!
Thanks for the update…
Hi, first of all thanks for this theme. I saved a lot of time designing a webapp interface with it.
I have a question regarding nav-tab. I’m unable to define more than 3 tabs inline. If I write 4 tabs, the last is printed in a new line. I’ve googled it but I cannot find an answer for this. I’m thinking to change the tabs for another plugin or use standard tabs. Do you know how to this in nav-tabs of the template.
You would need to make adjustments to the CSS to fit more than 3 tabs. They are currently set to fill one third of the container’s space.
Line 761 in core.css is likely what you’ll need to adjust. You’ll notice it is set to 33.3%. Simply change the percentage to accommodate the number of tabs that you need.
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details