Here is the hierarchy of my website.
I am trying to set paw.png as my custom cursor.
Here is my code for the custom cursor in main.css.
#body{
cursor: url('Images/paw.png'), auto;
}
I am not sure why it's not working and only the default cursor appears. It would be great if someone could help me fix this issue.
Thanks in advance!
If you intend to apply that cursor to your complete page, you should use the selector body, not #body (which is an id selector)
body{
cursor: url('Images/paw.png'), auto;
}
make sure the URL is right and that you're selecting the right element, also there are some limitations on the size of the image that you can use as a custom cursor.
In Firefox, for example, the limit is 128×128px (Firefox 3.6-3.6.6 on Windows limits this to 32x32px.) so, try to use a 32x32px image to be in the safe zone
for more information: MDN
Well assuming that you have an id="body" on the body tag, you also need to fix the url which should be relative to the .css file and not to the root.
#body{
cursor: url('../Images/paw.png'), auto;
}
Related
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>
I am facing some problems with css priority on my mobile device. The problem is that css id selector push-content is not applying to body element. The weird thing is that it is working on my PC browser.
Code not working for mobile device:
/* space between content and navigation */
div #push-content {
padding-top: 60px;
}
<body id="push-content">
It applied to body element after this:
<body style="padding-top: 60px;">
I don't feel like this is the only way. Any other way to fix this?
at first you have spaces in between the id = "push-content"
change it to
id="push-content"
at second
you have div #push-content while you are applying it to a body tag so change that to body #push-content
It looks like you have an incorrect selector in your css.
div #push-content will select the element with id push-content that's a child of a div. So you cannot apply this to your body.
Use instead:
#push-content {
padding-top: 60px;
}
or even better:
.push-content {
padding-top: 60px;
}
using a class here instead of an id will allow you to use it on more than just one element.
your selector is trying to find #push-content inside a div, not a div called #push content. Remove the space between them.
plus - Body is not a div - So you might need body#push-content instead
This is absolutely terrible. I found the problem. My website is powered by wordpress. I was using the wrong link. Basically, I was hosting the website via XAMP on my local PC for testing purposes. I was using the function bloginfo('stylesheet_url'); which gave me nightmares. The stylesheet was not being linked on my mobile phone. It was returning http://localhost:8080/wordpress/ which is the incorrect link for any other device on LAN so I put the IP there and it worked like a charm. I modified it to http://192.168.1.8:8080/wordpress/ 192.168.1.8 is the IP of source/host computer ( you can find it by opening command console on windows and write "ipconfig" )
NOTE: You should use bloginfo('stylesheet_url'); function. I removed it temporarily because I was testing my website on other devices via LAN with help of XAMP.
Thank you everyone for helping. I really appreciate it.
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html
I have a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!
I'm trying to make a CSS code that changes the cursor to a picture file when the cursor is on a webpage. I've seen sites that give you a simple code to do it but they always have ads. Any codes you guys know that can do this?
Yes, simply apply the following css code to your body tag (assuming you want effect for whole page):
body {
cursor: url('URL to image');
}
Further information:
The image file must be 32x32 or smaller
Internet explorer only supports .cur files
CSS:
html{
cursor: url(URL of pictures)
}
Other Simples:
http://www.html1.freeiz.com/Your_cursor.htmlhttp://jsfiddle.net/wNKcU/5/http://jsfiddle.net/wNKcU/788/
create an HTML element with the cursor image you want and use javascript's onmousemove event to move the cursor.
window.onmousemove= function(e) {cursor.left=e.x;cursor.top=e.y;} //cursor is the HTML element