【PrimeFaces】PrimeFaces元件 CSS客製化 - Part2：Button/CommandButton

tags: PrimeFaces CSS

Button / CommandButton

更換background-color

1. original code

.ui-state-default {
    background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
}

2. 自定義

.normalButton {
    background: #c1cdcd !important;
}

不使用primefaces原有icons

例如：Font Awesome

1. View 的部分會寫成 icon="fa fa-file-text"
2. 需override class .ui-icon.fa

.ui-icon.fa {
    text-indent: 0px;
    background-image: none;
    overflow:visible;
}

常用預設class

Style Class	Applies
.ui-button	Button element
.ui-button-text-only	Button element when icon is not used
.ui-button-text	Label of button

Reference 參考資料

1. PrimeFaces 5.3 官方文件：https://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf
2. Font Awesome icon：http://fontawesome.io/

Part3：DataTable

連結：【PrimeFaces】PrimeFaces元件 CSS客製化 - Part3：DataTable