0

First off, I'm aware of the jQuery UI ThemeRoller - Installing themes question. However, after consulting it, I continue to have problems.

When I open the index.html included in the installation, I get this (the correct theme): Working custom jQuery UI Theme

However, when I work it into my page, I get the following (default/failed installation): Broken jQuery UI Theme

First off, I don't like the Smoothness theme, and second, the font sizes are several times larger than the font on my page. I've taken both copies of jquery-ui-1.8.18.custom.css (from the css/custom-theme and development-bundle/theme/custom-theme) and copied the custom-theme directory to my styles directory, but it still doesn't work.

Here's what I have so far:

<link href="../styles/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.18.custom.min.js"></script>

And here's my directory tree:

pages/
    page1.html
    page2.html
styles/
    custom-theme/
        images/
            // bunch of files for jQuery UI theme
        jquery-ui-1.8.18.custom.css
    global.css
    reset.css  // note that on the page, this is defined before any other CSS
scripts/
    jquery-ui-1.8.18.custom.js
    // bunch of other custom scripts

Given this, why won't it display correctly?

Community
  • 1
  • 1
Edwin
  • 2,074
  • 1
  • 21
  • 40

1 Answers1

1

Use Firebug to see whether your CSS files are being loaded. If they are being included successfully, use Firebug again to select a DOM element inside the popup and see where the CSS styles are coming from (i.e. which file).

hohner
  • 11,498
  • 8
  • 49
  • 84
  • A) I'm using Chrome, and B) it's loading, according to Chrome/WebKit's Dev Tools. There are no other CSS styles overriding the jQuery UI theme. – Edwin Feb 24 '12 at 23:26
  • Hover over the popup, right click and Inspect Element. Try adding a few `!important` values to CSS properties and see if anything changes. Maybe the native styles in the JS are overriding your own CSS styles? Have you tried placing your CSS `` below the JS ` – hohner Feb 24 '12 at 23:53
  • As far as I'm aware, importing the jQuery UI library doesn't have native styling (and besides, that didn't change anything). And adding the `!important` vales to the relevant properties didn't change anything either. – Edwin Feb 25 '12 at 17:59
  • I can't really do more than speculate at the moment without seeing it. Can you try a jsFiddle? Also, seems stupid to ask, but have you cleaned your cache? – hohner Feb 25 '12 at 18:12
  • For some reason - God knows why - clearing the cache made it work. Thanks for your help. – Edwin Feb 26 '12 at 18:44