-1

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

DotnetSparrow
  • 27,428
  • 62
  • 183
  • 316

1 Answers1

0

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"));
Qpirate
  • 2,078
  • 1
  • 29
  • 41
  • I want jquery.ui.dialog to use my stylesheet. – DotnetSparrow Jan 25 '13 at 12:20
  • then have a look at this question http://stackoverflow.com/q/988078/801241 – Qpirate Jan 25 '13 at 12:21
  • Do I need to create a copy of all above mentioned css files and then use my colors fonts etc ? and what is role of bundlers here ? I am using asp.net MVC 2 – DotnetSparrow Jan 25 '13 at 12:22
  • the theme roller will give you each of these files, but it should also give you the jquery.ui.complete.css file also. the link i sent to you will help you with how to use each theme differently. it involves prefixing your HTML elelments with the theme name you specify – Qpirate Jan 25 '13 at 12:24
  • Thanks for the quick response. Do I need to upload my css at http://jqueryui.com/themeroller/ and it will modify it or I need to change my html ? and css doesnt need to be changed. I see that http://jqueryui.com/themeroller/ can be used to create a custom css but I have a css for whole wbsite and I want to apply it to jquery ui-dialog – DotnetSparrow Jan 25 '13 at 12:31
  • if you have your custom CSS then just make sure that the reference for that CSS is after the reference for the JQUery UI CSS and then just add your classes to the html directly. the inheritance nature of CSS should take care of itself. but without an actual layout of the full page html i cannot help further. im only guessing. if you provide a JSFiddle it would be great – Qpirate Jan 25 '13 at 12:35
  • Thanks for the suggestion. Ok I will add reference to my css after the jquery ui css. but my stylesheet must have style names same as jquery ui css ? and which class names do I need to add to html in case I am creating a dialog – DotnetSparrow Jan 25 '13 at 12:40
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23371/discussion-between-qpirate-and-dotnetsparrow) – Qpirate Jan 25 '13 at 12:40