Search jQuery

jQuery Forum

Using a custom theme for list icons

in jQuery Mobile • 10 years ago

I used the theme roller to create a simple colour change of the arrow icons for a list (and hopefully also the plus minus symbols on a collapsible list) but can't seem to get the change to kick in.

My css sheets currently look like this with my colour change one being called 'custom_list_arrows.min.css'

<link rel="stylesheet" type="text/css" href="mobile.css" />
<link rel="stylesheet" href="themes/custom_list_arrows.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

I have uploaded the new css file and referenced it as above but still the icons remain the default grey. any idea what I may be doing wrong?

Replies(5)

mmedia13

Re: Using a custom theme for list icons

10 years ago

Sorted, I read on another thread that when editing an existing swatch as opposed to creating a new one the custom css has to go below the default so the correct working order is this:

<link rel="stylesheet" type="text/css" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="themes/custom_list_arrows.min.css" />

watusiware

Re: Using a custom theme for list icons

10 years ago

Sorted, I read on another thread that when editing an existing swatch as opposed to creating a new one the custom css has to go below the default

That's not correct.

Did you read the documentation on using ThemeRoller?

It tells you how to link the theme in a popup right when you download your theme.

The theme file goes FIRST. You have to use jquery.mobile.structure.css, rather than the standard jquery.mobile.css.

If you have CSS overrides (separate from theme), then those go after the JQM CSS.

To use your theme, add it to the head of your page before the jquery.mobile.structure file, like this:

				
<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 

</head>

mmedia13

Re: Using a custom theme for list icons

10 years ago

Yeah I read the documentation and that didn't work for me.

The change of colour is a css override, I didn't create a new theme and putting it after the default jquery css works for me.

watusiware

Re: Using a custom theme for list icons

10 years ago

We're saying the same thing.

- Theme files always come first

- Then jQuery Mobile CSS - if using a theme, use jquery.mobile.structure.css if not using a theme, use jquery.mobile.css

- Then any CSS overrides

You'd initially said you were doing this with a theme:

I used the theme roller to create a simple colour change of the arrow icons for a list (and hopefully also the plus minus symbols on a collapsible list) but can't seem to get the change to kick in.

mmedia13

Re: Using a custom theme for list icons

10 years ago

Sorry, I didnt mean that I was doing this with a theme. I meant I had edited a current theme.

Top Reply

Response title

Attachments

jQuery Forum

Using a custom theme for list icons

Replies(5)

Re: Using a custom theme for list icons

Re: Using a custom theme for list icons

Re: Using a custom theme for list icons

Re: Using a custom theme for list icons

Re: Using a custom theme for list icons

Statistics

Tags

Actions

Related Posts