pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
Related
I need help on how to make CSS styles final so that they could not be overwritten by Javascript.
Problem: Sometimes, because of the img tag in the JavaScript code, everything, (all styles of all of the images) gets overwritten.
Here is my code:
<img src='logoImg' style='width:45px; height:30px;' >
Please tell me ways to do this in JavaScript or in CSS itself.
Desired output: I need the Logo Image to have final styling. So it is not affected by JavaScript through the DOM (document object model).
You can try adding !important keyword to your CSS properties to prevent them from getting changed.
Example
const test = document.getElementById("test");
// The color won't change to orange
// due to !important keyword in the CSS code
test.style.backgroundColor = "orange";
#test {
width: 50px;
height: 50px;
background: green !important;
}
<div id="test"></div>
Ideally though it would be better to work around this using a different solution like using a more specific method of selecting an HTML element and changing it's properties.
If you have some kind of a style applied by selecting a tag, you can override it by using a class or an id when it comes to CSS. If you're searching for elements in JavaScript code, you can look for them by a class name or an id value instead.
An alternative solution in your case would be to re-write/modify the JavaScript code that targets your img tags and either skip images that have a specific class like let's say logo, or make a custom class for all your standard images that do not include your logo element and look them up in your JavaScript code using document.getElementsByClassName method.
If you want to prevent JS to overwrite the style of an image, you need to style it in CSS and add important; to raise it specificty weight. !important has a higher specificty weight then inline-style and as such JS style (JS add the style as inline-style) wont apply.
function resize() {
document.querySelector("img").style.height = "200px";
document.querySelector("img").style.width = "200px";
}
img.test {
width: 45px !important;
height: 30px !important;
}
<img src='https://via.placeholder.com/200x200.jpg' class="test">
<button onclick="resize()">Test</button>
sorry for this trivial question, but i just don't get it. I would like to set the witdh of this image:
<img class='icon weather/mostlycloudy'
src="/fhem/images/default/weather/mostlycloudy.png" alt="mostlycloudy"
title="mostlycloudy">
I've tried things like
[class~="weather"] {
witdh:50px;
}
.img.icon {
witdh:50px;
}
and everything I could imagine, but the width attribute never appears if I check it with chromes inspect tool. I'm sure that I edit the correct .css file, because I can see the influence for other elements of that page. I surely am no html or css expert and maybe a bit dumb... Could you please help me?
There are 2 errors in your code.
First, the selector. img is an HTML element and therefore should not be prefixed with a . as it was a class name. (unless you're having a class named img).
.img.icon {
Should be:
img.icon {
Second, you wrote witdh instead of width. You've should notice that in the inspector this property has been marked with a ! as there's a mistake.
img.icon {
width:50px; //not wi**td**h
}
https://jsfiddle.net/zmztezc2/
img.icon (selecting the img element type) rather than .img.icon (which looks for a class containing img) should do the trick.
If you're looking to match any class starting with weather/, then I suggest [class*="weather/"].
You can't use "/" in class name.
<img class='icon weather mostlycloudy' ...>
img.weather {
witdh:50px;
}
img is tag, so you dont use coma before it. icon is class, so before class you use coma
img.icon
Little change in your code
[class~="weather"] {
width:50px;
}
img.icon {
width:50px;
}
I have an issue where, ocassionally, when I set a background image on an HTML element it displays a completely random image that is also set as a background image elsewhere on the page.
For example, I have a list item that has a background image "myimage-abc.jpg".
I also have a div with a background image of "myimage-123.jpg". Everything is as expected for most people however for some Apple users (of which my Managing Director is one) the image "myimage-123.jpg" shows up on the list item as well as the div.
Has anyone else had this issue before? Any ideas how to get around it?
Thanks
Use inspect element on the element with incorrect background image and see which CSS selectors are overriding the background image that you want to have.
Then report back with the CSS selectors responsible for styling the elements in here. Keep in mind that CSS selectors are very particular about the way in which you use them.
Until then here's something that could be causing your problem, without my knowing your current CSS state.
From an answer on another question:
I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.
In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:
body .test-parent .test-child {
color: red;
}
body .test-parent .test-child {
color: blue;
}
The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.
However if we declare the following:
body .test-parent-two .test-child-two {
color: red;
}
body .test-child-two {
color: blue;
}
Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.
The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.
Hope that also helps!
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.