Search jQuery

jQuery Forum

Mobile JQuery theme

in jQuery Mobile • 11 years ago

I'm trying to design a simple mobile website using Mobile JQuery. The color that I'm liking to have in my page is "Green" but we do not have any color scheme similar to this green color is the Swatch, so how do I create a custom theme with green color.

Any help on this regard is highly appreciated.

Thanks.

Replies(4)

markus_fa..

Re: Mobile JQuery theme

11 years ago

http://jquerymobile.com/demos/1.0a4.1/#docs/buttons/../../docs/buttons/../../docs/api/themes.html

nbsp

Re: Mobile JQuery theme

11 years ago

look at the css file of your project there are some lines like the following ones:

.ui-bar-e {
	border: 1px solid 		#F7C942;
	background: 			#fadb4e;
	color: 					#333;
	text-shadow: 0 1px 0 	#fff;
	background-image: -moz-linear-gradient(top, 
							#fceda7, 
							#fadb4e);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fceda7),
		color-stop(1, 		#fadb4e));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')";
}
.ui-bar-e,
.ui-bar-e input,
.ui-bar-e select,
.ui-bar-e textarea,
.ui-bar-d button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-e .ui-link-inherit {
	color: 					#333;
}
.ui-bar-e .ui-link {
	color: 					#2489CE;
	font-weight: bold;
}
.ui-body-e {
	border: 1px solid 		#F7C942;
	color: 					#333333;
	text-shadow: 0 1px 0 	#fff;
	background: 			#faeb9e;
	background-image: -moz-linear-gradient(top, 
							#fff, 
							#faeb9e);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fff),
		color-stop(1, 		#faeb9e));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')";
}
.ui-body-e,
.ui-body-e input,
.ui-body-e select,
.ui-body-e textarea,
.ui-body-e button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-body-e .ui-link-inherit {
	color: 					#333333;
}
.ui-body-e .ui-link {
	color: 					#2489CE;
	font-weight: bold;
}
.ui-btn-up-e {
	border: 1px solid 		#F7C942;
	background: 			#fadb4e;
	font-weight: bold;
	color: 					#333;
	text-shadow: 0 1px 0 	#fff;
	background-image: -moz-linear-gradient(top, 
							#fceda7, 
							#fadb4e);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fceda7),
		color-stop(1, 		#fadb4e));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')";
}
.ui-btn-up-e a.ui-link-inherit {
	color: 					#333;
}
.ui-btn-hover-e {
	border: 1px solid 		#e79952;
	background: 			#fbe26f;
	font-weight: bold;
	color: 					#111;
	text-shadow: 0 1px 1px 	#fff;
	background-image: -moz-linear-gradient(top, 
							#fcf0b5, 
							#fbe26f);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fcf0b5),
		color-stop(1, 		#fbe26f));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')";
}

.ui-btn-hover-e a.ui-link-inherit {
	color: 					#333;
}
.ui-btn-down-e {
	border: 1px solid 		#F7C942;
	background: 			#fceda7;
	font-weight: bold;
	color: 					#111;
	text-shadow: 0 1px 1px 	#ffffff;
	background-image: -moz-linear-gradient(top, 
							#fadb4e, 
							#fceda7);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fadb4e),
		color-stop(1, 		#fceda7));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fadb4e', EndColorStr='#fceda7')";
}
.ui-btn-down-e a.ui-link-inherit {
	color: 					#333;
}
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e {
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
}

just create your own theme by hacking these up, either by editing one of these or making your one

e.g. ui-btn-g (for green) and use it by data-theme="g"

just copy the styles and replace the -es with -gs and change the properties

hope i could help you :)

bkdotcom

Re: Mobile JQuery theme

11 years ago

Does everyone have a recommended CSS editor?
Or is your text-editor of choice, the css editor of choice?

here's two helpful tools: http://css3generator.com/ & http://www.colorzilla.com/gradient-editor/
but fall short of editing per selector and seeing a preview, etc..