I want to assign a background color to my programmatically created Dojo DataGrid's header row. I've tried to override the defaults by adding .dojoxGridHeader or .dojoxGrid-Header to my style sheet, but these have no effect.
Is there another way, such as with a Dojo event or property? If my style sheet is the only way to go, am I using the wrong class?
Thanks!
Alan
With the help of Internet Explorer's "Developer Tools," I discovered which CSS classes controlled the styling of the Dojo DataGrid header row.
I needed to add ".tundra" in front of .dojoxGridHeader because the .tundra stylesheet is at the top of the hierarchy.
This worked for me:
.tundra .dojoxGridHeader, .tundra .dojoxGridHeader .dojoxGridCell {
vertical-align: bottom;
color: #FFFFFF !important;
background: #530619;
border-color: #ECE2D8;
font-weight: bold;
}
Add both styles:
.dojoxGridHeader .dojoxGridCell {
background-image: none !important;
background-color: #A6BB3F !important;
}
.dojoxGridHeader .dojoxGridCell div {
color: black;
}
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I am trying to use mydaterangepicker(https://kekeh.github.io/mydaterangepicker/) into primeng turbotable (primeng calendar does not comply with the requirements), but it doesn't display well. can you help with some css code or another solution please
I provide my source code, thank you:
https://stackblitz.com/edit/angular-fv53c6
To fix the display of the calendar, instead of hiding inside the cell, putting it out in the open, put this in your app.component.css:
::ng-deep .mydrp { position:absolute !important; }
::ng-deep .selectorarrow { position:absolute !important; }
::ng-deep .mydrp .selectiongroup { margin-left: 12px; top: -18px; display: inline-table !important; border: 1px solid #CCC !important; }
::ng-deep .mydrp { border:none !important; }
::ng-deep body .ui-table .ui-table-thead > tr > th { height:45px !important; }
or check the working demo which is forked against your stackblitz
Your date picker is hidden because its parent's overflow is hidden.
You need to add overflow:visible to the parent of your my-date-range-picker and the div with class="ui-table-scrollable-header ui-widget-header".
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
The TinyMCE 4 button for Remove Formatting is , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like by, say assigning an image to it. But I'm not finding anywhere to change the button face. The markup assigned to the button is
.
I'm not sure how that gets that Tx symbol on the button, but there it is.
Thanks for any help.
In skin.min.css change
.mce-i-removeformat:before {
content: "\e01d";
}
to something like
.mce-i-removeformat:before {
background-image: url("http://i.stack.imgur.com/0rzf2.png");
background-size: 15px 15px;
background-repeat: no-repeat;
}
You can probably remove the background-size and background-repeat if you make your image the right size
If you don't want to edit the css directly, you could just make a new css file and load it after the default one to override the settings. If you did this, you would have to override the contents to remove the original icon
These icons come from the tinymce font. for me in the tinymce source i have the fonts at
tinymce/skins/lightgray/fonts/tinymce.woff|ttf|etc
If you added your own font file withyour own icon it should allow you to change the icon
If you inspect the css you'll notice there are two parts that control the icons being used
On the ::before inside the tag
.mce-i-italic:before {
content: "\e02b";
}
on the i tag itself
.mce-ico {
font-family: tinymce, Arial
}
both comefrom skin.min.css
What do you say that instead of new image you use :after pseudo element and remove :before one.
This is how it would look
https://jsfiddle.net/nj6yn4bq/4/
And the code
<button><i></i></button>
i:before { display: none; }
i:after {
content: 'FMT';
text-decoration: line-through;
font-style: initial;
font-size: 15px;
}
button {
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
}
I need to override css style for a particular element with another css file's style in gwt.
I have tried by the following code
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.addStyleName("butt");
The alert is coming. but the style has not been overridden. the css code is
.sendButton {
display: block;
font-size: 16pt;
color:red;
}
.butt{
font-size:32pt;
visible:false;
color:green;
}
the button font is in red colour only it is not changed to green. i have included this css in html file as well.
so please tell me how to override one css style by another css file's style in gwt.
Thanks in advance
Try this
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.setStyleName("butt");
setStyleName Clears all of the object's style names and sets it to the given style.
If this is the style that you want applied to all buttons, you can override the style the GWT applies to all buttons: gwt-Button.
Alternatively, try:
color: red !important;
or be more specific with your CSS selector so that other CSS rules do not take precedence.
I am assuming the .gwt-button and .gwt-Button-selected are the default style names(provided by GWT) of you button.
You can do sth like below. Here I have removed some css properties(all properties are random here). You should write these css properties in your UIBinder.
#external .gwt-Button;
.gwt-Button {
cursor: pointer;
cursor: hand;
color: #3e3e3e;
font-weight: bold;
text-align: center;
background: white;
margin-top: -6px;
margin-top: -33px;
margin-left: -1px;
}
#external .gwt-Button-selected;
.gwt-Button .gwt-Button-selected {
cursor: default;
background: white;
}