I am working on Tables using antD. By default, whenever you hover a Table Row in antD it gets a slight gray color transition as a highlight. I wish to change the color. I did this using less:
.ant-table-row {
&:hover {
background-color: blue;
}
}
(NOTE: the actual color doesn't matter. it's just an example)
Whenever hovering the Row, it becomes Blue, as set, for a slight second and then becomes light gray again...
Checking the element CSS, via chrome tools, there is NO other :hover CSS for that object other than the blue color I added. Yet for some reason, this doesn't work...
In addition, tried using rowClassName to give a custom class and using it with the &:hover with the same results.
Here's a gif that shows the issue in action
Also a working example (online): https://codesandbox.io/s/bold-cache-w22lg?file=/src/App.js
replace with the following:
.ant-table-row:hover td{
background-color: blue!important;
}
Here two think
put your custom style file below all style file
add !important link below
.ant-table-row { &:hover { background-color: blue !important ; } }
Related
I'd like to change the background color of PCManFM-Qt, the file manager of LxQt. I now a custom stylesheet can be used with the option -stylesheet. I found the program Gammaray, a program similar to gtk-inspector. After some trying I got something working with featherpad. The css code:
#centralWidget{ background-color: red; }
works, but I cannot make red the QTextEdit widget. I don't care about featherpad, because I'd like to change the background color of PCManFM-Qt.
Try QTextEdit { background-color: red; }, or similiar
Qt has to know the object to which apply CSS props.
I'm trying to get rid of the following element or change its color if it's possible - it's not a border, it's a background image. It's code looks like that:
.col-2cl .main-inner {
background: url(img/sidebar/s-right-s1.png) repeat-y right 0;
padding-right: 340px;
}
My question is, how can I get rid of this element? I'm trying to completely remove it on dark version of my website, but I just can't - I feel like I've tried everything (background: none;, etc). I can't completely delete the file because I need it on light version of my website. My site:
Any new value you will assign for .col-2cl .main-inner will hide that image.
In your case, you should show dark mod or at least define how dark mode is implemented. Is it changing attributes or just changing class names?
if it is changing class names, you should define your css code according to that change, for example, let assume in dark mode, you added the new class name to any div tag parent of .main-inner as .dark-mode.
Then, you can use the following code:
div:not(.dark-mode) .main-inner{ background: rgba(252, 252, 252, 0) !important; }
this code will make fully transparent of that section only when it is not on dark-mode.
But as I described you need to understand how dark mode changes your website structure. Maybe, it is not adding new classes but changing the all CSS file. Then you just need to edit that specific files.
You can use
.col-2cl .main-inner {
display: none; // In case it will not work, you can try to add !important before the semicolon.
}
or change the background property with
.col-2cl .main-inner {
background: url(new_background_image.jpg) repeat-y right 0 !important;
}
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");
I have added the following lines to bootstrap/less/panels.less
//hover color for panel heading
.panel-heading:hover {
background-color: #dfdfdf;
}
But it wouldn't load to the css in the browser. yet I can manually add it in the css editor (in chrome dev tools) and it works.
Any solutions ?
If it works in chrome dev tools and in css file not, that means it is overwritten from other rule. You can overwrite the rule by increasing the specificity (e.g. concatenate another class name or some other selector), or, to be sure, use "!important":
.panel-heading:hover {
background-color: #dfdfdf !important;
}