Item13691: Add a way how to easy install custom jQueryUI themes into Foswiki

In the http://foswiki.org/System/JQueryUI is a line:

See JQueryThemeSwitcher to view available themes.

Unfortunately the topic (and the whole UI-theme switcher) is missing.

Also, need clearly document how the user could easily:

1. add his own UI-theme (e.g. generated with the JqueryUI ThemeRoller http://jqueryui.com/themeroller/ )
2. how the user can disable outputting the CSS files

The requirement for 1. is clear. Now the user can't easily add his own generated UI-theme. (or just it isn't documented how).

The requirement for 2. is needed when the whole Foswiki's CSS is generated (e.g using LESS or SASS), and the generated CSS file already contains all needed CSS for JqueryUI. In such case, the plugin should not send any additional CSS definitions to the browser.

The both requirements are tied with the missing JQueryThemeSwitcher topic.

-- JozefMojzis - 10 Sep 2015

ThemeSwitcher isn't supported anymore upstream and has been removed long time ago from JQueryPlugin

-- MichaelDaum - 10 Sep 2015

I'm not sure about what "upstream ThemeSwitcher" you're talking, but the https://learn.jquery.com/jquery-ui/themeroller/ clearly shows (latest page update 17 apr. 2015) - the "theme *roller*" is still supported. (and also the page: http://jqueryui.com/themeroller/ dynamically changing the theme, as you changing the values).

Could you please post some URL where i can learn more about the "abandoned" ThemeRoller/switcher to avoid misunderstandings?

The ability define own theme is the one main features of the JqueryUI. How the user could easily customize the UI CSS?

Currently it is possible only load the full theme definition CSS TWICE, e.g.

• once for the theme what is defined in the configure (e.g. foswiki theme or redmont etc..)
• and second time the user's own theme.

This is an really bad practice.

The JqueryUI is an integral part of the Foswiki. Therefore, here should be an easy and cleanly defined and documented method (like it is done for the PatternSkin) how the user could define his own theme css file (or none) for the JqueryUI - without the need load two times two different full CSS definitions.

-- JozefMojzis - 10 Sep 2015

the theme roller itself was once available to download and install on your own site. as far as I know that feature is gone and noway to package the theme roller with jquery plugin

-- MichaelDaum - 10 Sep 2015

Huh? The theme roller is an online tool. It allows generate custom CSS for the JqUI. I haven't any clue about what you're talking, but sure will help if you click the following link: http://jqueryui.com/themeroller/ .

-- JozefMojzis - 10 Sep 2015

Also, the main point of the Task is about the JqUI and the custom (generated) CSS for it, in the Foswiki. Not really understand the sense of your comments.

-- JozefMojzis - 10 Sep 2015

The sense of my comments: Theme Roller once was a stand alone tool that you could install on your own site to create & switch themes.

Btw could you please cut the crap and just focus on the issue at hand, will you?

We are depending on a friendly environment here as everything you get is based on volunteers giving you open source software.

No friendly environment ... nobody willing to listen to you.

So better be a good FOSSie and ... cut the crap.

Other than that ... patches welcome.

-- MichaelDaum - 11 Sep 2015

Ad focus:

1. I posted the theme roller url in the task and I never talked about any downloadable or installable tool

I also pointed to the 3 real problems (about the same issue)

1. impossibility adding own rolled theme to the Foswiki,
   1. without changing foswiki distribution itself, or
   2. without having two full set of CSS rules for the JqUI
2. having a missing topic in the installation (or a dead link)
3. having a missing part of the documentation about how the user could correctly switch the JqueryUI CSS.

If some of the above sounds as "unfriendly" it is by my mistake or by misunderstanding.

-- JozefMojzis - 11 Sep 2015

Wow, just found Support.Question877. Although it needs a dose of hacking (e.g. renaming files that are part of the distribution and therefore the custom built theme won't survive plugin upgrade) but gives a way how to (partially) solve to the problem.

-- JozefMojzis - 11 Sep 2015

For now, I consider this a docu problem only. In any other case where you'd like to improve, please file a different report explaining the issue at hand or the requested feature in more detail and then discuss best solutions.

If you'd like to document adding additional themes to JQueryPlugin, please go ahead. Any improvements welcome.

-- MichaelDaum - 14 Sep 2015

I can't be much more detailed as the above, but will try do my best. So the following is a bit bloated.

According to the PatternSkinCssCookbook part When you need lots of graphic changes: Rewriting CSS Foswiki allows change the PatternSkin colors by defining the FOSWIKI_STYLE_URL and the FOSWIKI_COLORS_URL preferences variables.

In the following text, when i will use only the FOSWIKI_COLORS_URL variable mean using the both e.g. the FOSWIKI_COLORS_URL and the FOSWIKI_STYLE_URL variables.

If the user want use more color variations in the Foswiki, (let say 2 additional color-variants), he can do the following. The user

1. create a copy of the distributed CSS file (pub/System/PatternSkinTheme/colors.css)
2. and edit the file to his wanted own colors, e.g. creates his own PatternSkin colors CSS files, let say mycolors1.css and mycolors2.css
3. attaches the two new CSS files ( mycolors1.css, mycolors2.css ) into some topic, let say MySkinColors
4. at the places where he want change the colors
5. the simply changes the FOSWIKI_COLORS_URL variable to the wanted /pub/MyWeb/MySkinColors/mycolor1.css or /pub/MyWeb/MySkinColors/mycolor2.css
6. the Foswiki nicely and very correctly will use the defined colors CSS URL

Of course, changing the FOSWIKI_COLORS_URL solves only the part of the color-change problem.

• For using the own colors (partially defined in the mycolors1.css and mycolors2.css)
• the user MUST also change the jQueryUI theme too
• Otherwise, the jQueryUI components will looks terrible.

Therefore, the user will:

1. use the official JqueryUI Theme roller at http://jqueryui.com/themeroller/ to create two different jQueryUI themes for matching his already defined PatternSkin colors above.
2. e.g. will repeat twice the following:
   1. Edit the theme on the http://jqueryui.com/themeroller/
   2. click the "Download theme" button, selects the JqueryUI version, name his theme as myjqui-theme1 and myjqui-theme2 will and click the final download button
   3. unpack the downloaded zip file with the theme
   4. it contains a css directory, with a) the css files and b.) the required images for the css

For the remember - recapitulation - now the user:

• have two different color schemes for the PatternSkin and could easily change the colors. (by changing the FOSWIKI_COLORS_URL variable)
• have two generated and downloaded jQueryUI themes matching the above PatternSkin colors (myjqui-themei1 and myjqui-theme2)
• want use these new generated themes everytime when he changes the the Foswiki's PatternSkin colors (using JQTHEME)

And here comes into play the issue described above.

1. here isn't any user-friendly, clean way how to add the downloaded jQueryUI theme to the Foswiki,
2. only what one is described in the Support.Question877
3. but this isn't very user-friendly way

Summarisation:

1. the user can switch the PatternSkin theme runtime
2. but here isn't any way how to change the correspondent jQueryUI theme at runtime
3. because, here isn't any clean way how the user could install new jQueryUI themes into foswiki

I described the problem/bug (in as much details as I only knew). Whether it is purely a documentation problem or not - I can not judge. It can judge the plugin maintainer only.

Maybe it is only an documentation problem, so need only add somewhere a guide:

1. how to install custom jQueryUI themes into Foswiki - more user friendly as described in the Support.Question877 - because the Support.Question877 is pure hacking and the next plugin update will override the user's changes
2. how to change the installed themes at runtime (yes, here is the JQTHEME - but it works only for the default distributed themes)

If want, i could copy the last comment into separate task - but (IMHO) - taking still about the same issue - installing jQueryUI theme and switching the newly installed themes using the JQTHEME.

-- JozefMojzis - 14 Sep 2015

Could you change the title of this or any other task item to reveil your intended change? Along the limes of

• improve the way how ... or
• add feature xyz ... or
• doing this and that things are totally broken ...

Next, outline your improvement. Then provide a patch. Thanks.

-- MichaelDaum - 14 Sep 2015

The plugin is part of the core. Any changes to it must be approved beforehand. Therefore is pointless working on the patch before the approve of the changes.

Also, because, the Support.Question877 reveals an (partial-hacky) solution, (unfortunately, i found it after i wrote the task)

• I change the "priority" from the "Normal" to "Enhancement" (now is only needed make Foswiki user-friendly - so, it isn't a direct bug)
• change the title
• and because here isn't any feature-agreement how the patch should work (for the core plugin) i simply set the state "proposal required".

Problem solved. Thank you for your effort and time.

-- JozefMojzis - 14 Sep 2015

The theme will be made customizable using css variables. See Item15177.

-- MichaelDaum - 21 May 2024

Commenting is disabled while not logged in