I'm trying to change cursor mouse on my website with custom images.
Here is my actual CSS:
<style type="text/css">
<!--
body {
cursor:url(images/default.cur),auto;
}
a:hover {
cursor: url(images/hover.cur),auto;
}
a:active {
cursor: url(images/wait.ani),auto;
}
-->
</style>
Firefox 3.5.6 does change the default cursor with my .cur file but the problem is that .ani cursor doesn't work with Firefox (and even .gif). It does work on IE.
The cursor files I'm using can be found here.
The other problem is that I'm just changing a:active image to animate my cursor but it disappear fast.
I would like to change cursor when we click to go to some page and the cursor to become "normal" once this page is loaded.
What I'm looking to is a way to change cursor when somebody clicks on some internal links of my website.
I wouldn't have to change all my links to do this, but it doesn't seem to work.
I thought about some window.onload JavaScript but I didn't achieve to write it and there might be better ways.
Thanks for your CSS or JavaScript suggestions.
Please don't give design feedback when asked for programming solutions. It is not the role of developers to pass back design critique. It may not be his decision, it may not work but he wants to try it and we should help. If you've been in an environment where programmers pass critical judgement on every design decision you'll realize its very destructive for the whole team. Designers and team members will value you a lot higher if you refrain from commenting on whether or not you agree with what they want to do unless asked. I hope if you think about it you will understand why its important.
Don't. How would you like it if you went to your friend's myspace page and your cursor suddenly turned into a big purple dragon and you had no idea where it was actually pointing.
It's jarring to the user, therefore irritation. If you want to let them know something is working in the background use an animated gif displayed over the page, not as the cursor.
If you have too, you may be able to set it with javascript on all your the elements on the page. I don't think it cascades. If it does, just set it on body and be done with it.
if using ASP, it simplifies things a bit to use resolve url... ie
cursor:url('\<\%\=ResolveUrl("~/img/magnify.cur")\%\>');
Evidently I'm inclined to agree with the other statements, as familiarity is key in any good design, customizing an environment to such a degree that the user feels either unfamiliar with it or under the impression that somehow their system is altered,is a bad bad bad design and reflects poorly on the designer as well. I'm not saying be dull in design, but be a tad reserved.
I might not like MetroUI (rather Metro Web Design) much, but I love it's root,the design concept of "Bauhaus".
"There is beauty in simplicity."
Related
I'm implementing a dark theme on my website using tailwind classes. For example:
<tr className="bg-white dark:bg-dark-blue text-left dark:text-white transition-colors duration-300"></>
And for some reason, whenever I change my theme the transition isn't smooth but laggy and stuttering. I've noticed that with the increase of dark-styled elements on the page, the lag has gotten worse.
I'm not sure if this is actually a tailwind problem or a general CSS performance problem in the browser.
UPDATE
After some test I've come to the conclusion that it actually has nothing to do with transitions but with CSS itself.
I have a lot of elements on the page with dark classes set initially and then whenever I change the theme I just add/remove 'dark' class in <html>. I have may be 50 elements on the page which change their text color and background color and all of them are laggy whenever the theme gets changed. The lag is similar to when you have a memory leak or a loop. It stutters then loads all at once and stuff like that.
So I guess my question is how to optimize CSS performance in this case? or overall?
UPDATE 2
According to Performance page in devtools I'm dropping a lot of frames when changing the theme. And it actually feels like I'm getting 5fps. Here is a screenshot of Performance page prnt.sc/Zz6T88ZFs6Fp. I'm not sure how to read it, may be somebody can give some useful info
If anyone has ever faced/solved this problem, I'd greatly appreciate your advice
It may have to do with the critical rendering path. I'd advice you to read this excellent article : Achieving 60 FPS Animations with CSS3.
In a nutshell, if you have css transitions set other than on transform and opacity css properties, your browser has to recalculate the whole layout, which causes stuttering.
I don't use tailwind and it's hard to test my response without example code but I had a very similar problem several years ago when browsers were a little dumb.
I had many classes for color throughout the html and toggled them with jquery. Here's a quick example of how...
$(".red").removeClass("red").addClass("blue");
I determined that, at the time, the problem was that the items were causing repainting for each change.
What I ended up doing was swapping a class on the body:
<body class="blue">
Whatever
Something else
<!-- lots more -->
</body>
And then:
body.blue a {
color: blue;
}
body.red a {
color: red;
}
And that worked beautifully because, as I understood it, the repaint happened all at once... but I'm guessing to even try you'd have to write a lot of stuff on your own instead of using tailwind. Maybe not, so I hope this line of thinking helps even if using tailwind.
Edit: if I had the same problem and couldn't fix it quickly enough I'd fade the body with a quick opacity out and then back in. Complete hack but it might look cool. Not a solution to your real problem but it might help if you can't fix it.
You can go in the dev tools and then go under "network", then you click on "Disable cache".
After a lot of research I've managed to finally find some useful info.
With the help of this article and some info from here I found out that dropping frames is actually not uncommon but usually it is not as intense as in my case.
There are some particular lines in Profile.json (download from Network page), which can help you find the actual reason(s) of dropped frames. Look for unsupportedProperties.
In my case it was {"args":{"data":{"compositeFailed":8224,"unsupportedProperties":["color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x76c803503df8"},"name":"Animation","ph":"n","pid":40040,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":13280,"ts":166257565931}. For me the reason was that too many elements on the page change their text color. 884 lines of compositeFailed related to 'color' for one theme switch on my page. Only refactor with the help of https://csstriggers.com/ would be effective in my case.
Currently, I don't know actual reasons for compositeFailed apart from that it has to do with color property and blink animation. Any Google devs would be welcome to enlighten me because I can't really find any info about that.
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
on a certain website I would like to change the appearance of a certain link. The operator of said website did something to it so that it does not work the way it used to anymore.
(I'm moderately new to CSS, this much in advance.)
The link goes [website]/internal/main.php?action=menu&id=[some number]. So far I've been changing it with
a[href*="main.php?action=menu&id"] { font-size: 30px;}
but that does not work anymore. So basically 'select any link that cointains that string and change the fontsize to 30px'.
However it would be really helpful/convenient to be able to edit it. Any other links on the page can still be edited via the above CSS. After reading a little I thought adding "!important" would solve the problem, but it did not.
I was under the impression that no matter what the website 'does' that the user has full control over what the browser displays, as it should fetch the 'intended' thing from the server and THEN add custom CSS to it, effectively changing it.
To that end I've been using the Firefox AddOn "Stylus" to edit/change the appearance. Other similar programs also did not manage to change said links. (Stylish, StyleBot for Chrome). It is the same issue on both Chrome and Firefox. I have not tried any other browsers but i imagine it is the same there.
I'd be very thankful for any pointers in the right direction, explanations of where my understanding of the matter is wrong and/or solutions to this problem.
Thank you in advance
Most likely the original CSS definition for links on tha site is done for the different states a:link, a:hover, a:active and a:visited
So you should change your rule to
a:link[href*="main.php?action=menu&id"],
a:visited[href*="main.php?action=menu&id"] { font-size: 30px;}
And similar for the two other states
Hi I want to know if I can use OR operator in CSS url function.
Example:
Is this possible ?
happy.moods {
background-image: url( 'pathA/img.png' || 'pathB/img.png' );
}
As some other users pointed out in the comments, there is no way to do what you speak of. While we can set things like min-width and max-width to achieve some half-baked logic, CSS and HTML really does not have a concept of logic at all. Even with psuedo-class selectors, the logic for displaying changes in a webpage is not a property of the code you have written but a property of the web browser.
This is why you can literally write any thing (regardless of whether it is proper code or not) into an HTML or CSS file and it won't cause the program to "break" because there is nothing to "compile".
However, this is where some concepts of Javascript come into play. I'm going to assume that you want a dynamic background image, if so, just go ahead and search that on SO or on Google, there are multiple pages out there to help you out.
Hope this helps!
I'm working on this little film's website, which I'm temporarily hosting at http://ivanfuentes.com/nolovelost/
After loosing my job in film, I decided to start working on my other passion, web pages... I've been learning a lot of html5 and css3, but still a newbie, as I discovered... my client asked me to build a Wordpress site, and I when found Atahualpa, I thought it would be a great idea to adopt it, so he can have lots of control over his site, with ease. Never again! From now on, I'll try to start as much from scratch as possible.
He wants to have the current page written in a different color on the side menu. For that, I used the current_page_item identifier from Wordpress, which actually did work, as I tried with different parameters, and, for example, did transform all the text to uppercase. But for some reason I still can't figure out, it does NOT change the text's color!
I checked the code using Chrome's "Inspect element" option, and as I can see, the browser did identify the item as "current_page_item", only it did not want to apply the specific color change (it's striked out).
Anyone know what could it be? I've been busting my braincells trying to figure this one out, to no success so far... any help, even just a hint at where to look for, with no further explanation, will be so, so appreciated, as this is all the work I now have. So also, if anyone wants to suggest any other ideas to stop being such a noob, I'll be glad to listen/read!
Thanks!
CSS tip:
The more specific the CSS, the more precedence it takes over existing CSS targeting the same items. Target the css like so:
.current_page_item a{color:/*YOUR COLOR HERE*/;}
If that is still being struck through, then make it more specific:
#DIV_ID #MENU_ID .current_page_item a{color:/*YOUR COLOR HERE*/;}
You can continue up the tree in that fashion adding more layers of specificity until it's the color you want, or you can do a manual override like so:
.current_page_item a{color:/*YOUR COLOR HERE*/ !important;}
That will ensure that your CSS won't be overridden, but I personally try and avoid using it unless absolutely necessary.