Use jQuery UI theme framework

Topics: Feature requests
Apr 10, 2011 at 4:12 PM

By using the jQuery UI theming CSS framework we could point click our way to victory. see: http://jqueryui.com/themeroller/

It doesnt mean we are tied to jQuery .js. Is C1 using any CSS framework?

Coordinator
Apr 10, 2011 at 4:54 PM
Edited Apr 10, 2011 at 4:55 PM

http://jqueryui.com/themeroller/ looks very interesting - hadn't seen it before.

The only thing we have done so far in respect to 'easy theming' is to add our very first starter site as an option in the setup wizard - we added it two day ago. It is based on 1140 CSS grid (http://cssgrid.net/). You can view the site here; http://startersite.dev01.composite.net/ - there is no "easy skinning" though, it's all done with good old fashioned CSS.

Do you have experience with the jQuery UI theming framework? And if so, how much work would the be in making a http://startersite.dev01.composite.net/ clone use the theming framework? I took a (very) quick look and it seems that it is basically adding the right markup to the templates and include a default theme people can overwrite.

One thing which seems problematic though is that the theme (obviously) come with their own class names for things which we would probably like not to hard-code into the add-on packages markup - so installing a std. package on a themes site would not make it look perfectly themed. I'm just guessing here, but I suspect this to be an issue. Question if bridging the theme and theme-less packages is doable. I'd rather not have some specific theming tech spill into our default markup. Any thoughts on this point?

If you are up to it, it could be über cool to see if the starter site (installable via the setup wizard) could get a jQuery ThemeRoller brother :-)

 

Marcus

Apr 10, 2011 at 10:41 PM

I was origionally thinking about the console but atually it makes sense not to mess around with the console as a) its a much larger task b) its a much larger task c) but it would make for a themeable backend...

You are right about the hardcoding of jQ UI framework classes makes for larger rendering and repetetive invasive classes but it's at the tradeoff of speed, css class clarity and consistency of interface design.

1140 (960 grid revisted I guess) shouldn't have any effect and be conjunctable with jQ UI. Having jQ UI in place though would enable single replacement of jquitheme.css et voila themed to end consumer corporate cols etc. + its going to enable simple theme switching e.g. for WCAG high contrast

It would be good to include this in the demo as then you are offering layout and theming on point click basis (not ideal for all but i'm sure a lot of non devs would appreciate.

There is another possibility regarding mapping your classes and binding them with jQ UI which might be the LessCss ruby parsing engine for CSS but thats  for another day... :)

I'll have a look at the demo this week/weekend

Paul

May 27, 2012 at 4:57 AM
Edited May 27, 2012 at 4:58 AM

Hi, 
Trying to integrate the jQuery UI theme (eg: http://jqueryui.com/demos/button/#splitbutton) of a custom styled themeroller..  eg: buttons, slider and Accordion etc into a C1 site.  I have the test Index.html page from the themeroller working fine on my development server. So referencing that, I've imported the relevant files into C1 and mapped the links appropriately to match.  But I need a little help to realize what ever I am clearly missing? as its not working in the C1 site.

 

I've ensured that there's only 1x reference to jQuery within a Layout template mixed with a NivoSlider function, thought I'd bring in a JQuery module to ensure JQuery was working in the first place.

I updated the NivoSlider function template to reference a later version of JQuery (as JQuery UI v1.8.18 references jquery-1.7.1.min.js)  and tested to make sure Nivo still works, which it does.

However, the JQuery UI theme wont work in C1 currently, I have checked to ensure the folder/file paths of the extra CSS are accurate by direct references to a class or two, and the individual class renders in the C1 home page.  I have searched for "Accordian" as a DIV id throughout C1 to ensure there's no duplication with C1 vars and nothing comes up.

The JQuery UI files are stored in separate folders directly from the root as I don't want them in the /Frontend folder (the files appear in the related folders inside the web panel admin control:

Folders:
css
js 

The links within the <head>of the home page to the appropriate files are follows:
Head:
 <link type="text/css" href="/css/mine/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script id="jquery-ui-1-8-18" src="/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script id="query-ui" type="text/javascript">
 $(function(){

 // Accordion
$("#accordion").accordion({ header: "h3" });
//Autocomplete
$("#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"] });
// Button
$("#button").button();
$("#radioset").buttonset();
// Datepicker
$('#datepicker').datepicker({ inline: true });
// Slider
$('#slider').slider({ range: true, values: [17, 67] });
// Progressbar
$("#progressbar").progressbar({ value: 20 });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } );
}); </script> 

<link id="slider-css" rel="stylesheet" href="/Frontend/Composite/Media/NivoSlider/nivo-slider.css" type="text/css" media="screen" />
<script id="jquery-1-7-1" src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script id="jquery-slider" src="/Frontend/Composite/Media/NivoSlider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

The html code within the body of a 'button' a 'slider' and an 'accordian', which JQuery says should work, follows:
Body:

<button id="button">View VIP program</button>
<div id="slider"></div>

<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

 

I'm sure that Being able to get JQuery UI as a stylable UI wrapper for C1 with the various cool functions from JQuery such as the date picker etc would be really useful for a lot of C1 users...  I hope this thread along with my attempts and a little assistance will at least make it workable.

Martin. 

Coordinator
May 27, 2012 at 5:42 PM
Edited May 27, 2012 at 5:43 PM

Looking at the html the only thing that strikes me is the order of things in the head section - you include jQuery after you use it in the inline script block. Try getting the <script id="jquery-1-7-1" src="/js/jquery-1.7.1.min.js" type="text/javascript"></script> tag up, before the <script id="query-ui" type="text/javascript"> block.

If that does not resolve it, a few questions: When using Firebug or similar all looks ok script and net wise? Is the problem general across pages or only visible on the page featuring the nivo slider?

Any chance you can share the relevant folders (/App_Data, /css, /js, /Frontend) or build a package that recreate your setup? I'd love to play around with it, even if your get the issue resolved :)

May 29, 2012 at 5:06 PM

Thank you for your observation Marcus :)  Sure enough, it was as simple as referencing the JavaScript file before the <script id="query-ui" type="text/javascript"> block. 

Yes, I shall happily share the relevant folders in this thread as soon as I've laid out the page with the query-ui controls in place so that it all looks ok ;)