I'm trying to color the stars of the PrimeFaces rating component depending on the value. If the value is 1, the stars should be red, if the value is 5, the stars should be green.
The easy way would be adding a class based on the value of the rating and update it when the value changes:
<p:rating ... styleClass="stars-#{bean.ratingValue}">
<p:ajax update="#this"/>
</p:rating>
With this class, you can style the stars based on the set class:
body .ui-rating.stars-1 .ui-rating-star-on a {
color: red;
}
body .ui-rating.stars-2 .ui-rating-star-on a {
color: orange;
}
body .ui-rating.stars-3 .ui-rating-star-on a {
color: yellow;
}
body .ui-rating.stars-4 .ui-rating-star-on a {
color: greenyellow;
}
body .ui-rating.stars-5 .ui-rating-star-on a {
color: green;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
Related
I am using the Sphinx "cloud" theme. The main body of text has "justified" text alignment, and I want to turn that feature off. All options for alignment that I see refer to table elements, which is not what I want.
I tried adding an element to the _static/style.css file:
body {
text-align:left;
}
but this did not un-justify the text.
TIP: Don't guess at the CSS selector, inspect the source code or through the web.
In your custom override, you will need to override every instance of text-align: justify; in the theme. I found three.
div.body p {
text-align: justify;
margin: 1.5em 0 1.5em 0;
}
div.body li, div.body dd {
text-align: justify;
}
table.docutils .justify-align {
text-align: justify;
}
This ought to do it:
div.body p,
div.body li,
div.body dd,
table.docutils .justify-align {
text-align:left;
}
I'm using free-jqGrid 4.13.5 and selectize 0.12.4.
I'm trying to apply selectize on my dropdowns in inline edit. But only one value is displayed in the dropdown.
editoptions: {
value: "FE:FedEx;TN:TNT;IN:Intime",
defaultValue: "Intime",
dataInit: function(element) {
$(element).selectize();
}
It works if I'm using select2, instead of selectize.
Fiddle: https://jsfiddle.net/henrik79/90hj0wd9/
The main problem seems to be the parent of drop-down of selectize. To fix the problem I suggest you to use dropdownParent: "body" option:
dataInit: function(element) {
$(element).selectize({
dropdownParent: "body"
});
}
The fixed demo https://jsfiddle.net/OlegKi/90hj0wd9/2/ uses the changes. I added some other CSS properties to improve the look of the results:
.selectize-dropdown-content {
font-size: 11px;
font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif
}
.selectize-input {
min-height: 1.7em;
}
.selectize-input {
padding: .4em .3em;
}
.DataTD .selectize-control {
height: 24px;
}
.ui-jqgrid tr.jqgrow > td {
border-color: inherit;
}
I am iterating a for loop with stylus preprocessor. I need color class names and color values and the hex values I get are fine but my class names are not ideal.
$colors = red blue green orange;
for item in $colors {
.{"" + item} {
color: item;
}
}
and I get this compiled:
.#f00 {
color: #f00;
}
.#00f {
color: #00f;
}
.#008000 {
color: #008000;
}
.#ffa500 {
color: #ffa500;
}
but my expected result was:
.red {
color: #f00; // or red
}
.blue {
color: #00F // or blue
}
// .. etc
I can imagine that there is a function for the names to remain.
Any help appreciated.
If you can convert the original list of colors to a set of strings, this
$colors = 'red' 'blue' 'green' 'orange';
for item in $colors {
.{item} {
color: convert(item);
}
}
yields
.red {
color: #f00;
}
.blue {
color: #00f;
}
.green {
color: #008000;
}
.orange {
color: #ffa500;
}
if you change convert to unquote, the hex values will get replaced with the names you supply them in the list.
My company just converted to SP 2013 and I am now trying to create a new list. I have been trying to customize my header to have the following attribute:
Wrapped Text
Font Color Blue
Text Allignment - Center
Vertical alignment - bottom
I have found a script that allowed me to wrap the headers on all of the columns and I tried adding to it the color and text allignment. What I keep running into is that it is only updating the color and allignment on my one header that is not filterable. I have tried to look up what each of the .ms items mean because I am assuming that is my issue, but I can not seem to find the answer to that question. Any help would be greatly appreciated!
<style>
.ms-vh, .ms-vh2-nofilter, .ms-vh2-nograd, .ms-vh2, .ms-vb{
white-space: normal;
color:#0000ff;
text-align:center;
vertical-align:text-bottom;
}
</style>
I have done some test and this is the css file
---------- Table Rows ----------*/
ms-vh-div,ms-vh2-nofilter,ms-vh-div{
background: #2E4C70;
}
/* Set background for every row */
.ms-listviewtable > tbody > tr {
background: white;
}
Set border for every row */
.ms-listviewtable > tbody > tr td{
border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
}
Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #E2E3E5;
} Table Header Row
Remove background set in SharePoints general data table style */
.ms-listviewtable tr.ms-viewheadertr {
background: transparent;
width:100%;
}
.ms-viewheadertr,
.ms-listviewtable {
width:100%;
}tr.ms-viewheadertr > th.ms-vh2-nograd { color:white;}
Modify background color */
tr.ms-viewheadertr > th.ms-vh2-nograd,
tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
tr.ms-viewheadertr > th.ms-vh, /* Text */
tr.ms-viewheadertr > th.ms-vh2 ,
tr.ms-viewheadertr >th.ms-vh2-nofilter,
tr.ms-viewheadertr >th.ms-vh-div/* Text */ {
background: #2E4C70;
}
.ms-viewheadertr {
width:100%;
}
Modify background color on hover */
tr.ms-viewheadertr > th.ms-vh:hover,
tr.ms-viewheadertr > th.ms-vh2:hover {
background-color: #273C51;
border-color: #273C51;
}
Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
color: grey;
}
Modify font color on hover */
.ms-viewheadertr a:hover,
.ms-viewheadertr div:hover {
color: blue;
}
more details heresharepoint experience
Add a Script Editor web part, and insert this:
/*Choose your background colour*/
.ms-viewheadertr{
background:#00426A;
}
/*Choose font style*/
.ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink {
font-weight:bold;
color:white;
font-size:1.05em;
}
</style>
With thanks to Nate Chamberlain:
https://natechamberlain.com/2018/07/20/customize-styles-formatting-of-sharepoint-list-column-header-rows/
The formatting does not apply to multiple line of text field.
How can I render a grid column as multiline grid column using GXT 3 grids.
e.g
ColumnConfig<ExceptionEntry, String> name = new ColumnConfig<ExceptionEntry, String>(props.name(), 50, "Name");
name.setColumnStyle(new SafeStyles(){
#Override
public String asString() {
return // what styles to use for multiline rendering;
}
});
name.setCell(new AbstractCell<String>() {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
??? what needs to be done to render the column as multiline column
}
});
You can do that the easy and the hard way.
The easy one:
name.setCell(new AbstractCell<String>() {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div style=\"white-space: normal;\" >" + value + "</div>");
}
});
The hard (but much better) way:
1) Create custom GridAppearance to be used instead of default one from your theme:
import com.google.gwt.core.client.GWT;
import com.sencha.gxt.theme.base.client.grid.GridBaseAppearance;
public class YourGridAppearance extends GridBaseAppearance {
public interface YourGridStyle extends GridStyle {
}
public interface YourGridResources extends GridResources {
#Source({ "com/sencha/gxt/theme/base/client/grid/Grid.css", "YourGrid.css" })
#Override
YourGridStyle css();
}
public YourGridAppearance() {
this(GWT.<YourGridResources> create(YourGridResources.class));
}
public YourGridAppearance(YourGridResources resources) {
super(resources);
}
}
2) Copy /theme-you-use/client/grid/Grid.css to YourGrid.css and put it in the same folder where you've created YourGridAppearance class. Here is an example based on Grey theme:
#CHARSET "UTF-8";
.rowHighlight {
border: 1px dotted #535353;
}
.rowAlt .cell {
background-color: #FAFAFA;
}
.rowOver .cell {
background-color: #EEEEEE;
}
.cell {
border-color: #FAFAFA #EDEDED #EDEDED;
border-right: 0 solid #EDEDED;
font: 14px tahoma,arial,verdana,sans-serif;
}
.cellSelected {
background-color: #C9C9C9 !important;
color: #000000;
}
.cellInner {
white-space: normal;
line-height: 15px;
}
.columnLines .cell {
border-right-color: #EDEDED;
}
.rowOver .cell,.rowOver .rowWrap {
border-color: #DDDDDD;
}
.rowWrap {
border-color: #FAFAFA #EDEDED #EDEDED;
border-right: 0 solid #EDEDED;
border-style: solid;
border-width: 1px;
overflow: hidden;
}
.rowSelected .cell,.rowSelected .rowWrap {
background-color: #DFE8F6 !important;
border-color: #A3BAE9;
}
.footer {
background: #F7F7F7 none repeat scroll 0 0;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
display: block;
overflow: hidden;
position: relative;
}
The most important part of it is this one:
.cellInner {
white-space: normal;
}
3) Replace default grid appearance with your custom one. To do that you have to add the following lines to your-project.gwt.xml:
<replace-with class="package.name.of.your.custom.theme.class.YourGridAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.grid.GridView.GridAppearance" />
</replace-with>