I have a website I'm building and I want to have a custom cursors specified for each property like hand, wait, pointer, default, move and so on...
I'm build an operating system website so I want to have custom cursors.
Here is the CSS code.
* {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
cursor:url("../.drive/system/visual/cursors/move.cur"),move;
cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
cursor:url("../.drive/system/visual/cursors/text.png"),text;
cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
cursor:url("../.drive/system/visual/cursors/help.cur"),help;
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
The only cursor that happens to load is the one at the bottom (crosshair)
I've also specified some PNG cursors aswell and they did not change the outcome.
I tried putting this into html,body{} and div{} but again nothing worked.
I want something like on Windows93 but without JavaScript
If there is no CSS-only method then I can accept JavaScript ones. But please only vanilla-js.Thanks!
The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.
The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.
For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.
To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:
* {
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}
To get a pointer over links you might then do:
a {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}
For crosshairs on a particular element you might try:
.target-element {
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.
Related
I haven't used ST for some months and I am quite certain that it used to comment/uncomment the entire CSS selector when using ctrl+shift+/ ("toggle block comment") with the cursor inside said selector, but nothing actually selected.
Is anybody aware of what could have caused this behaviour to be replaced with simply adding /* */ around the cursor?
I've tried using SCSS mode(which is what I usually use) and vanilla CSS mode.
Thank you!
There are two bindings for toggling comments, and the one you're using is the one meant for block comments when you probably mean to be using the one for line comments instead. That's not something that's been changed in recent memory.
The keys involved are different depending on platform, but for our purposes here:
Ctrl+/ is bound to toggle_comment with block set to false
Ctrl+Shift+/ is bound to toggle_comment with block set to true
Potentially confusing here is the notion that the /* */ style comments of CSS are actually block comments, which might make you think that you need the second binding.
Actually, the value of the argument controls what gets commented with whatever comment delimiters the support package for the language defines. It's possible for a language (such as C++) to define different comment delimiters for different styles, but that's not required.
When block is set to true, the commented area is the selected text, whereas when it's false it's the line the caret(s) are sitting on.
So, assuming the sample css:
body {
color: red;
}
If the cursor is sitting on the : and you use Ctrl+Shift+/, the result is the following, because the selection is wrapped but the selection is empty (which visually looks like the selection is wrapping the caret).
body {
color/**/: red;
}
On the other hand, with the cursor in the same place and using Ctrl+/ the result is:
body {
/*color: red;*/
}
What I was actually looking for was Emmet's "toggle comment" command which, in the case of CSS, toggles commenting the entire selector. I believe it's with an update to the respective package that the behaviour changed and stopped hooking into ctrl+shift+/, but I could be wrong.
I ended up adding a keyboard shortcut for said command in Preferences > Key Bindings, like so:
{
"keys": ["alt+/"],
"command": "emmet_toggle_comment"
},
I'm trying to set different visual styles for a pressed QToolButton depending on whether it displays a menu or not.
In my code, tool buttons having menu set their popupMode property to QToolButton::InstantPopup (value 2), while buttons without an associated menu keep the default value (QToolButton::DelayedPopup, value 0).
I tried to use such property in different ways as selector, but only the last one (QToolButton[popupMode="2"]) worked:
/* Not working */
QToolButton[popupMode=InstantPopup]:pressed,
QToolButton[popupMode="InstantPopup"]:pressed,
QToolButton[popupMode="QToolButton::InstantPopup"]:pressed,
QToolButton[popupMode="QToolButton--InstantPopup"]:pressed,
QToolButton[qproperty-popupMode=InstantPopup]:pressed,
QToolButton[qproperty-popupMode="InstantPopup"]:pressed,
QToolButton[qproperty-popupMode="QToolButton::InstantPopup"]:pressed,
QToolButton[qproperty-popupMode="QToolButton--InstantPopup"]:pressed,
QToolButton[qproperty-popupMode="2"]:pressed
{
background-color: blue;
}
/* Working */
QToolButton[popupMode="2"]:pressed,
{
background-color: red;
}
(This is a compilation of the options, I've tested them separately).
Documentation mentions that if the enum is declared using Q_ENUM (as ToolButtonPopupMode does), then it should be referenced by name, not by value, but, as it can be seen above, it seems it is not the case for selectors.
Question: Would it be possible to use such enum's name as selector in the stylesheet instead of the enum's value?
Note: I understand that other options such as custom properties with a more expressive, Qt-independant value can make the work too. I'm curious about the possibility of using the enum in the described way.
QToolButton[popupMode=InstantPopup]:pressed is the correct one.
setProperty(<property_name>, QVariant::fromValue(<enum_value>)) for enum class.
setProperty(<property_name>, <enum_value>) for enum.
But you need to reload the style if you want it to change dynamically.
Read about QStyle::unpolish and QStyle::polish.
I understand that you can use CSS to change the cursor between the default and to a custom URL, and I know that you can set specific cursors for specific elements.
What I want to do is set cursors for the defaults so that when the user hovers over any element which brings up the click finger cursor, my own custom click finger will appear.
To explain it another way, imagine a selector that instead of running whenever the user hovers over a certain element, it would run whenever the web page changes the cursor to one of the default.
I think that I have done an ok job of explaining this but if I don't make sense I will happily explain further.
For a customer CSS cursor its much like any other CSS element use url()
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?v=example
cursor: url(path/to/image), auto;
No need for javascript if you wanted this to be on every link then:
a:hover{
cursor: url(path/to/image), auto;
}
You can easily do this using Javascript:
var elements = document.getElementsByTagName("*");
// gets array of every element
for(var counter = 0; counter < elements.length; i ++) {
// loops through every element
if(window.getComputedStyle(elements[counter]).cursor == "pointer") {
// checks if the element uses a "pointer" cursor
elements[counter].style.cursor = "url(/* Your cursor's URL */)";
// if it does, the cursor is replaced with yours
}
}
I would like to know if there is a way to duplicate the cursor in my website so it appears twice, say as if you are seeing it drunk. I would like it to keep being responsible to images and change, but always double... is it possible to do this in an easy way? my CSS is pretty basic... thanks in advance!
This is an example: https://s11.postimg.org/ba76nmrvn/cursor_1.png
You can make some image and define it as cursor like this:
body {
cursor: url(path/to/your-arrows.png);
}
Doesn't need to be the body, you can define this for any HTML element.
You can load custom images, but don't forgot to always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
body {
cursor:url(double-arrows.png),url(anotherCursor.cur),auto;
}
I Konw I can use setStyleSheet() to set style in Qt.But I encountered a problem,when I used setStyleSheet() twice first styles lost,which are set by first use of setStyleSheet().
For exmaple,
setStyleSheet("QLabel{color:red;}");
…………
setStyleSheet("QLabel{border-image:url(……)}")
When I set border-image,the red color property lost.
I tried to solve it by using
setStyleSheet(styleSheet()+QString("QLabel{border-image:url(……)}"));
but it was the same that only the border-image property existed.
Must I add every style property when I use setStyleSheet(),although that I set it before.
Thanks for bearing my poor written English.Any tips will be appreciated.
You can set stylesheets without QLabel tag:
setStyleSheet("color:red;");
After setting one stylesheet property, you can add another property like:
setStyleSheet( styleSheet().append(QString("border-image:url(……);")) );
This is in response to your comment on the accepted answer.
You can prevent overwriting stylesheets properties by setting the constant values to the parent (permitting that the parent's style isn't being changed dynamically as well). Only set the values that you change with C++ to the child item.
parentWidget->setStyleSheet( "QLabel#yourLabel { color:red; }" );
yourLabel->setStyleSheet( "QLabel { border-image:url(...) };" );
This will retain all of the parents properties that have been set on the widget when you change the widget's stylesheet.
Furthermore, this removes the case of a very large string, which is possible in the accepted answer. Frequent changes will inefficiently append the string with previously defined styles that will not be used.
By using double column for the second entry.
ui->pushButton_2->setStyleSheet(
"QPushButton{background-color:red;color:white}\
QPushButton::hover{color:black}");