I'm building an add-on and thus far have done all styling in the add-on's css file (as opposed to a separate skin package). I now need to override the image files used for things like scrollbar handles and menu arrows.
Mozilla has a tutorial for overriding these using themes that are store in the omni.jar file, but we would prefer to avoid creating a separate theme to install when we're already installing an extension.
According to DOM Inspector a scrollbar gets it's style from chrome://global/skin/scrollbars.css and the rules are:
scrollbar {
-moz-appearance: scrollbartrack-horizontal;
-moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
background: url("chrome://global/skin/scrollbar/slider.gif") scrollbar;
pointer-events: auto;
}
scrollbar[root="true"] {
position: relative;
z-index: 2147483647; /* largest positive value of a signed 32-bit integer */
}
scrollbar[orient="vertical"]
{
-moz-appearance: scrollbartrack-vertical;
}
I've tried poking at the scroll bars in my add-on with:
scrollbar{
-moz-appearance:none!important;
background-image:none!important;
background:red!important;
background-color: green !important;
height:200px;
border:3px solid green;
}
scrollbar slider{
-moz-appearance:none!important;
background:red!important;
height:200px;
border:3px solid green;
}
scrollbar, thumb {
-moz-appearance: none !important;
background:red!important;
}
scrollbarbutton {
-moz-appearance: none !important;
background-color: transparent !important;
}
But unlike other XUL elements that respond to overrides from the add-on's css file, these scrollbars just don't respond to anything. I'm wondering if part of the problem is that the scrollbars are inside the browser window?
How can skin images be changed or overridden from an add-on?
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
This is a minor-but-annoying issue (typical web design) with color styling on my submit button. I'm using the page builder Elementor with OceanWP theme in WordPress. Site URL is http://catalystweb.design (under construction, of course)
The issue is that the colors seems to be "muted" on :active and :focus states. They are being applied, but not with full vibrancy.
I am linking to a brief screencast (12 seconds) of the issue, and including the custom CSS I've inserted into that page specifically. FYI the !important flags seem to be required to override some of the theme/builder styles, which makes it even more baffling as to why they are not fully applied in this case.
You'll see that the hover state of the button delivers the colors I've set; but on :focus (using tab) they are muted, and the same on :active (when clicking).
button[type=submit]:focus {
border: 2px solid #63C1FF !important;
background: #ffffff !important;
color: #63C1FF !important;
}
button[type=submit]:active {
border: 2px solid #ffffff !important;
background: #63C1FF !important;
color: #ffffff !important;
}
Thanks, any insights appreciated!
Your stylesheet here: http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8
has an opacity setting on hover:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
color: #fff;
opacity: .9;
}
How you want to approach fixing that is up to you, while I don't recommend using !important; if you can avoid it:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
opacity: 1 !important;
}
would work, or a slightly better approach such
button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
opacity: 1;
}
would work. You can put this in your main stylesheet or in the Additional CSS are of the customizer, or wherever you've been adding custom CSS.
Chrome recently updated its input element styles. I really like the number input type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.
I've put in many attempts to get these inputs to change, but they won't budge. From the input[type='number'] itself to these buttons:
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
border-radius: none !important; background: black; color: red;
}
input:-webkit-autofill { background: black; color: red; }
It seems they may not be able to change at all. Does anyone have experience with this? I know there's a way to hide the buttons. Ideally I just want to remove their border-radius.
Interestingly, padding seems to work on these buttons. I know they're listening!
There are ways to accomplish that. Here's a pure CSS solution:
http://jsfiddle.net/Volker_E/WwfW9/
As you can see, the magic CSS property/value in your case is -webkit-appearance: none;.
Through that the Spin Buttons lose their default appearance. And you're able to style in (nearly) every way you want to.
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1em;
border-left: 1px solid #bbb;
opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
}
I've added a Data URI image as background (therefor the small size), but you can add whatever image/CSS property you think is fitting your needs.
Only problem remaining is, that you're losing a bit on usability side, as you're not able to style the up and down button separately, and you don't have :hover and :focus styles on a single button.
That's simply not possible with current implementation in Chrome.
Have fun!
Edit 2015-01-18: Improved answer reflecting changes in Chrome >= v39. Thanks to #dtracers
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}