I am new to DNN and jQuery.

I want to use jQuery UI themes (like the ones made with jQuery UI Roller http://jqueryui.com/themeroller/). I guess this would be implemented in the skin, but I have no clue where to start.

I bought the following skin thinking that it would have some default jQuery theme, but it doesn't seem to:

http://store.dotnetnuke.com/home/product-details/%28dnn456%29-dark-blue-business-w3c-standard-xhtml-compliant-skin-062-%28with-slider-module%29

I want to use jQuery UI buttons, as an example, but the best I can get when I try is the DNN buttons. How can I use/create something different? Where do I put my custom themes/css? How do I create the button? Is it just a matter matter of setting the html element's class="myStyle button" or what? I am also writing a DNN module so are there any naming conventions that I should be aware of so that my module's components can automatically pickup the jQuery styles of any DNN skin?

Hi Kevin,

I am starting to experiment with creating a mobile skin for DNN 6.1.5 with jQuery UI and I am getting some strange results.  I can edit the content box - I have added text - but it only shows up when I am in edit mode. When I am not logged in or in view mode the text does not show up. When I added the text and clicked save it took a long time and then remained at the open text editor - so I know if did not fully work correctly.

Here is what I have in my skin file - do you have any advice?

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<div data-role="page" id="jq1" >
     <div data-role="header">
        <a href="cancel" data-icon="delete">Cancel</a>
        <h1><img src="ArukorLogo.png" /></h1>
        <a href="save" data-icon="check" data-theme="b">Save</a>
    </div>
    <div data-role="content">
          <div id="ContentPane" class="ContentPane" runat="server" visible="false"></div>
    </div>
    <div data-role="footer" data-id="main" position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
                <li><a href="#help" data-icon="alert">Help</a></li>
            </ul>
        </div>
    </div>
</div>

Hi Judy,

If you're still having this problem, sounds like you need to set the page permissions so that everyone can view the page even if you are not logged in or in edit mode.

Also, I'm not sure how it's being added, but this line:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

could cause a conflict because jQuery is already installed by DNN 6; if more than one reference is made to jQuery, it can cause a lot of problems.