Previously, I utilized the jQuery UI to enhance button appearance. However, with this code snippet:
else if (ui.newTab.index() == 3) {
$('#MediaContent').load('Content/TwainMedia.html');
$('#MediaContent').css('background-color', '#000000');
$('button').button();
$("button:not(:ui-button)").button();
}
The buttons are now oversized and unappealing:
Here is a sample of the HTML structure:
<div class="yearBanner">FICTION</div>
<section class="wrapper"><a class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank"><img height="160"
width="107" src="http://ecx.images-amazon.com/images/I/51AxVB0JilL._SL110_.jpg" alt="The Adventures of
Huckleberry Finn book cover"></img></a>
<br/><cite class="nobelTitle">The Adventures of Huckleberry Finn</cite>
<br/>
<br/>
<button><a href="https://rads.stackoverflow.com/amzn/click/com/0448060000" rel="nofollow noreferrer" target="_blank"
rel="nofollow">Hardcover</a>
</button>
<button><a href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank"
rel="nofollow">Paperback</a>
</button>
<br/>
<br/>
<button><a href="https://rads.stackoverflow.com/amzn/click/com/B00L4Q7OA8" rel="nofollow noreferrer" target="_blank"
rel="nofollow">Kindle</a>
</button>
</section>
<section class="wrapper"><a class="floatLeft"
href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank"><img height="160"
width="107" src="http://ecx.images-amazon.com/images/I/51qa7A+vIsL._SL110_.jpg" alt="The Adventures of
Tom Sawyer book cover"></img></a>
<br/><cite class="nobelTitle">The Adventures of Tom Sawyer</cite>
<br/>
<br/>
<button>
<a href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank"
rel="nofollow">Paperback</a>
</button>
<br />
<br />
<button>
<a href="https://rads.stackoverflow.com/amzn/click/com/B008TVDBPI" rel="nofollow noreferrer" target="_blank"
rel="nofollow">Kindle</a>
</button>
<button><a href="https://rads.stackoverflow.com/amzn/click/com/B00BM7ES7G" rel="nofollow noreferrer" target="_blank"
rel="nofollow">Audible</a>
</button>
</section>
In _SiteLayout.cshtml, I include the jQueryUI .js and .css as follows:
<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.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>
How can I revert back to my original smaller and stylish blue jQuery-UI buttons?
Note: The jQuery-UI styling works fine on the tabs, as shown in the screenshot (the desired "excite-bike" theme is applied to the tabs).
UPDATE
My website is now live; however, the buttons on the media tab still lack aesthetic appeal.
You can compare how they appeared on a previous site from which I borrowed code for this one (I essentially copied the entire site to a new directory and made necessary changes):
Once again, here's the jQuery code that successfully styled the buttons using the excite-bike theme in the old site:
$('button').button();
...and I'm referencing jQueryUI like so:
<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>
...(changed "custom.min.css" to "custom.css") but it no longer produces the intended result. What could be causing this issue?