I'm trying to insert recaptcha into a form on my website.
My CSS is overriding the style of the repaptcha widget and making it look awful..
I've narrowed it down to the body div styles below that alter the way recaptcha appears:
#body #content div {
width :960px;
background :transparent url("../images/bg-content-bottom.png");
background-position :center bottom;
background-repeat :no-repeat;
padding-bottom :22px;
}
#body #content div div {
width :860px;
padding :10px 50px 20px 50px;
background :transparent url("../images/bg-content.png");
background-position :center center;
background-repeat :repeat-y;
}
How can i make these stop altering the way the recaptcha appears?
Thank you very much for your time,
James
Using global selectors like this is not good practice for this reason, your div selector is not specific enough and so the styles are being inherited by the captcha code.
See here for some tips on writing better CSS: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
You should be more specific with your style selectors and put classes on your child elements like this:
#body #content .container {
width: 960px;
background: transparent url("../images/bg-content-bottom.png");
background-position: center bottom;
background-repeat: no-repeat;
padding-bottom: 22px;
}
#body #content .container .pageContent {
width: 860px;
padding: 10px 50px 20px 50px;
background: transparent url("../images/bg-content.png");
background-position: center center;
background-repeat: repeat-y;
}
Alternatively, as a quick fix you could overwrite the styles for the captcha, although this is really not an ideal solution as the !important declaration will then cause these to override any further styles to these elements.
#recaptcha_widget_div,
#recaptcha_widget_div div {
width: auto !important;
padding: 0 !important;
background: none !important;
}
#recaptcha_widget_div a {
font-size: 1.0em !important;
}
Use the 'inspect element' feature of your browser to find a unique selector for the recaptcha element. Create a specific css rule for that element, and override the part that is making your display ugly.
Try this css:
#recaptcha_privacy{font-family:helvetica, sans-serif!important;font-size:8pt!important;
#recaptcha_widget_div{padding:0!important;}
The !important may or may not be needed. You can move the recaptcha to the right, to appear where you need it, by adding margin-left to the css for recaptcha_widget_div. However you may have to handle that part differently depending on the width of the user's viewport.
Related
I have this style under element.style ( from a third party library)
the css is inside element.style
normally i just change the css by copying the class and adding my own css with !important , but in this scenario , what to put in my css class .
The first approach, specifying a css class with !important should do the job.
However, When the inline style has !important applied to it as well there is no way you can override it. Then javascript (jQuery eventually) comes in play.
Read this answer for further details: Can I override inline !important?
The white arrow seems to come from an image , so you will need to replace it with another image of green arrow.Overall you seem to be on correct path.
element.style {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
.i-am-a-rider-overrider {
background: green url("https://homepages.cae.wisc.edu/~ece533/images/monarch.png") no-repeat center !important;
}
<div style="background: red url(' https://homepages.cae.wisc.edu/~ece533/images/airplane.png') no-repeat center; height: 300px; width: 300px; display:block; margin:20px;"></div>
<div style="background: red url(' https://homepages.cae.wisc.edu/~ece533/images/airplane.png') no-repeat center; height: 300px; width: 300px; display:block; margin:20px;" class="i-am-a-rider-overrider"></div>
I use ionic 3.
How to add an id to my background?
ion-content {
background-image: url('../assets/imgs/back.png');
background-size: 100%;
background-repeat: no-repeat; }
So I think you're a bit confused, in CSS classes and IDs both act as selectors and can both use the same CSS properties. Meaning it's not usually necessary to have both on an object. There is nothing wrong with having an ID and a class (or multiple classes) it's just not usually necessary.
See this example: https://codepen.io/samandalso/pen/zaPpve
In it we are using an ID and a class on the same div, but you could easily move all of the CSS rules to one or the other and get the same result. The last selector is a child selector, which is saying and div that is a child of a parent with the class "ion-content" give 100px of padding on all four sides and make the color red. Does that help?
/* Individual selectors */
#myID {
background-size: cover;
width: 100vw;
height: 100vh;
}
.ion-content {
background: url(http://via.placeholder.com/100x100) center center;
text-align: center;
}
/* Child selector */
.ion-content div {
color: red;
padding: 100px;
}
I have the folowing HTML:
Wardrobe
Wine
Coffee
This is the relevant CSS:
.home-block {
background-color: #c2b89c; display: block; height: 180px; line-height:180px;
text-align: center; font-size: 70px; color:#e2e2e2;
text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
background-position: center center; box-shadow: 1px 1px 4px #111;
}
My result now looks something like this:
That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:
Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.
So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.
What I have tried is this:
.home-block { background: none; }
.home-block:hover { background: inherit }
but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.
It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:
.home-block {
...
background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
background-position: center center !important; // make it visible
}
http://jsfiddle.net/h2Jbg/
So for normal state you will not see background image but will see backgroud color. On hover you move image back.
Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.
It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.
<div style="background-image: url(http://lorempixel.com/400/200);">
<div class="home-block">Foo</div>
</div>
You could then use something like this in your CSS:
.home-block:hover {
background: transparent;
}
Demo
This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.
Here's the HTML I'm trying to use:
<h1>Order Not Paid<span class="not-paid"></span></h1>
Of course if there is a better way please say so.
Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.
When I place text in the span, the icon shows correctly.
What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):
h1 {
font-size: 24px;
span.not-paid {
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
}
I'd like the icon to appear where the span is.
Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.
<h1>Order Not Paid <img src="#Url.Content("~/Public/images/remove.png")" alt="" /></h1>
If the icon is small and not reused anywhere else just set it as part of the h1.
HTML:
<h1 class="not-paid">Order Not Paid</h1>
CSS:
h1.not-paid {
font-size: 24px;
padding:0 16px 0 0; /* whatever the dimensions the image needs */
background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}
A little cleaner this way.
the background image is not showing up because the span has no width, and therefore is not showing any of the background.
also, the snippet you gave is not valid css.
try something like this, assuming the image is 16px by 16px:
h1 {
font-size: 24px;
}
span.not-paid {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
The display: inline-block; is to make it so the width will apply. The vertical-align is to center the image on the middle of the line.
All of that said, the <img> tag solution would work too, but it doesn't scale well to a lot of similar images. The css-based solution makes it easier to switch to something like css spriting later.
In either case, you'll probably want to change your direct image urls to relative urls before expecting this page to work in a production environment.
I'm pretty sure that you need to give the span some width. By default it has none, so of course no background image will be seen.
First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.
h1 {
font- size: 24px;
}
h1 span.not-paid {
width: 50px;
height: 50px;
display: inline-block;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.