Skip navigation
TribJenny
TribJenny Calculating status...
Currently Being Moderated

new jquery mobile theme not rendering properly

Feb 25, 2013 1:23 PM

Tags: #jquery #dreamweaver #mobile #css #html5 #cs6 #theme

So I'm finalizing some things on a mobile website that is looking great! m.whitewatertours.com...but we wanted to make a few changes to the theming and used ThemeRoller from jQuery to do so. But after downloading my new theme and applying it to a test page our fabulous looking site now looks like something a 5 yr old created!

 

I replaced the original <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> code in the Head tag with the new ones mentioned below their respective pages...(generated with the "add new css" button from DW6)

 

Here's the orginal page looking great: http://m.whitewatertours.com/rafting-hot-deals.html

 

than the test page with ThemeRoller Theme: http://m.whitewatertours.com/rafting-hot-deals-css-test.html

new code = <link href="jquery-mobile/twt-mobile-theme.css" rel="stylesheet" type="text/css">


Than I tested with a theme created from Fireworks CS6, still looking terrible...

 

test page with FWCS6 theme: http://m.whitewatertours.com/rafting-hot-deals-css-test-fw.html

 

I feel like I must've have done something wrong ... but have triple checked everything I can think of!

 

Jenny

412 Views   3 Replies   Latest reply: Sudarshan Thiagarajan, Feb 26, 2013 8:14 PM
 
Replies
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    1. Sudarshan Thiagarajan,
    Feb 25, 2013 10:45 PM   in reply to TribJenny
    Report

    Jenny, the link to jQuery.mobile css is missing in your new page. Add this before Line 7 (before calling twt-mobile-theme.css)

     

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">

    -ST

     
    |
    Mark as:
  • TribJenny
    Currently Being Moderated
    2. TribJenny,
    Feb 26, 2013 4:19 PM   in reply to Sudarshan Thiagarajan
    Report

    Thanks Sudarshan!

     

    So that did solve part of the problem at first, but was overriding my custom css.

     

    Found there was an extra </script> in the head tag that was screwing up things...

     

    So the css. from Fireworks works!

     

    The css from jQuery ThemeRoller did take a little extra tweaking, did get 2 codes from them one from the file download "index":

    the first code worked with the .min extension so thats what im using

     

    <link rel="stylesheet" href="themes/twt-mobile-theme.min.css" />

     

    and another from the download screen:

      <link rel="stylesheet" href="css/themes/my-custom-theme.css" />

     

    the first code worked with the .min extension so thats what im using

     

    I also ended up creating the "themes" folder within my jquery-mobile folder with all their stuff in there.

     

    Thanks for the help again and getting me pointed in the right direction!!

    Jenny

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    3. Sudarshan Thiagarajan,
    Feb 26, 2013 8:14 PM   in reply to TribJenny
    Report

    You're welcome.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points