I have created a mobile website using the JQM themeroller
http://yellowgreenmedia.info/1/
Now i have tried everything i know to ad a background image, but no matter how i try, it doesn't wanna show up....
What is the best way to get a background image to show up?
Thanks
dave
I'm doing it like this:
body.ui-mobile-viewport,div.ui-mobile-viewport {
background-color: transparent;
background-image: url("your_image_URL");
}
I am going to guess its a CSS property that has background image set.
Related
I have used Jquery Mobile. I have added background image like this<body background ="6.jpg">.
I want to make background image responsive. What process should i follow to make it responsive? Please Suggest.
Update
I have tried using this
body {
background: url(6.jpg) ;
background-size:cover;
}
.ui-page {
background: transparent;
background-repeat: no-repeat;
}
.ui-content{
background: transparent;
}
followed this link Stacjoverflow
but failed. Width of the image is responsive but height is getting too smaller than the original image.
You can working for example with this: http://jquerypicture.com/
The important think is (generell for responsive) you must working with media queries.
PS: Instead of seeting the background in the body tag, please use a class for this.
I recently launched a landing page for a new website. But on iOS, the inputs fields are ignoring the padding of the container and the subscribe button looks completely different. How can I fix this?
View the landing page: signup.sketchtricks.com
Screenshot on iOS: cl.ly/image/0y0P0m0J3a3X
Thank you for your help, I really appreciate it!
Add...
-webkit-appearance: none;
border-radius: 0;
...to the affected selectors in your css.
On my iphone phonegap app, whenever I've got text on a background color, the text seems to get a ghosting effect, the same text is repeated 2 or 3 pixels below, almost like a drop shadow but exactly below and in the same color as the text.
Any ideas how to get rid of this? I'm guessing its applying some kind of -webkit specific styling but I can't seem to find what it is.
Below is an image of what is happening, the text to the left, 'Web Deal' is the problem, whereas the text on the right is fine.
Ok, I managed to fix this, it was picking up a text-shadow property from jquery mobile css. It was applying it to all text but because its white it was only visible on text with a background colour. Thanks for your help
Please post your css.
If you are able to open the app on Chrome browser on a desktop, try inspect element and you can find which styles are applied to the text.
As you didn't provide any CSS I'll just assume that your text ist rendered bold.
Rendering bold type in mobile Safari or the WebView is buggy and causes the weird effect.
Try using a text-shadow instead.
.bold {
//font-weight: bold;
text-shadow: 0 0 0 2px white;
}
I recently upgraded our mobile application to use JQM 1.1.1, and noticed a very big problem on Blackberry 6 browsers.
The screenshots tell the story best.
In the first image you'll see the search text box rendered correctly.
However in the second image you'll see that when the input text box is focused, it makes the textbox black
Please see my screenshots:
Has anyone seen this issue?
I had the same problem, and fixed it with css like this:
input.ui-focus, textarea.ui-focus {
outline: none;
-webkit-box-shadow: none;
}
Thank you for your answer.
From my side, I had to set css to:
.ui-btn.ui-focus, .ui-input-text.ui-focus, ui-input-search.ui-focus
Hope it will help!
I'm learning about the Framework Icons in jQuery UI.
<span class="ui-icon ui-icon-circle-minus"></span>
produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).
Q: How can I make one jQueryUI icon be red and another one another color?
<span class="ui-icon ui-icon-circle-plus"></span>
I'd like to make this one green.
Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.
For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.
You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.
You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.
It should look like this:
.ui-icon-circle-plus { background-position: 0 -192px; }
It would need to look something like this:
.ui-icon-circle-plus {
background-image: url(RedIcons.png);
background-position: 0 -192px;
}
You can look at the .ui-icon styles for the image it's currently using.