Iphone style on button not overwriting - iphone

i have some styling on the more button http://www.mw-app.cp.thedms.co.uk/thedms.aspx?dms=106 ( http://bit.ly/ArzcYi for faster typing) here, on all browsers and phones it looks how i want.
However on the iPhone its still seems to be pulling default styles (which are internalally set up styles) through and looks like this http://i.imgur.com/Piv3E.jpg and for the life of my i cant figure out why it is overwriting. Hope someone can shed some light on it.
Thanks in advance

You will need this is your CSS for the button.
-webkit-appearance: none;
Think vitamin has a great article on this topic. Cheers
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/

Related

Ionic 3 Error - fullscreen and ion-refresher don't work together

After adding fullscreen to my ion-content, my ion-refresher is no longer visible. Changing CSS is every way possible doesn't help. I've found this post https://github.com/ionic-team/ionic/issues/10490, which seems to indicate that this is a genuine Ionic bug, but it's been almost a year and so far I couldn't find anything else on this: https://github.com/ionic-team/ionic/issues/10490
Does anyone know a workaround? Or any advice will be highly appreciated.

Facebook like box is suddenly right-aligned

I manage/webmaster half a dozen websites that have facebook like boxes on their index pages. These were all working fine until yesterday, when suddenly they all began to display to the right of the page (where previously they had been centered). No changes have been made to any of these pages in the last day or two, so I can't think of any reason why they would all suddenly right-align.
Some of these scripts are between "center" tags, Others are inside centered tables. But they're still displaying to the right of the page. I've tried everything I can think of to get them to display in the middle of the page again, but nothing I've tried works. I'm also curious to know why they would all suddenly lose their center alignment.
Anyone have any ideas?
Any help would be very much appreciated.
You can see an example of what I'm talking about at holisticspain-dot-net
.fb-like-box.fb_iframe_widget *
{
text-align: left !important;
}
This worked as a temporary fix as well.
We already apply some styling to our button (it is surrounded in <li> tags, but we found we had to change the style for this.
We previously had this style applied
.fb-tool {position:relative;left:8px;}
We changed it to this.
.fb-tool {position:relative;left:8px; text-align:left;}
Just a short answer - might help perhaps. I changed the display property of .fb_iframe_widget to relative with !important and it fixed the sudden leftiness.
Following Harold Neal and Sergei S's suggestions, you can add text-align:left; to the default style="background-color:#000000;" portion of the tag.

Get rid of Spry Accordion bluebox

I have two questions. First I am using a spry accordion for this website I'm designing, however its the fist time I've used it so I wanted to know how to turn off the blue box that surrounds it everytime you press on it. Does anyone know? I tried to revise the css but I know its not in there.
My second question is how do I make all the tabs closed when you open the website?
Here is the example of the website, I think it will make it easier to visualize.
Spry Panel Example
Thanks!
Sophie
It actually seems to have nothing to do with spry, what I'd do is add this to your CSS:
.Accordion {
border:none;
outline:none;
}
I figured it out, you actually need to erase the tab index at the beginning of the accordion html code:
<div id="Accordion1" class="Accordion" tabindex="0">
Actually none of the above worked for me, what you have to do is instead of saying border and outline NONE it works best if you apply the background colour. so instead of trying to get rid of it - disguise it. works a treat

Custom skin for facebook like button

Is there an (easy) way to customise the look of the facebook like button implemented via fbml?
I am pretty sure I saw this somewhere, but I cant remember where and I cant find any documentation on this.
You don't need to make these illegal hacking. Just use the "Open Graph": https://developers.facebook.com/docs/opengraph/actions/builtin/likes/. The downside is you need to create an app.
Are you guys lawyers or programmers? the question was HOW not '...to do or not to do...'.
#pixelistik button can be inserted either via script tag or iframe and of course you can use css with iframe just via JS, easy peasy.
#skrat good point!
#Slavic what service exactly? I call it half-service because you can like only - no place for criticism so... your criticism is not proper. Like our posts! :P
generally: if you create custom button and you didn't sign to any t&c or something like that you can do whatever you want on YOUR webpage.
Although it may not even be legal to do so (check the terms and policies for yourself), you could do something like:
/* Like button main text color */
div.like span.connect_widget_text {color:#fff;}
div.like div.connect_widget_confirmation {color:#fff;}
div.like span.connect_widget_text a {color:#ffc6ff;}
This link shows some mild styling options:
http://forum.developers.facebook.net/viewtopic.php?pid=236534
Easy peasy:
Simply set the opacity (filter for ie) to 0 and put the iframes over an image or div with a bg image. For bigger buttons simply load in multiple like buttons, don't load in too many this will make your page unbearable slow.
Hiya, you can do it with some smart CSS - http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/
Although the legality of such edits is under question, I just wanted to share my findings on this subject.
I right clicked on a FB Like button in Firefox, and inspected the element with firebug. The readout of the class elements is:
.connect_widget_like_button .liketext {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png) -1px -33px no-repeat;
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: -1px;
background-position-y: -33px;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
This exists on line 172 of like.php
One company I know of that does use a custom like graphic is Disqus, however their button is a multi-functional element that offers you a choice between facebook & twitter onClick, which may be how they were able to customize it to their needs.

How to Create the Highlight/Note Popup Buttons from the iPhone Kindle

I am wondering how Amazon did the highlight/note popup buttons in the Kindle app. After reading about UIPasteboard, UIMenuController, UIResponder, and UIResponderStandardEditActions, I am able to turn on or off standard edit actions (i.e. copy, cut, paste, select, and selectAll). However I haven't found a way to add a custom action yet. I would really appreciate it if I could get a pointer.
Thanks in advance!
Chris
(source: sampletheweb.com)
Edited by balexandre (added image instead link)
It looks like Amazon implemented their own custom view that mimicked the appearance of UIMenuController. I believe they did this rather than use SPI because if you click and hold on the Highlight cell, the arrow does not highlight, when it does in the real UIMenuController.
I don’t think there is a public interface to these controls, you’d probably have to code them yourself. (Or maybe figure out the private API, but that’s a slippery slope.) I am not sure about that, though, maybe somebody will prove me wrong.
That's a good point about the arrow part of the Notes/Highlight popup menu not highlighting, so they must be implementing their own.
However they are also obviously using a UIWebView, because it's recognizing tap and hold and they can highlight the text, and you can't get touch events from a UIWebView, much less get the information about what's selected. So how are they doing that?
This would be very useful for us to be able to do as well.
Use DTMenuController http://www.drobnik.com/touch/2010/01/dr-touchs-parts-store/
Costs 100 EUR ^_^
Custom menu items can be added via the UIMenuController's menuItems property. See Apple's UIMenuController docs.
the javascript part can be managed with jQuery, that's a fair simple and powerful library. i'm using it for resizing and rearranging things in a webview and it works great :)