I want to give the items in my suggestbox a custom background color.
Is this possible?
like
item.getElement().getStyle().setBackgroundColor("red");
just add this to your css file to change the background color of an item/selected-item
.gwt-SuggestBoxPopup .item {
background: red !important;
}
.gwt-SuggestBoxPopup .item-selected {
background: black !important;
}
look here for detailed information
Related
In ag-Grid when I change the row background color, it is working fine, but when I select the row, the color doesn't change to the blue color so I can recognize that the row is selected.
I'm using gridOptions.getRowStyle to change the row background color:
gridOptions.getRowStyle = function(params) {
return { background: "#3a3a3a" }
}
The way I would approach it, would be to use the rowClass option in ag-grid.
rowClass: 'my-row'
And then in your css you can define:
.ag-root .my-row:not(.ag-row-selected) {
background-color: #3a3a3a;
}
https://embed.plnkr.co/fTENsl/
Another option, if you want a custom selected color, would be to use this:
.ag-root .my-row {
background-color: #3a3a3a;
}
.ag-root .my-row.ag-row-selected {
background-color: blue;
}
if you want to change style of selected row use class in css
.ag-row-selected {
background-color: black;
color: white ;
border-color: gray;
}
My first question ever - so apologies if I am not specific enough.
How do I change the color and width of material drawer component in angular-dart in css? I have tried it several ways in the CSS, including as below:
::ng-deep material-drawer {
color: #9437FF;
width: 200px;
}
.material-drawer {
color: #9437FF;
width: 200px;
}
FYI, the following worked with the material-header, which is inside a header tag:
::ng-deep header.material-header.material-header {
background-color: white;
color: #9437FF;
}
My material-drawer is not in a div or anything, just directly an HTML element on its own.
Any pointers are appreciated!
Setting the width of the drawer is a bit complicated. It involves setting a good amount of values as such it is best to use the mixin. You can see an example here
As for the color that is a little bit harder. What color are you trying to change? The background color?
For the background color you can set the background-color on the drawer. The problem is going to be that the content itself is going to override that color. In this case the material-list has it's own white color associated with it. Removing that color you could have problems with the divider colors.
I want to show thumb-left icon on button in sapui5. thumb-left is not available. So can i choose thumb-down or thumb-up and rotate it on 90 Degree ?
How I can do it.
2ndly How to set the buttons color Red, Green ,Yellow. I set button type to Accept, Reject but it just make border of buton green ,red,
<Button id="btnNegative" type="Reject" icon="sap-icon://thumb-down" text="Negative" press=".onSentimentFeedBackButtonclick"></Button>
<Button id="btnNeutral" type="Accept" icon="sap-icon://thumb-up" text="Neutral" press=".onSentimentFeedBackButtonclick"></Button>
Here is a simple example
In your XML add a custom class to your button
<Button id="btnNeutral" class="myNeutralThumb" icon="sap-icon://thumb-up" text="Neutral" press=".onSentimentFeedBackButtonclick" />
Then in your style.css (or however your CSS file is named) add the following:
button.myNeutralThumb .sapMBtnInner {
border-color: #ff0 !important;
}
button.myNeutralThumb .sapMBtnIcon {
transform: rotate(90deg);
color: #ff0 !important;
}
The first style changes the color of the button's border. Probably that should be the same color as the icon.
The second style rotates your thumb icon and changes its color.
If you also want to change the background-color of your button, put something like background-color: #fff; in the second style rule.
Edit: Replaced complicated and long and non-future-proof CSS style rule with short CSS rule + !important
I am working on a project where I have to develop a theme in which I have to customize navigation and breadcrumb bar and many other things too.
Main part is how to change the color of navigation bar.
Liferay 6.2
tomcat 7
windows 7
To change the color of navigation bar I used a small image and repeat that image. In
custom .css
.navbar-inner {
background: url("../images/navigation/nav_bg.gif") repeat-x;
/*added by me for navigation bar*/
/*background: #404041;
/*added asif ##141415 and hence this will change the background of navigation bar color */
border-width: 0;
min-height: 36px;
li a {
color: #FFF;
}
}
either by using
background: url("../images/navigation/nav_bg.gif") repeat-x;
we can change the color. Here nav_bg.gif is a very small image and I am using that one as background color I just repeat that one.
background: #404041;
we can also change the color.
webdoctor is a .css file created by me and this is inside color_schemes folder.
in webdoctor.css
.webdoctor #navigation {
background: url("nav_bg.gif") repeat-x scroll 0 0 #404041; /* change the corner color of navigation bar */
clear: both;
margin: 0 auto 5px;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
}
Include the following in navigation.css or custom.css found in your theme folder -
Path : portal-liferay/tomcat/webapps/ROOT/html/themes/classic/css
#navigation {
background: #414445 url(portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation/bg.png)repeat-x 0 0;
}
The png image 'bg.png' must be of the custom color you desire. Edit the image in paint and replace the one in the images folder.
Path : /portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation
So, I have a SplitLayoutPanel, and need a blinked dragger. Is there any possibility to achive it? With CSS, of hardcode, whatever?
Note - Purely css effects would be cpu intensive and hence I would go for a gif based solution.
Problem
The split layout panel uses two images to provide for horizontal and vertical splitter. These are png images and cannot be animated (blinking effect).
Solution
You can get blinking effect by using animated gif images.
You need to find a replacement "gif" image for both these which blinks. Then override the basic gwt styles and ensure you have !important suffixed to the styles that are overriden.
.gwt-SplitLayoutPanel-HDragger {
background: #e7e7e7 url(images/thumb_vertical_blinking.gif) center center no-repeat !important;
cursor: col-resize;
}
.gwt-SplitLayoutPanel-VDragger {
background: #e7e7e7 url(images/thumb_horz_blinking.gif) center center no-repeat !important;
cursor: row-resize;
}
Yes,There is a possibility to achieve that by overriding the default styles
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger }
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger }
.gwt-SplitLayoutPanel-VDragger {
// your set of styles while dragging
}
.gwt-SplitLayoutPanel-HDragger {
// your set of styles while dragging
}