I'm trying to add some CSS on a forge panel.
Whenever I put my mouse hover a forge panel the colour of the background become darker.
Is it possible to disable this behaviour?
Edited:
Here picture of my problem
My mouse was hover the panel titled 2.
I want the background to stay like the panel 1.
I supposed that you want to change the background color of the tree nodes of the model structure panel or property panel while mouse hovering. Please place this CSS snippet after viewer's stylesheet:
// Change background color to red color in dark-theme
.adsk-viewing-viewer.dark-theme .treeview .group>lmvheader:hover,
.adsk-viewing-viewer.dark-theme .treeview .leaf>lmvheader:hover,
.adsk-viewing-viewer.dark-theme .treeview group>lmvheader:hover,
.adsk-viewing-viewer.dark-theme .treeview leaf>lmvheader:hover {
background: rgba(255,0,0,.4)!important;
}
// Change background color to red color in light-theme
.adsk-viewing-viewer.light-theme .treeview .group>lmvheader:hover,
.adsk-viewing-viewer.light-theme .treeview .leaf>lmvheader:hover,
.adsk-viewing-viewer.light-theme .treeview group>lmvheader:hover,
.adsk-viewing-viewer.light-theme .treeview leaf>lmvheader:hover {
background: rgba(255,0,0,.4)!important;
}
And here you go!
This problem doesn't appear in the last version of the forge viewer. I'm gooing to upgrade my viewer
Related
I am working with an appointment booking system. this system includes a full calendar with a monthly list view.I want to change the background and text color when hover list item.it default gets a white color background. how do change it?
if (calev.end._d.getTime() < ntoday.getTime() ) {
elt.css('background-color', '#5c5c3d');//change backgroud color
elt.css('color', 'white');//change text color
elt.find(".fc-event-dot").css('background-color','white');//change dot color
//here I want write a hover background and text color code
}
You can set a simple CSS rule to achieve this - if you inspect the fullCalendar HTML using your browser's element inspector, you can find the class it uses to identify an event in the list view, and target that.
For example:
.fc-list-table .fc-list-event:hover td {
background-color: red;
}
Working demo: https://codepen.io/ADyson82/pen/ExRjWLp
i think this may help
fc-list-item:hover td{
background-color: red !important;
color: white!important;
}
anyone tried to changed the background color in multi-dropdown menu in bootstrap 5?
the original code is here https://bootstrap-menu.com/demos/multilevel.html
I want to change the background color in visited/active in multi level
the code below doesn't work
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:visited,
.dropdown menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
background-color: #222222!important;
}
Sample
By default bootstrap provide class to change dropdown menu color to dark by aading class ".dropdown-menu-dark" to dropdown-menu.
Hope that work for you
I am trying to customise the search box in my readthedocs documentation. I managed to change the background color by setting in a custom css file:
.wy-side-nav-search, .wy-nav-top {
background: #ffffff;
}
I haven't found though what property controls the color of the project name that displays right above the logo on this sidebar.
Thanks
Im trying to add a background color behind the "store" menu item however I have tried many ways and are not able to only make the "store" item change the background.
background color change to: #37bbec, and also change the font color to #fff.
I have attached a image of the menu item I wish to change.
As a general principle, you could target it with this basic construct:
ul li:first-child a:first-child { … }
But you can deal with ids, classes and specificity as needed.
I have this problem when creating a website,I have image A on top of Image B,but when I hover with mouse and press it I want to react as I pressed on Image B.Is it possible or should I crop the images accordingly?
Thank you in advance!
P.S. If needed I can attach images.
You can make pointer-event: none for Image A as follows
CSS
imageA {
pointer-events: none;
}
Changed pointer-events: none;
Check fiddle: https://jsfiddle.net/fxww4r3h/
I am applying actions to .imageB, when it is placed under .imageA