Basically my question is as exactly as the title suggest.
I want to override the css styling of Shopify's embedded buy button iframe, but I am not sure how.
I as assuming this will be extremely tricky, if not impossible? As I have tried many things and it seems that all of my css affecting the Shopify's embedded button is ignored.
I have tried adding !important to styling and this doesn't seem to do anything either.
Is there a way to add styling after the iframe has loaded in browser? I am guessing that this is the last thing that loads, hence why my css is being ignored/overwritten.
Any help would be great.
PS. I do not have a website link to provide as it is for a client and a signed NDA has legally prevented me from uploading the site, even in a test environment.
Thanks,
Currently, the only supported customizations are the ones listed here. There's no way to override styles within an iframe on another domain. However, we've built the JS Buy SDK to support greater customization, though it would require more intensive development. That said, there are some examples you could use to get started.
Related
I have searched the site and found a lot of helpful material on the matter however I still cannot get this to work.
I am using a shipping plugin for my e-commerce site and I am simply trying to expand a box but it has an element.style attached and I cannot get any type of override to work, I tried !important and several other things but I cannot figure out what I am missing
Any help would be fantastic, thank you guys so much
element styling help
As I know there is only possible way to do this is with Javascript and only if you are on same domain name as iframe, in other ways its called cross site scripting, and modern browsers block this type to behaviour.
I am using google's audit and its tells me to remove unused CSS. I don't know if that css is for just that page or the whole site. The CSS might be there but not needed on that page but another page. Can someone tell me how this works?
It is telling you to remove unneeded CSS for that page.
However you have rightly pointed out the flaw in this suggestion as it only takes into account the current page (in it's initial state, obviously if you have a pop-out menu it won't gather the CSS for that).
Think of it more as a guideline of making sure you don't send the whole of Bootstrap just for the grid and column layouts for example.
Overall this is very difficult to fix, just use the coverage section on the performance tab in Developer tools to make sure you don't have any massively bloated CSS files and you will be fine.
Obviously reduce your unused CSS if it is easy to do so.
The only other thing that this point covers (in it's description, not as part of it's monitoring) is deferring non-essential CSS.
You should defer any Style Sheets that are not required for rendering 'above the fold' content (and inline your 'above the fold' CSS).
This point is also covered in 'Eliminate Render Blocking Resources' so I never quite get why they add the suggestion under this part as well but I have added it for completeness.
I find this rule was good at guiding me when designing a theme from the ground up as it made me seperate global CSS and page CSS more effectively.
Unless your site is scoring 98 / 100 (or you have hundreds of kilobytes of CSS) and you want to squeeze that last little bit of performance out of the site, simply minify and combine your CSS files and ignore this point.
Google's audit tool compares the entire stylesheet against the current URL and then tells you how much of it is actually not used by the browser.
The browser however still needs to download the entire file and then match all CSS selectors that apply to the current URL.
There are many ways to deal with this, but I find it the easiest to use an external API tool like Splitcss that does this for you on URL basis.
If you have only a few URL patterns in your web application, you can use some CLI tools like purgecss or uncss.
Using a content script, I plan to insert a UI into the page in an <iframe>, but I have a few concerns.
Do people commonly use settings/extensions to block iframes on the page?
If my extension's iframe is blocked, is there a way for me to detect this?
Any other reasons to avoid the use of iframes in this scenario?
There are similar questions on the site, but they don't specifically ask what I want to know.
[The reason I want to use an iframe is this: My extension has to run independently of the website loaded (i.e. on any webpage). Its content script needs to show a UI for settings/help etc. Currently it does so by inserting a div into the page's DOM. However CSS from the webpage gets applied to the extension's UI, something which is harder to fix than one would think. Using an <iframe> seems to a way to avoid this issue.]
As you've discovered, trying to sandbox your CSS from interference, when injecting into the DOM is very difficult without declaratively setting every known style attribute. It's a well documented problem and some solutions can be found in the following posts:
How do I prevent CSS interference in an injected piece of HTML?
Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?
There's nothing fundamentally wrong with dropping your UI it into an <iframe>. I'm not aware of any settings or extension that would block this behaviour.
If your framed UI needs to interact with the DOM on the parent page or a content script you can do so with the use of Window.Parent. Also you may need to consider Same-Origin Policy if your pulling in the UI from another domain.
Answers in order:
People do not commonly use settings/extensions to block iFrames. Rather the opposite; the biggest complaint is how to get content out of iframes placed by ISP's and leach/wrapper sites, etc.
Yes, you can detect if your iFrame is blocked by having your iFrame's JS send an "I've started" message. If the message is not detected, assume the worst. :)
No reasons to avoid iFrames, other than they are a bit of a PITA to work with. If you just need to "show a UI for settings/help etc.", then it might be better to have your extension just open one of the popup window types available to extensions. You control the HTML/CSS/JS of those completely without worry of interference by the page.
What is the easiest way to do it?
I have difficulties to understand and not having now enough time to spend and study Greasemonkey properly, to just apply a PERMANENT css change to ANY website.
I thought that was more easy, to just add a CSS that would stay with the browser. But I do not find any easy/quick tool customization to just add a simple .css file to do my changes.
For example I would like to restyle Twitter, because I hate the new design, It is killing any kind of graphic personalization that I would like to have.
I need it simple, because I want to let people with not high tech knowledge, to be able to get my personalization, implement it and do it as well.
I know that this could have a security issue, but all that I want to do it is add a piece of CSS, and not additional Javascript functionality.
EDIT: Possibly that could work in all the browsers, not only Chrome and Firefox (I know that might not exist, but I would like to have an alternative for people that use IE)
I am an expert web designer, but I am not a programmer. Outside Javascript I do not script anything else.
Install Stylish. Make custom CSS file. Winning.
You're looking for the Stylish extension.
You can add a user stylesheet in several major browsers that will override the site stylesheet. It will require a good working knowledge of CSS though and for firefox you have to create the file manually in your profile.
http://www.squarefree.com/userstyles/user-style-sheets.html
I am working on a Facebook iFrame application, and have a question about styling.
I want the application content to look like the rest of facebook. So the most obvious approach I could think of was to use a stylesheet provided by Facebook for application development that includes such styles. However I cannot seem to find anything about this on developers.facebook.com or any other site for that matter.
I have created some FBML application earlier, and these was able to use Facebook styles directly since the application content was rendrered within the facebook pages. But iframes does not inherit the stylesheet from the parent content (nor should they), so I was wondering how (or possibly if) this can be done.
I have found some posts/blogs that simply tells you to create an application stylesheet that mimics the Facebook look. But I don't think this is a very good idea, as this CSS must be updated every time anything changes on Facebook. It also seems that all facebook wiki pages regarding CSS (which I have used before) has been removed.
The reason I do not want to use FBML Canvas is that Facebook is in the process of deprecating this approach. They recommend new applications to be created using iframes.
http://developers.facebook.com/docs/reference/fbml/
I really hope anyone has any good ideas on this.
There is no official way. For some reason, FB shards their styles to a ridiculous degree. They also change the filename rather than appending a version parameter every time they make a change to prevent downstream caching. Here's an example of todays stylesheets:
http://static.ak.fbcdn.net/rsrc.php/y-/r/40PDtAkbl8D.css
http://b.static.ak.fbcdn.net/rsrc.php/yE/r/u7RMVVYiOcY.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/P-HsvhlyVjJ.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/CFyyRO05F0N.css
http://static.ak.fbcdn.net/rsrc.php/y0/r/k00rCIzSCMA.css
http://b.static.ak.fbcdn.net/rsrc.php/yv/r/BJI6bizfXHL.css
http://b.static.ak.fbcdn.net/rsrc.php/yD/r/rmbhh_xQwEk.css
http://b.static.ak.fbcdn.net/rsrc.php/yn/r/xlsrXFt9-vD.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/Uuokrl6Xv3c.css
http://b.static.ak.fbcdn.net/rsrc.php/y0/r/klTGALEjWM8.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/mlYhlJwnCdr.css
http://b.static.ak.fbcdn.net/rsrc.php/yT/r/uFI2FW2LitH.css
http://b.static.ak.fbcdn.net/rsrc.php/yh/r/5Bzj1255G1S.css
http://b.static.ak.fbcdn.net/rsrc.php/yp/r/5UteuBI1b8_.css
You can automate this process fairly easily using either PHP or .NET using existing solutions Minify and Combiner respectively.
A simpler method would be to use the Web Developer toolbar for Firefox, go to Facebook and choose the Web Developer toolbar option to "view CSS" which will bunch all the CSS up for you. Copy and paste it into your own local stylesheet and you only have to update when Facebook makes a major change.
So while there is no simple way (that I am aware of), there are methods for you take care of it in a fairly speedy manner.