Change Themes of jQuery UI in MVC 4 template

Remond theme as the example

 

Go to below URL:

http://jqueryui.com/themeroller/

Click Gallery to see pre-defined theme templates, choose one that you like and click Download button

Choose the latest stable version

 

Give it a name as Folder Name and click Download

 

Unzip the downloaded file and extract to any temp folder

 

Inside the folder, drill-down to css folder

 

Inside css folder, there is redmond folder which is what we will be using, copy the entire redmond folder

 

Paste into Visual Studio project folder under ~\Content\themes\

 

In BundleConfig.cs, add a bundle item

bundles.Add(new StyleBundle("~/Content/themes/redmond/css").Include(
            "~/Content/themes/redmond/jquery-ui-{version}.custom.css"));

In Create.cshtml, add this bundle style sheet

@Styles.Render("~/Content/themes/redmond/css")

 

Compile and run the application, we will see the color changes:

Datepicker before & after:

 

Dialog & Tabs, before & after:

 

[Important Note]

Actually, the Tabs won’t work correctly without adding following style sheet definition in css file

Don’t forget to add the same code in .min.css file

The code is able to be copied from standard jquery.ui.tabs.css file in base folder

.ui-tabs .ui-tabs-hide { display: none !important; }

Change a Link to become bootstrap button in MVC 4 template

 

Index.cshtml

@Html.ActionLink("Create New", "Create", null, new { @class="btn btn-success"})

 

Site.css

 

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/bootstrap/script").Include(
       "~/Scripts/bootstrap/js/*.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap/style").Include(
       "~/Scripts/bootstrap/css/*.css"));

 

_Layout.cshtml

 

Reference:

http://twitter.github.io/bootstrap/base-css.html#buttons

Change color of navigation bar in MVC 4 template

Bootstrap + jQuery to change color of navigation bar in MVC 4

_Layout.cshtml

1. remove id=”menu” in <ul> tag

2. add class=“nav nav-pills” in <ul> tag

<nav>
    <ul class="nav nav-pills">
        <li><a href="/">Home</a>
        <li><a href="/Home/About">About</a>
        <li><a href="/Home/Contact">Contact</a>
    </li></ul>
</nav>

 

jQuery

$(function () {

    var path = window.location.pathname;

    //Method 1:
    var $a = $('nav ul li a[href="' + path + '"]');
    $a.parents("li:first").addClass("active");

    //Method 2:
    //$("nav ul li a").each(function (index, elem) {
    //    if ($(elem).attr("href") == path) {
    //        $(this).parents("li:first").addClass("active");
    //    }
    //});

});