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>
Related
My problem is that it doesn't replace the logo itself, I have been trying to solve this problem for a few days now during some of my spare time (I am new, hence why it has been so long).
Not sure how to solve this problem.
Code and Image below to provide more detail:
.navbar-brand {
width:200px;
height:200px;
box-sizing:border-box;
padding-left: 200px;
/*width of the image*/
background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}
The first R logo is supposed to replace the second R logo, instead it creates a separate one
Without seeing your HTML my guess is there is a child element inside .navbar-brand. So when you add the background image and padding-left you are making room for your new logo but the old one is still there.
If you inspect the logo area I bet you have an img element, another element, or a pseudo element that you have to style or hide like one of these:
Style:
.navbar-brand .some-other-element-class {
width: 200px;
height: 200px;
box-sizing: border-box;
padding-left: 200px;
/*width of the image*/
background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}
Hide:
.navbar-brand img {
display: none;
}
.navbar-brand::after {
display: none;
}
Edit
I think you're site is https://www.rolimons.com/ based on the image url, if so then my assumption that there is an img tag as a child of .navbar-brand is correct.
If you want the "new" logo to replace the old one you can use the hide technique above, BUT replacing the img src would probably be the better path forward if you can change that.
If You want to replace the logo with CSS you can hide the old logo image and set the new logo image as a background image.
<div id="logo_outer">
<img src="Logo.png">
</div>
<Style>
#logo_outer {
width: 200px;
height: 200px;
background-image: url(img url );
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#logo_outer img {
display: none;
}
</style>
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'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.
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;
}
I am writing a CSS stylesheet to add a background image to a div identified by its class name as follows:
.scrollingResultsContainer
{
background-image: url(https://mdl0133/widget/Images/gradient.gif);
background-repeat: repeat-x;
background-attachment: fixed;
color:#FFFFFF;
}
This works fine except I have one particular situation where I do not want the image to appear in the scrollingResultsContainer. How can I specify that the image should be applied except when the scrollingResultsContainer happens to contain a div with a particular id?
Unfortunately, I am unable to amend the markup to prevent this situation from occurring.
I was wondering if it can be done using CSS3 selectors.
You can't do this with CSS. A parent selector has been proposed many times but is always rejected because apparently it's just too hard to code or something:
http://www.css3.info/shaun-inman-proposes-css-qualified-selectors/
You'll have to use javascript I'm afraid.
CSS4 might make this possible in the future, see http://davidwalsh.name/css4-preview.
Over-ride it in the CSS if you know the ID in advance.
.scrollingResultsContainer {
font-size: 200%;
}
#id_of_div {
font-size: normal;
}
If the only thing you want to do is prevent the image from showing up, this is fairly simple with CSS. You can use the ::before pseudo-element on the child <div> to cover the image and z-index to get the layers right.
Demo:
Output:
CSS:
.scrollingResultsContainer {
background-image: url( 'http://placekitten.com/100' );
border: 1px solid black;
display: inline-block;
height: 100px;
position: relative;
vertical-align: top;
width: 100px;
z-index: -2;
}
.dont-show::before {
background-color: white;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: -1;
}
HTML:
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer">
<div class="dont-show">don't show</div>
</div>
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer"></div>