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.
Related
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.
I have one solution with web forms approach (soln1) and the other one in MVC 2.0 (soln2). On a page page1.aspx in soln1, I want to render soln2. I used iFrame and in src atribute, I provided starting URL of soln2. Is there any other approach to this? Basically I dont want to use iFrame because of some styling issues.
Thanks
There are three ways (that I can think of) to load one webpage inside another:
IFrame
jquery.load
Frames
Unfortunately all of these options have their problems.
IFrame's can have styling issues as you know.
JQuery's load has compatibility problems with some browsers and an issue with event bubbling.
Frames demands a static layout to your site and probably has the same styling issue for you.
Considering those problems, an IFrame is probably the best choice, it's also specifically intended for the kind of behaviour you're trying to achieve.
Why don't you post about your styling problems, as that might be the easier thing to solve.
Update:
To fix the scroll bars, you can add this attribute to your iframe
scrolling="no"
For an example see here:
http://jsfiddle.net/FZ4eZ/
I know this isn't probably exactly programming related, but I'm building a website on the famous Subtle theme and realized that even on it's demo the search page is broken so if i could get an answer to this it would mean a lot to me and to other's using that theme.
I have the website on the aadress http://work.askonomm.com/rs, please do use search and if you can figure out why it does what it does i would really appreciate it.
The search class in the CSS currently has float:right and width:170px; set.
This is causing at least part of the problem you're seeing. Removing these items brings the page back in to view and positioned centrally.
I am currently using the jQuery autocomplete feature. Functionality wise, it works awesome!
But in terms of styling (in addition to theme roller), I would really like to see something like
http://loopj.com/jquery-tokeninput/ and
http://www.emposha.com/demo/fcbkcomplete/
I am still reading the codes in these plugin, so that I can achieve similar look/behavior. Ideally, I would rather stick with jQuery UI library than switching over to other plugin. How would one go about making this happen?
EVERYTHING in Jquery is style-able via CSS. If you want to achieve a different look, simply build CSS that will override the default styles. If there's a specific style you're trying to achieve, I'm sure quite a few of us would be happy to help with ideas to make them happen.
BTW, the emposa.com site link you provided is completely dead. I'm hoping you're not trying to achieve THAT style....
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