Help with custom jQuery Theme

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This thread is closed to new posts. You must sign in to post in the forums.

7/18/2012 10:17:43 AM

mikew5163

Total Posts 41

View Posts

Help with custom jQuery Theme

Hi,

I've rolled myself a custom jQuery Theme using the ThemeRoller on the jQuery site. I then followed the steps here to self host jQuery and my custom theme. But I can't get it to work - using my theme does not render any styling at all. The sample html file that comes with the custom theme does work fine, so I guess my theme itself is ok.

I've been through the instructions with a fine tooth comb but I can't see what, if anything, I've done wrong. It's behaving as if my theme does not exist - I get the same effect as if I choose any random theme name in the <portal:StyleSheetCombiner of my layout.master.

Another article here suggests that I could just host my custom theme locally and carry on getting the js itself from the web, but I'm not clear how this should be done.

Any clues as to what I could be doing wrong?!

7/18/2012 1:04:58 PM

Joe Davis

Total Posts 2239

View Posts

Re: Help with custom jQuery Theme

Hi,

You don't need to self-host the jQuery JavaScript or the jQueryUI JavaScript to use your own theme.

To use your own theme, all you need to do is:

Add the IncludeJqueryUI="false" property to the StyleSheetCombiner control in the layout.master
Add the jquery theme css and images to your skin directory. We usually name the jquery images folder "jquery-images" and the css file stylejquery.css.
Add <file>stylejquery.css</file> to the style.config in your skin directory.
Do a "find and replace" on the stylejquery.css file to fix up image paths and parenthesis issues.
1. Replace: url(images/ With: url(jquery-images/
2. Replace: ( With: ('

That should be it. If you have any problems, just let us know. Posting a link to a site with the skin on it always helps us troubleshoot this kind of stuff.

7/18/2012 3:24:58 PM

mikew5163

Total Posts 41

View Posts

Re: Help with custom jQuery Theme

Hi,

Thanks for the quick response, but I'm afraid that still doesn't work.

I'm assuming that as we're setting IncludejQueryUI="false" in the style sheet combiner, I don't set the theme using JQueryUIThemeName because my theme should apply to all jQuery widgets in this skin. So my stylesheet combiner looks like:-

<portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" IncludejQueryUI="false"
UseIconsForAdminLinks="false" UseTextLinksForFeatureSettings="false" />

In my stylejquery.css file I also closed the quotes around the url paths by also replacing .png) with .png') but otherwise I think I did what you described. Still no luck though. I've put a test page online at http://test.effectiveintelligence.com/mobile. Excuse the really narrow skin - client wants a 'true' mobile skin. You'll see there's an accordion at the bottom. Other widgets such as the tab dialog don't work when logged in, either.

Thanks again.

7/19/2012 10:07:40 AM

Joe Davis

Total Posts 2239

View Posts

Re: Help with custom jQuery Theme

Hi,

Glad you caught the .png').

Are the jQuery Tabs on the settings pages working properly? I ask because the accordion that you have on http://test.effectiveintelligence.com/mobile doesn't use the typical mojo-accordion class, which is fine as long as you write JS to make your accordion work. I checked all of the rendered scripts and couldn't find any JS referring to "collapsed-accordion" which is the class you have on your accordion div.

If the Tabs on the settings pages work, you should try applying the "mojo-accordion" class where you currently have "collapsed-accordion".

HTH,
Joe D.

7/19/2012 10:45:52 AM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: Help with custom jQuery Theme

If you are trying to follow the example of an accordion that starts in a collapsed state, we have sample JavaScript code on the Styling jQuery Widgets page.

Jamie

7/19/2012 5:26:22 PM

mikew5163

Total Posts 41

View Posts

Re: Help with custom jQuery Theme

Thanks Joe D / Jamie,

No, the tabs on the page settings page don't work either. I also tried moving the files to the /data/style folder and having a line in style.config thus: <file cssvpath="/Data/style/stylejquery.css" imagebasevpath="/Data/style/jquery-images">none</file>. But that didn't work either. It's like it's just not seeing the css file at all.

(As a side issue, I was indeed trying to make the accordion collapsible, which I'm now doing by adding JQueryTabConfig="{active:'false',collapsible:'true',fx:{opacity:'toggle',duration:'fast'}}" to the script loader in layout.master. So I've gone back to the mojo-accordion class).

7/23/2012 4:04:08 AM

mikew5163

Total Posts 41

View Posts

Re: Help with custom jQuery Theme

Just an update - the approach described here does work. I downloaded and modified an existing theme and it works fine. So I'm not sure what the problem was - maybe there was something not right with the theme that came out of the themeroller. Anyway, thanks again for all your help.

You must sign in to post in the forums. This thread is closed to new posts.