Is there a way to make Top Bar background absolutely transparent? I'd like the page title to be visible along with buttons but make the rest completely invisible? Anything I can do with the appearance API?
that's something that i was looking into and it seems like it has to do with the meta tag in the beginning of the page
i found out that if your using
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
then you have a transparent background, only with white text and icons, there's no way to change it into black/dark text to fit into anyones CSS.
also you have an issue where the top of the page is right at the pixel line of the iOS 7 device.
which is retarded
i've been doing tests on here
Related
I have reskinned http://peggywho.com with a fixed background in Tumblr. However, as I am adding posts to the website, the mobile view in ipad and iphone doesn't allow the background to stretch across the page. It has black space at the top and bottom (I'm unable to add an image as I am new here)
custom CSS for the background is as follows:
body {
margin-top:15px;
background-position:center center;
background-image:url('https://dl.dropboxusercontent.com/u/2633376/PS_web_BG_01.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
I am relatively new to coding so still learning my way around. Is there anything to add to the HTML or CSS that would allow mobile viewing to replicate the website, which looks the way I want it to look?
Thanks in advance
Prnt screen of the problem
Hi there, I need some advice. As you can see in the image, I have iframe on my website (width 220px) and space within the box is not fully used. I can see margin on the right side (red arrows), where the scroll bar is.
I need to stretch out the content into the full width of the box. (Delete the space between the arrows)
Can I do something about that? Is that a FB bug?
THX for advices.
It looks like the word „labyrinth” would not really fit on the line where your arrows are – if so, then there’s no „bug” at all, it’s just automatic line breaking as is totally common in HTML displaying.
Here is a screen shot to show exactly what I mean:
The green vertical line on the right image shows the space that appears when viewed on iPhone Safari. I don't think this has anything to do with Safari since I've seen other websites without that space. Is this something wrong with the css? If so, what's the problem?
The actual site is shown in the address bar of the image if viewing the site live helps.
Try changing the width of this div element to this...
#tweet-bar-content {
width: 970px;
}
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.
How do I replicate the effect that the app launcher uses on a square .png to show my users what their icon will look like as an app badge.
NB - I want to do this in code on the iPhone, not in photoshop on my computer.
Thanks!
edit: trying to be really clear here. How do I do this with code!
I have tried creating an overlay, but the shine apple does actually brightens the top, so just putting a png over the top will not give the same effect.
Presumably the app launcher applies some CA effects - does anyone know how to duplicate them???
Create a transparent shine overlay in Photoshop on your computer and merge the two images in code.
Short of hard-coding the shine mask, or building a mini ray-tracer, that's probably the easiest way to do it.
There's even a link to a photoshop tutorial/template here:
http://www.keepthewebweird.com/iphone-icon-psd-template/
Another more simple approach is to save your icon as a 57px x 57px PNG called "icon.png" without any shine effects, then FTP it to the root folder of a web server and create a file there called icon_test.html containing the following code:
<html>
<head>
<link rel="apple-touch-icon" href="/icon.png"/>
<title>The App Name</title>
</head>
<body>
iPhone test page
</body>
</html>
Then just browse to the icon_test.html file in mobile Safari on your iPhone, tap the "+" button in the toolbar to save the page as a bookmark, tap "Add to Home Screen", and tap "Add" in the top right. You'll then see your icon appear on the home screen, complete with Apple's shine overlay.