Alternate jQuery UI Theme for Webtop and Website

Chris Kent

unread,

Aug 17, 2011, 9:25:33 AM8/17/11

to farcr...@googlegroups.com

Love the new Aristo jQuery UI theme for the webtop in 6.1.

But I need a different UI theme for website use of formtools.

I have registered a new jquery ui css with ID="jquery-ui-web" for my chosen ui theme and run the following just before onRequestEnd

<skin:loadCSS id="jquery-ui-web" />

It works and I can now have a different jQuery UI theme for website formtools and use Aristo in the webtop.

Chris.

Geoffrey Bowers

unread,

Aug 17, 2011, 6:39:42 PM8/17/11

to farcr...@googlegroups.com

Might want to be careful there.. Trunk is now the mainline for 6.2 which is where the aristo based ui is being implemented.

The stable branch for 6.1 is available at ./branches/p610

GB

Sent from my iPhone

--
You received this message cos you are subscribed to "farcry-dev" Google group.
To post, email: farcr...@googlegroups.com
To unsubscribe, email: farcry-dev+...@googlegroups.com
For more options: http://groups.google.com/group/farcry-dev
--------------------------------
Follow us on Twitter: http://twitter.com/farcry

AJ Mercer

unread,

Aug 17, 2011, 11:45:16 PM8/17/11

to farcr...@googlegroups.com

I think you have made this more complex than it need to be.

In '_serverSpecificRequestScope.cfm' (project config) you can just override the JS and CSS

here is mine

<skin:registerJS id="jquery"

baseHREF="/skin/jquery-ui-1.8.15"

lFiles="jquery-1.6.2.js">

var $j = jQuery.noConflict();

var $ = jQuery.noConflict();

</cfoutput>

</skin:registerJS>

<skin:registerJS id="jquery"

baseHREF="#application.url.webtop#/thirdparty/jquery/js"

lFiles="jquery-1.4.3.min.js">

var $j = jQuery.noConflict();

var $ = jQuery.noConflict();

</cfoutput>

</skin:registerJS>

</cfif>

<skin:registerJS id="jquery-ui"

baseHREF="/skin/jquery-ui-1.8.15/ui"

lFiles="jquery-ui-1.8.15.custom.js" />

<skin:registerCSS id="jquery-ui"

baseHREF="/skin/jquery-ui-1.8.15/themes/patersons"

lFiles="jquery-ui-1.8.15.custom.css">

.ui-widget {font-size:1em;}

</cfoutput>

</skin:registerCSS>

<skin:registerCSS id="pslSkin"

baseHREF="/skin/css"

lFiles="stylesheet.css,styleSheet_structure.css,styleSheet_navigation.css" />

<skin:registerCSS id="jQueryCSS"

baseHREF="/skin"

lFiles="/js/jQuery/jquery-autocomplete/jquery.autocomplete.css,/js/jQuery/flexigrid/css/flexigrid/flexigrid.css,/js/jQuery/prettyPhoto/prettyPhoto.css,/js/jQuery/DataTables-1.7.4/css/demo_table_jui.css" />

<skin:registerJS id="jQueryJS"

baseHREF="/skin"

lFiles="/js/jQuery/jquery-autocomplete/jquery.autocomplete.js,/js/jQuery/qTip/jquery.qtip-1.0.0-rc3.js,/js/jQuery/jquery.jqprint.js,/js/jQuery/jquery.ga/jquery.ga.js,/js/jQuery/flexigrid/flexigrid.js,/js/jQuery/prettyPhoto/jquery.prettyPhoto.js,/js/jQuery/jcarousellite/jcarousellite_1.0.1.js,/js/jQuery/DataTables-1.7.4/js/jquery.dataTables.js,/js/jQuery/DataTables-1.7.4/js/dataTables.numericComma.js,/js/jQuery/DataTables-1.7.4/js/dataTables.numericCurrency.js,/js/jQuery/DataTables-1.7.4/js/dataTables.date.js" />

<skin:registerJS id="jquery-ga"

baseHREF="/skin/js/jQuery/jquery.ga"

lFiles="jquery.ga.js" />

<skin:registerJS id="jquery-qtip"

baseHREF="/skin/js/jQuery/qTip"

lFiles="jquery.qtip-1.0.0-rc3.js" />

You can even combine all of these to make one cahed file

eg <skin:registerJS id="not-yslow-anymore" lCombineIDs="patersons,jquery-libraries,sliding_menu" />

--

You received this message cos you are subscribed to "farcry-dev" Google group.
To post, email: farcr...@googlegroups.com
To unsubscribe, email: farcry-dev+...@googlegroups.com
For more options: http://groups.google.com/group/farcry-dev
--------------------------------
Follow us on Twitter: http://twitter.com/farcry

--

AJ Mercer
<webonix:net strength="Industrial" /> | <webonix:org community="Open" />
http://twitter.com/webonix

Railo Community Manager

Chris Kent

unread,

Aug 18, 2011, 3:11:11 AM8/18/11

to farcr...@googlegroups.com

Yes, already combining css & js files in _serverSpecificRequestScope.cfm, But that only allows for one UI theme that will be the same for the webtop and website.

What I wanted was a different jQuery UI theme for webtop and website. e.g. Aristo in webtop and Blitzer on website.

This enables a theme that can be tuned to match the website styling for site visitors and also the Aristo (in 6.2 thanks for the warning Geoff) theme in the webtop.

AJ Mercer

unread,

Aug 18, 2011, 3:21:55 AM8/18/11

to farcr...@googlegroups.com

in that case you would wrap

around the juery_ui as well

then all the array and struct delete stuff would then not be required.

--

You received this message cos you are subscribed to "farcry-dev" Google group.
To post, email: farcr...@googlegroups.com
To unsubscribe, email: farcry-dev+...@googlegroups.com
For more options: http://groups.google.com/group/farcry-dev
--------------------------------
Follow us on Twitter: http://twitter.com/farcry

Chris Kent

unread,

Aug 18, 2011, 3:49:00 AM8/18/11

to farcr...@googlegroups.com

Thanks AJ,

I had tried that and it works for most cases, but where it fails is in the admin when using library pickers in admin.

I have changed the condition to

And now it uses the correct UI theme.

Might need some more work on this to ensure it works for all cases.

AJ Mercer

unread,

Aug 18, 2011, 4:00:31 AM8/18/11

to farcr...@googlegroups.com

Thanks Chris - I have updated my project

--

You received this message cos you are subscribed to "farcry-dev" Google group.
To post, email: farcr...@googlegroups.com
To unsubscribe, email: farcry-dev+...@googlegroups.com
For more options: http://groups.google.com/group/farcry-dev
--------------------------------
Follow us on Twitter: http://twitter.com/farcry

Chris Kent

unread,

Aug 18, 2011, 4:07:13 AM8/18/11

to farcr...@googlegroups.com

Registering the webtop UI theme in _serverSpecificRequestScope.cfm and the website UI theme in displayHeaderStandard.cfm appears to work best.

Reply all

Reply to author

Forward