Seems like this should be an easy thing to do, but I'm not finding it. An ng-grid is zebra striped by default, how do I remove it?
Add this to your style to override the zebra css:
<style>
.ngRow.even {
background-color: rgb(255, 255, 255);
}
.ngRow.odd {
background-color: rgb(255, 255, 255);
}
</style>
This will make both rows white. Change it to whatever color you need.
If you are going to add the modifications in a stylesheet after the ngGrid stylesheet (ngGrid.css), you should do it this way for avoiding losing ngRow.selected class
.ngRow.even {
background-color: #ffffff;
}
.ngRow.odd {
background-color: #ffffff;
}
.ngRow.selected {
background-color: #BDD5FF;
}
It's much better to customize your theme and add:
odd-row-background-color: null
Related
I have a problem with being unable to remove a rule that is applied to all elements. First of all, apologies but I could not upload a JSfiddle to this post - the page URL is: http://www.chessdroids.com/matches/long/test2.html
The problem is the CSS rule ‘* { text-align: center }’ is being used throughout the site and I cannot remove this, but it is making the chess board align incorrectly. Removing the rule works but destroys other areas of the site.
How can I remove this rule to the chess board only? I have tried using the not selector and canvas-board > * {display:none !important} but to no avail (note that I made the red canvas-board div wrap just to wrap the chess board). FYI I am using the canvas chess viewer: http://www.canvaschess.com/pgn_install.php.
Any help would be greatly appreciated here as I’m unsure how to fix this, thank you.
.canvaschesspgn .pgn_main_box {
text-align: left;
}
Change
.chessboard {
border: 1px solid hsl(0, 0%, 33%);
outline: 0 none;
}
to
.chessboard {
border: 1px solid hsl(0, 0%, 33%);
display: block !important;
outline: 0 none;
}
So text-align does not apply only to the chessboard
try
.canvaschesspgn > * {
text-align: left;
}
If you want to reset anything you can use this
* {
text-align: unset;
}
that should do it, enjoy
and here are the css doc
I want to override css style on bootstrap datetime picker control when selecting years from default blue to let's say red. How can I do that?
I tried with
.selectYear {
background-color:red!important;
}
but that doesn't work.
Update
I use
https://github.com/Eonasdan/bootstrap-datetimepicker/
It looks like 'selectYear' is a data attribute data-action="selectYear" and the class is 'year'
data-action="selectYear" class="year active"
The css is what's adding the background
.bootstrap-datetimepicker-widget table td span.active {
background-color: #337ab7;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
So either
.bootstrap-datetimepicker-widget table td span.year.active {
background-color: red;
}
Or
.year {
background-color: red !important;
}
Hope this helps
I've searched in plugin code and I haven't found any class name like selectYear.
Assuming that you want to style only the year selector panel, try with the following css rule:
.bootstrap-datetimepicker-widget table td span.year.active {
background-color: red;
}
UPDATE:
Did not see an example. You use wring selector at all. .bootstrap-datetimepicker-widget table td span.active{background-color:red!important;}; selectYear - it`s a data action attribute value
Use
.ui-datepicker-year{
background-color: red;
}
I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim
simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}
Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc
Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}
I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}
I am trying to use select2 on a webpage I am creating. However the combobox background seems to be transparent but I need to change it to another color. I tried modifying the select2.css file but nothing seems to work. Any Ideas ?
If you are trying to target the combo box wrapper use
.select2-search { background-color: #00f; }
If you are trying to target the input use
.select2-search input { background-color: #00f; }
And if you are trying to target the results wrapper use
.select2-results { background-color: #00f; }
Hope this helps!
It's a little late to help the OP, but I'll leave this answer in the hope it might help somebody.
I don't know about other versions, but using select2-rails 3.5.9.3 (which according to their github page means the version of select2 being used is 3.5) I was only able to change the background color as follows:
.select2-choice { background-color: #00f !important; }
The selector mentioned by Matthew for the results works, though.
Anyway, I didn't try it using "vanilla select2," so I don't know if there is any difference in this case.
For combo box
.select2-container--default .select2-selection--single{
background-color: #000;
}
For options search box
.select2-search--dropdown{
background-color: #000;
}
.select2-search__field{
background-color: #000;
}
and for options list
.select2-results {
background-color: #000;
}
A few more snippets below where I overrided the CSS in order to change the appearence of the Select2 dropdown select to suit my custom dark theme. (I'm using Bootstrap 5)
https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/
I accessed the non minified css file through the CDN to find what bits i needed to override and through trial and error, i came up with the below:
/* ------------------------------------- */
/* ---------- Select2 Library ---------- */
/* ------------------------------------- */
/* See https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.2.0/select2-bootstrap-5-theme.css */
/* Change the appearence of the bakground colour surrounding the search input field */
.select2-search {
background-color: #343A40 !important;
}
/* Change the appearence of the search input field */
.select2-search input {
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the appearence of the search results container */
.select2-results {
background-color: #343A40 !important;
}
/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
border-color: #6c757d !important;
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #ffffff !important;
}
Tested and worked for me with disabled Select2 4.1.0 :
.select2-container .select2-selection--single .select2-selection__rendered{
background-color: #fff;
}
.select2-container--default.select2-container--disabled .select2-selection--single{
background-color: #fff;
}
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
border: none;
}
.select2-selection
{
background-color: #f5f5f5 !important;
}
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.