Hi community I have a problem trying to change the color of tooltip extension, it happens that I'm using PrimeFaces 5.1 and extension 3.0, using the thema of grinders pepper, but does not perform the change in white, I leave my code.
<pe:tooltip global="true" />
.ui-tooltip,.ui-tooltip .ui-widget-content {
border: 1px solid #9d9d9d;
color: #000000;
background-color: #ffffff;
}
Hope you can help me, thanks.
In the PF-ext showcase, there also is a background image. That overrides the color (per css standards). When I tried setting the background image to 'none'
.ui-tooltip, .ui-tooltip-content.ui-widget-content {
background-color: yellow;
background-image: none;
}
in the PF-ext showcase, it worked.
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I've learned a lot of CSS properties on my school website. But how can you change the color of the scrollbar for when it's hovered?
Example:
html {
scrollbar-arrow-color: white;
scrollbar-face-color: green;
scrollbar-face-hover-color: darkGreen;
scrollbar-shadow-color: black;
scrollbar-track-color: black;
}
Maybe it's also possible to change the background of the arrow buttons.
You can do it like this.
::-webkit-scrollbar-face{ background: black;}
::-webkit-scrollbar-face:hover {background: darkGreen;}
This colors the face in a different color when hovering.
I've been trying to change the default blue hover color to something different in the Select2 elements in the website I'm designing, but no success so far. What's the correct, working css selector which would allow me to change the background color and font color of the hovered choice in the Select2 elements?
Thank you in advance!
Edit:
.select2-drop:hover {
background-color: #efefef;
}
I've tried .select2-container, choice but no success. The added code changes the whole dropdown color on hover, but I need it to only change the hovered option.
Try this
.select2-results .select2-highlighted {
background: #f00;
color: #fff;
}
You can use this to change the hover color, works for the Select2 V4.0.1
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #F0F1F2;
color: #393A3B;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
color:white
}
I'm on my early stages of creating a Rails application. What I wanted to do is remove the black background on the links when hovering the cursor on them (as shown in the image). How? I did not add anything on the css files. I'm using Rails 3.2
Seems to be that the culprit to this is at assets/stylesheets/scaffolds.css.scss
a:hover {
color: #fff;
background-color: #000;
}
Only one i can say:
a:hover {
background-color:transparent;
}
I'm trying to overide the default appearance of cflayout tabs.
By putting an edited background sprite into the website images folder I can alter the hover appearance, but I cannot seem to get the text to turn white on hover by referencing the built in .x-tab-strip-over class.
In action here
<style type="text/css">
div.x-tab-panel-header, ul.x-tab-strip-top {
background-image: none;
background-color: transparent;
padding-bottom: 0px;
}
div.x-tab-panel-header {
border: 0px;
}
.x-tab-strip-active, .x-tab-strip-text {
font-weight: normal !important;
font-size: 14px !important;
font-family: arial !important;
}
.x-tab-strip-over {
color: white !important;
}
.x-tab-right, .x-tab-left, .x-tab-strip-inner {
background-image: url(images/xd-tabs-sprite.gif) !important;
}
</style>
<cflayout type="tab">
<cflayoutarea title="Mouse">
Mickey Mouse
</cflayoutarea>
<cflayoutarea title="Duck">
Donald Duck
</cflayoutarea>
</cflayout>
Any clues appreciated
CF9 uses ExtJS 3.x while Cf8 uses ExtJS 2.x
How to use:
Click Ext Theme Builder.
Select Template (blue or gray) in the top toolbar (i recommend - gray)
Select Base Color, Header Color, Background color, Border color, Header
Font, Font, Window transparency,
Toolset (Default, Vista,
TargetProcess, Graphite) and ExtJS
version. Unselected Border color will
be assigned automatically according to
base color
Click Apply
Enter Theme name
Click Download Theme. It will be xtheme-Theme name.zip file
http://extbuilder.dynalias.com/springapp/mainpage.htm
Use:
.x-tab-panel-header .x-tab-strip-over span {
color: white;
}
.x-tab-panel-header .x-tab-strip-over.x-tab-strip-active span {
color: red;
}
There's a lot going on in there, so I just tested until I found something that worked.