Search code examples
jquerycssjquery-uistylesheet

using custom style sheet with jquery ui

I am using jquery UI in my asp.net MVC website. On one page I click a button, then a new window is opened as window.open. The newly opened windows opens Jquery UI popup on load. I am passing a parameter css to window.open. If that parameter is not empty. I want the newly opened window's jquery popup to use that style sheet. My question is how to use my style sheet for jquery ui popup as jquery ui has its on css which uses its own images and jquery ui css uses those style names as well.

Please suggest

Solution

  • You can roll your own theme, via here and then in your popup layout.cshtml page you can code it that 

       <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

if (!string.isNullOrEmpty(Reuqest.QueryString["useCSS"])
{
@Styles.Render("~/Content/css/"+Reuqest.QueryString["useCSS"])
}

    </head>

    but as you have not provided any code, project layout, description, etc. i am only assuming you mean a full popup window and not just a jquery.ui.dialog object.

    EDIT this solution requires that you create the bundler methods for the new theme.

    bundles.Add(new StyleBundle("~/Content/themes/base/css/themeName").Include(
                        "~/Content/themes/themeName/jquery.ui.core.css",
                        "~/Content/themes/themeName/jquery.ui.resizable.css",
                        "~/Content/themes/themeName/jquery.ui.selectable.css",
                        "~/Content/themes/themeName/jquery.ui.accordion.css",
                        "~/Content/themes/themeName/jquery.ui.autocomplete.css",
                        "~/Content/themes/themeName/jquery.ui.button.css",
                        "~/Content/themes/themeName/jquery.ui.dialog.css",
                        "~/Content/themes/themeName/jquery.ui.slider.css",
                        "~/Content/themes/themeName/jquery.ui.tabs.css",
                        "~/Content/themes/themeName/jquery.ui.datepicker.css",
                        "~/Content/themes/themeName/jquery.ui.progressbar.css",
                        "~/Content/themes/themeName/jquery.ui.theme.css"));