www.webdeveloper.com
Results 1 to 4 of 4

Thread: Custom CSS in Jquery Mobile

Hybrid View

  1. #1
    Join Date
    Apr 2014
    Posts
    4

    Custom CSS in Jquery Mobile

    Hello,

    I used a Jquery Mobile Flipswitch on my webpage, but I want to change the default "On" "Off" text in it. I searched on the Jquery Mobile Demo paged and found this code:

    Code:
    <form>
        <label for="flip-checkbox-2">Flip toggle switch checkbox:</label>
        <input type="checkbox" data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" data-on-text="Light" data-off-text="Dark" data-wrapper-class="custom-label-flipswitch">
    </form>
    This works perfect, but they also say that I need to add an extra CSS style for it:

    Code:
    /* Custom indentations are needed because the length of custom labels differs from
       the length of the standard labels */
    .custom-label-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
        text-indent: -3.4em;
    }
    .custom-label-flipswitch.ui-flipswitch .ui-flipswitch-off {
        text-indent: 0.5em;
    }
    My question is: where do I have to write that extra CSS code into? I use the CDN Jquery file, so it's not possible to add it there...

  2. #2
    Join Date
    Oct 2013
    Posts
    460
    If it's only on that one page you can put it in the <head> like so:
    HTML Code:
    <head>
    <title>blah</title>
    <style>
    /* Custom indentations are needed because the length of custom labels differs from
       the length of the standard labels */
    .custom-label-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
        text-indent: -3.4em;
    }
    .custom-label-flipswitch.ui-flipswitch .ui-flipswitch-off {
        text-indent: 0.5em;
    }
    </style>
    </head>
    <body>
    
    ......

  3. #3
    Join Date
    Apr 2014
    Posts
    4
    Indeed, this works. But what if it's for multiple pages?

    Can I do something like this:

    Code:
    <link href="my_own.css" rel="stylesheet" type="text/css">
    <link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
    ?

  4. #4
    Join Date
    Oct 2013
    Posts
    460
    Yes

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles