JuiceUI Change Theme / Style

问题

Is there an option to change the styles of JuiceUI controls? Any predefined themes? (If yes, I couldn't find any documentation on it.) Do I style them with regular CSS like other controls? (That didn't seem to work either.)

TIA

Edit: Here's how the button looks: (I had no preinstalled jquery themes in this one - this is a new website.)

I did notice JuiceUI installed a content - themes folder with base, Fresh-Squeezed and Supercharged.

Don't know where it's being referenced though and how to change it.

回答1:

At the moment, the source for JuiceUI can be your best friend. Check out this line: https://github.com/appendto/juiceui/blob/master/Juice/JuiceApp.cs#L52

This is what you'll want to add to Global.asax.cs:

CssManager.CssResourceMapping.AddDefinition("juice-ui", new CssResourceDefinition {
    Path = "~/Content/themes/[Name of custom theme dir]/jquery-ui-1.8.18.custom.css",
    DebugPath = "~/Content/themes/[Name of custom theme dir]/jquery-ui-1.8.18.custom.css"
});

This will redefine the location of the "juice-ui" rendered theme, and you'll see that output in each page juice is used on.

Sorry this isn't more obvious at the moment. We're planning on a series of articles to cover topics such as these and updating the documentation on the site is already in the works.

回答2:

For VB... yes people still use it! :P

<%@ Application Language="VB" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="Juice.Framework" %>

<script runat="server">

    Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
        ' Code that runs on application startup

        Dim juiResDef As New CssResourceDefinition
        juiResDef.Path = "~/Content/themes/[Name of custom theme dir]/jquery-ui-1.8.18.custom.css"
        juiResDef.DebugPath = "~/Content/themes/[Name of custom theme dir]/jquery-ui-1.8.18.custom.css"
        CssManager.CssResourceMapping.AddDefinition("juice-ui", juiResDef)

    End Sub

</script>

Good to go :)

回答3:

Another approach to override the Fresh-Squeezed default is to just drag and drop the jquery-ui-X.X.XX.custom.css file onto the page and create an html link to it. This will override the css from the default and apply the theme you want. It would have to be done on any page you want to use the theme. Another approach is to just treat the Fresh-Squeezed folder as the container for the theme you want to use and replace the images and the custom.css file in that folder. Hopefully they will offer a different way of modifying this in future releases.

回答4:

Becky, after looking at the GitHub repo it appears that it is using the ui-lightness css file for jQuery UI. https://github.com/appendto/juiceui/tree/master/Juice-Test-Site/css you can try loading a different jQuery Theme in place of this? you may have to ensure this file is not being loaded on your site. if i'm way off base and you've already tried this let me know.

来源：https://stackoverflow.com/questions/10342263/juiceui-change-theme-style

标签

jquery

styles

juice-ui