Disable Scrapeazon iFrame [Wordpress Plugin: Scrapeazon ] - css

I am trying to stylize this frame in the image above on this website here by taking off the scroll bars, both horizontally and vertically, Also, i'm trying to increase the width, but all efforts seems futile.
#scrapeazon-wrapper {
position: relative;
width: 100%;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
}
#scrapeazon-iframe {
width: 100%;
height: 90%;
border: none;
}
nothing over here can be overwritten for some reason?
HTML shortcode for integration on wordpress;
[scrapeazon asin="B074TBRMZK" width="800" height="300" border="false" country="US"]

You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
But, you can edit CSS at Scrapeazon plugin settings.
There are several ways that you can style the scrapeazon-reviews iframe: by editing your theme’s stylesheet, by adding parameters to each shortcode, or by using the plugin’s built-in responsive style sheet.
To style the iframe in your theme’s stylesheet, add classes named scrapeazon-reviews and scrapeazon-api to your stylesheet, then add the width, height, border, and other parameters you want to style to those classes. For example, copy and paste the following into your stylesheet to make the iframe a 540×540 pixel square with no border:
.scrapeazon-reviews {
width: 540px;
height: 540px;
border: none;
}
.scrapeazon-api {
width: 540px;
}
To style the iframe by using the shortcode, add width, height, and border as parameters to the shortcode. For example, to accomplish the same formatting as above in shortcode format, use the following shortcode:
[scrapeazon asin="<your asin>" width="540" height="540" border="false"]
Append a percent (%) symbol to the width and height values if you are specifying your those values in percentages rather than pixels. You can optionally append ‘px’ instead of the percent symbol to use pixels. If you specify digits only, ScrapeAZon will default to pixels.
To style the iframe by using the built-in responsive style sheet (if your site has a responsive design/theme), select the «Use Responsive Style» checkbox on the ScrapeAZon Settings page.

Related

CSS Property View Port Height Not Being Set

There is a main CSS file (style .css) in my WordPress theme. I'm trying to reduce the height of an image banner by reducing the value oh the height: 100vh; to height: 50vh;
I changed it to 50vh but the banner height doesn't change. But when I right-click on Chrome->Inspect and change it there, then it works. Can anybody tell me if it works in the chrome inspect then why doesn't it work in the actual CSS file? Is any other way in which I can reduce the 100vh to 50vh?
You need to add !important to the end of the style.
element {
height: 50vh!important;
}

Remove responsiveness of Images from an id/class

I want to know how to remove the responsiveness of a images from a specific div. I am not using any framework, just a plain CSS that responsifies.
Here's the code for all the images tags:
img { max-width: 100%; height: auto; }
Some how i dont want these styles on a specific Div ID or Class.
How can i do that?
To reset or remove the CSS that previously set by using the default values for the respective styles
Try this CSS:
#specificDiv img {
max-width : none;
height : auto;}
Reference
(Update): added the img tag... that's needed according to the question...

Unable to modify a slider height

I recently bought a parallax template, and I am trying to make a website by modifying the code to my needs. The template I use have a full screen slider at the top of the one page parallax theme, marked as id="home". For some reason, this section is set to 100% height, but I want to change this.
In the template, the original code is as follows:
#home.home-fullscreenslider {
background: url(../images/pattern.png);
position: relative;
overflow: hidden;
height: 100%;
}
And this initiates the slider:
<div id="home" class="home-fullscreenslider">
</div>
I deleted the height of the slider, so now I can fit the images to the screen properly. But the whole section is still at 100% height. I couldn't find any portion of the css code that dictates the height of #home. What do I need to do?

Inject a panel on websites

I would like to inject an iframe on the right side on a website to create a vertical panel. As "panel" I mean : it should be on the right side, cover the full visible height of the page, not be affected by scrolling, but "push" the website content (as opposed to cover).
I tried modifying padding-right on , but it doesn't work on all websites (and only affect non-positionned elements).
It should work on any website with weird layout, e.g. http://orange.jobs/
Injection is not a problem (it's a Chrome extension).
You can do this via css. To cover the full visible height and make the position of this element fixed on the site do:
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100px;
Try not to use
height: 100%;
as this would be rendered differently by every browser. Use top and bottom instead. You can choose a width with percentage or pixel values.
This css code could be applied to every html element.
If there are issues with positioning try to add
display: block;
or
display: inline-block;
I've added a jsFiddle for this.
Update:
To make the panel not cover the sites content, add a margin to e.g. the body tag:
body {
margin-right: 100px;
}
The margin should be the width of your panel. jsFiddle

maximum image width for a wordpress theme (or any theme, really)

In word press, if you upload an image, and let it display in 100%: if it exceeds its containers width, the theme will either:
a) be broken, messing up the layout of the page
or
b) hide the extra width it cant display
This is for a non-fluid layout, of course.
The solution presented here:
http://lorelle.wordpress.com/2006/10/07/the-battle-between-image-width-and-column-width/
p img {
padding: 0;
max-width: 100%;
}
#header, #content, #footer, .widget {
overflow: hidden;
}
what this does, apparently is just making sure the image is displayed under 100% of the width of the objected where it's nested in
And the overflow: hidden is to make the extra bit disappear?
Well, this is not what i am looking for.
I am looking for a way (in css, preferably) to do this:
If image is too big, make it 100% of available width;
If image is not too big, make it its original size.
I've been setting <img width="100%" to solve this problem, but this will bring up problems in a fluid layout, such as the possibility of enlarged images.
edit: Well, apparently, the max-width style should work for the intended purpose. But in the Mystique theme user css of wordpress it's not working, and i cant' figure out why. Probably a conflict between measures taken by the theme itself regardig max-width. y.estamine.net/main/wp-content/themes/mystique/style.css <- somewhere here, i think.
The maximum content width should be set in functions.php. The example below is from Twentyten. This will prevent your large sized images from overflowing.
* Set the content width based on the theme's design and stylesheet.
*
* Used to set the width of images and content. Should be equal to the width the theme
* is designed for, generally via the style.css stylesheet.
*/
if ( ! isset( $content_width ) )
$content_width = 640;
Setting the max-width to a maximum value works for me. For example
div {
width: 500px;
height: 500px;
border: 2px solid black;
}
img {
max-width: 500px;
max-height: 500px;
}
Fiddle http://jsfiddle.net/t29yV/
Setting it to a percentage works too... so you may have something else happening.
Tested in IE7/Chrome/Firefox

Resources