2014-10-10 1 views
2

내 사이트에서 다른 모양과 달리 사용자 지정 단추가 필요합니다. 이 버튼에 대한 CSS 클래스를 만들었지 만 이상하게 작동합니다.Primeface를 변경할 수 없습니다 p : commandButton 글꼴 속성

@font-face { 
font-family: 'pluto_sansthin'; 
src: url(#{resource['fonts/plutosansthin-webfont.eot']}); 
src: url(#{resource['fonts/plutosansthin-webfont.eot?#iefix']}) format('embedded-opentype'), 
    url(#{resource['fonts/plutosansthin-webfont.woff']}) format('woff'), 
    url(#{resource['fonts/plutosansthin-webfont.ttf']}) format('truetype'); 
font-weight: normal; 
font-style: normal; 

}

HTML 구현 :

<p:outputPanel> 
    <p:commandButton styleClass="regCommandButton" value="Save" action="#{URBean.saveNewUser}" update="regPanel" /> 
</p:outputPanel> 

내 문제가 있다는 것입니다 같은 CSS 파일에서

.regCommandButton { 
    color: #ffffff; 
    background: #29b6a0; 
    border-color: #23a38f; 

    width: 100%; 
    height: 25px; 

    font-family: 'pluto_sansthin'; 
    font-size:1.4em;  
} 

글꼴 가져 오기 :

는 클래스입니다 글꼴 관련 pr 버튼이 p:outputpanel 안에 있으면 operty (font-family, font-size)가 설정되지 않습니다. 다른 모든 것은 버튼에 적용됩니다.

단추를 출력 패널 외부에 놓으면 모든 것이 예상대로 진행됩니다.

편집 : 글꼴 속성에! important를 사용하면 eather가 도움이되지 않습니다.

+0

가지고 당신이 [링크] (http://stackoverflow.com/questions/8768317/how-do 읽기 -i-override-those-classes-defined-in-primefaces-css/8774997 # 8774997)? – mrganser

+0

@mrganser : 네, 그렇게했고 그에 따라 스타일 시트를로드합니다. 다른 경우에는 PF 스타일 클래스를 재정의 할 수 있습니다. 그러나 버튼의 글꼴의 경우 그냥 작동하지 않습니다. – bakcsa83

+2

'font-color'는'color'이어야합니다 – mrganser

답변

1

이 문제를 해결하려면 .regCommandButton.ui-button.regCommandButton으로 대체하십시오.

당신이 설명 예절이있을 것이다 .ui-button.regCommandButton와 taht를에게 모든 요소를 ​​말하는 것을 수행 :

.ui-button.regCommandButton { 
    color: #ffffff; 
    background: #29b6a0; 
    border-color: #23a38f; 

    width: 100%; 
    height: 25px; 

    font-family: 'pluto_sansthin'; 
    font-size:1.4em;  
} 
관련 문제