Image link- scss style issue
I tried to change cursor style from pointer to default. But when I save the file and reload react app, the style is not changing. Tried to write code but SO keeps showing a message, guess I am doing it wrong.
When I inspect the element, the cursor default stile has been stiked through and a blue tick was appeared near cursor pointer , which was not even in my code.
Please check the image link above.
In the image attached you have a typo, should be cursor: default not dafault.
If the style is strike-through it means your style got overridden after.
Try to use the !important attribute:
cursor: default !important;
Related
I am trying to create a tree structure list for one of my tasks. I am planning to use JS-TREE plugin for this purpose. Still the plugin comes with lot of features, I have to do few styling changes to match the given design.
This is the code pen link which I tried so for,
1. Change the plus-square with angle-down icon
2. Change the minus-square with angle-up icon
3. change the square-filled-grey icon(will come if any few of child nodes selected) with minus-square icon
4. Hover blue highlighting not needed
Any way to customize this? OR Any super hit plugins from your experience?
So, it looks like they're using a sprite map and changing the background position to select which icon appears
I was able to move this
.jstree-proton .jstree-anchor > .jstree-undetermined {
background-position: -38px -5px;
}
This satisfied #3. If you inspect any of the icons (jstree-icon class), you'll see a background assigned to 32.png. You'll have to change the positioning for icons that exist there. For the angle up and down you'll have to hide the background image they supplied and insert your own icons
Why don't you try to create a css file and overwrite the jstree class setting "!important" at the end of the rules you want to change? For me it worked because I needed to change the jstree-rename-input class like this.
.jstree-rename-input {
border: none !important;
width: 250px !important;
}
As far as i investigated, this is also the official answer provided by jsTree creator.
http://i.stack.imgur.com/dxguj.png
What is that blue rectangle line? I want it to be on my control whenever I want to use it. So if I want to remove it, I should be able to for the element. I use bootstrap 3.
Just add the below CSS anywhere in the stylesheet or internally:
button:focus {
outline:0;
}
The blue rectangle line you're pointing out is a line drawn around elements to let them stand out, a so called outline. Imagine a user with only a keyboard navigating through a website, the outline is a good reference to show the user which element is active/has focus. When the outline is on a menu item for example, it shows the user that hitting enter will propably bring him to that particular page.
There is an outline style by default in most browsers, Bootstrap styled it their own way.
More on the outline styling property:
http://www.w3schools.com/cssref/pr_outline.asp
To get rid of the outline for buttons in Bootstrap you could use:
.btn:focus {
outline:none;
}
https://jsfiddle.net/DTcHh/12056/
-edit
As Guruprasad Rao pointed out, the valid outline property is none, according to W3C schools.
I've been trying to change the background color of these buttons on stackoverflow:
If I edit the background property in Firefox's inspector, everything functions as expected:
However, once I run a greasemonkey script to change it, I run into issues. It's like my script permanently froze the background of the button:
var tags = document.getElementById("nav-tags");
tags.style.background = "#1D3239 none repeat scroll 0% 0%"
Every stackexchange post I've looked over and every article I've found through Google search says that the way to change the property of a CSS class is to set it through object.style, but since I'm experiencing this behavior of the background freezing and never changing along with only the tag button changing and none of the others, it leads me to believe that setting the background of the style is really just changing (and freezing) the background of the element and not the class.
How can I change the background of the class (not just that one element) and not have it permanently freeze the change (I want the orange highlight to still happen)? Even if the buttons had classes, the only way I know to access them is through document.getElementsByClassName() which would return elements and not the class. I don't know how to edit the class directly through JavaScript.
Also, on the topic of the orange highlight, I don't see a property for it anywhere in the Firefox inspector window. Where can I find it so that I know what to modify?
Label the buttons with the same class, say "orangeToBlack", then use CSS:
.orangeToBlack {
background-color: orange;
}
.orangeToBlack:hover {
background-color: black;
}
I want to add Custom set of cursor on my website. I have added that cursor but while hover anything that cursor change I have the Set of Pointers including both .ani & .cur required for my site. I have already tried :
This is the JavaScript that I used !
<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>
My cursor:
bluecursor
I have its Set , but I dunno the code to set while cursor for crosshair ,help , wait etc.
cursorset
Is this possible?
All supported cursors can be enabled through CSS: http://www.w3schools.com/cssref/pr_class_cursor.asp
If you have to do this with javascript it seems as a bether idea to have a class in your css with the desired behaviour/style and then only set that class with javascript.
If you want to do this, it is better to do it in css:
For example, if you wanted to have the cursor change to your custom cursor only when hovering over an anchor tag then you can do this:
a {
cursor: url(cursor/bluecursor.cur), auto;
}
If you wanted to have the cursor ALWAYS use custom cursors, then you have to decide when to use a special cursor. You can do this with classes:
.help {
cursor: url(cursor/help.cur), auto;
}
Then apply that class to the particular element that you want to display the custom cursor:
<div class="help">Help Me</div>
There is no way (to my knowledge) to simply tell the browser just replace all cursors with a custom set.
This code worked for me (not JS but jQuery):
$("body").css('cursor', 'url(arrow_blue.cur) , auto');
$(".button").mouseover(function(){
$(this).css('cursor', 'url(arrow_blue.cur) , auto');
});
Don't forget to override if there is any specific items like buttons, etc... Just defining a cursor for body does not cover the elements under, if something special is defined for them. So you have to override, for mouseover etc...
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }