jqueryjquery-uithemeroller

Themeroller (v1.11.4) not applying to page

I'm using jquery-ui to make a themeroller theme that will be used by a webpage tool. Problem is, is that the theme isn't applying to the page even though the inline-styling is. I've been through the instructions here and here which are confusing me slightly more. The first talks about one line being added to the <head> tag, while the second talks about two extra. It sounds to me like the two extra lines are for adding functionality and the first is for themeing the page.

I was digging around their changelogs and saw that the naming conventions and file structure of custom and prebuilt themes has changed as of version 1.11.0. Probably related to that, I've yet to find any posts here (or elsewhere) reflecting the new changes and what that means for implementing it.

I've tried using locally downloaded versions of everything on my computer as well as the CDN version hosted by google, neither have applied at all.

If there's some stupid error that I've made or something I missed in the documentation, I'd be fine with whoever answers this pushing me in the right direction as opposed to answering it outright. Otherwise, I'm stuck and need some help.

(also for what it's worth this is my first time ever working with css and jquery)

This is what I have.

File Structure Layout:

Test
  |-external
    |-jquery
      |-jquery.js (Source said v1.10.2)
  |-images
    |- a whole bunch of png files
  |-index.html
  |-jquery-ui.css
  |-jquery-ui.js
  |-jquery-ui.structure.css
  |-jquery-ui.theme.css
There are minified versions of the css and js files as well

My <head>:

 <head>
    <title>Decision</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" href='jquery-ui.css' rel='stylesheet'>
    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <style>
        body{
            font: 62.5% "Segoe UI", sans-serif;
            margin: 50px;
        }
        .demoHeaders {
            margin-top: 2em;
        }
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog-link span.ui-icon {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #icons {
            margin: 0;
            padding: 0;
        }
        #icons li {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        #icons span.ui-icon {
            float: left;
            margin: 0 4px;
        }
        .fakewindowcontain .ui-widget-overlay {
            position: absolute;
        }
        select {
            width: 200px;
        }
    </style>

</head>

and the bottom of my <body>

<script>
$( "#accordion" ).accordion();



var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];
$( "#autocomplete" ).autocomplete({
    source: availableTags
});



$( "#button" ).button();
$( "#radioset" ).buttonset();



$( "#tabs" ).tabs();



$( "#dialog" ).dialog({
    autoOpen: false,
    width: 400,
    buttons: [
        {
            text: "Ok",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});

// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
    $( "#dialog" ).dialog( "open" );
    event.preventDefault();
});



$( "#datepicker" ).datepicker({
    inline: true
});



$( "#slider" ).slider({
    range: true,
    values: [ 17, 67 ]
});



$( "#progressbar" ).progressbar({
    value: 20
});



$( "#spinner" ).spinner();



$( "#menu" ).menu();



$( "#tooltip" ).tooltip();



$( "#selectmenu" ).selectmenu();


// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
    function() {
        $( this ).addClass( "ui-state-hover" );
    },
    function() {
        $( this ).removeClass( "ui-state-hover" );
    }
);

Solution

  • So, like usual the answer was simple and I was being stupid.

    I wasn't referring to my elements by their id correctly. I thought importing the themeroller theme would automatically theme the page, but you have to make sure your elements are referred to in the script at the bottom of the body.

    For example, I had:

    <button id="myButton"></button>
...
$(#button).button({
    label: "ClickMe"
});

    and the button would show up with no name, and not themed. I needed to reference the id correctly like so:

    <button id="myButton"></button>
...
$(#myButton).button({
    label: "ClickMe"
});