On a previous site, I used the excite-bike jQuery UI theme on buttons, and (IMO) they look great:
On my new site (which is now live
here), which started with the same exact code as that previous one, and I just changed what needed to be changed for the new site, it no longer works. The buttons are outsized and generic (select the Media tab at that site to see them).
Yet, I'm still referencing the necessary CSS and jQuery in my _SiteLayout.cshtml file (this is a WebPage project created with WebMatrix and Visual Studio):
-
<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
...which is referenced by Default.cshtml:
-
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Twain Central";
}
-
And I'm using the same jQuery that worked in the previous site to beautify the buttons with the excite-bike theme:
In context:
-
else if (ui.newTab.index() == 3) { // index 3 is Media
$('#MediaContent').load('Content/TwainMedia.html');
$('#MediaContent').css('background-color', '#000000');
$('#MediaContent').css('font-size', '.85em');
$('button').button();
}
-
...but it no longer works (as you can see on the Media tab). Why would that be? What can I do to get back my beautiful blue excite-bike themed buttons?
Note: I thought I found the problem when I noted that the jquery css that was being referenced did not exist diectly beneath \css\excite-bike:
...and thus changed it to this (old commented out):
-
@*<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />*@
<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
-
...but that made no difference. What must I propel myself through headlong to re-achieve the beauteous blue buttons?
Note: the tabs on the site DO sport the exite-bike theme, so...I'm doubly confused, as it works in one place but not in another.