기본 PrimeFaces CSS를 사용자 지정 스타일로 재정의하려면 어떻게해야합니까?
별도의 Maven 프로젝트로 내 테마를 만들었으며 올바르게로드되었습니다.
이제 구성 요소의 크기를 변경하고 싶습니다. 예를 들어 <p:orderList>. 고정 된 200x200 크기로 ui-orderlist-list정의 된 라는 클래스 가 primefaces.css있습니다. 내에서 무엇을하든 theme.css이 속성으로 덮어 쓰여지고 콘텐츠를 <p:orderList>더 넓게 만들 수있는 방법이 없습니다 .
다른 구성 요소의 경우 전체가 아닌 구성 요소의 한 인스턴스 만 재정의 할 수 있습니다.
누구든지이 모든 것을 어떻게 할 수 있는지 말해 줄 수 있습니까?
하나 이상의 특정 사례와 관련이있을 수있는 몇 가지 사항을 고려해야합니다.
PrimeFaces 1 이후에 CSS로드
당신은 당신의 CSS가로드되었는지 확인해야합니다 후 PrimeFaces 하나. 대신 <h:outputStylesheet>CSS 파일을 내부 에 배치하여이를 달성 할 수 있습니다 .<h:body><h:head>
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF는 스타일 시트를 생성 된 HTML 의 끝에 자동으로 재배치 <head>하므로 PrimeFaces의 기본 스타일 이후에 스타일 시트가로드 됩니다. 이렇게하면 PrimeFaces CSS 파일에서와 똑같은 CSS 파일의 선택기가 PrimeFaces보다 우선합니다.
당신은 아마도에 넣어 제안을 볼 수 <f:facet name="last">의 <h:head>PrimeFaces 특정 이해되는 HeadRenderer, 그러나 이것은 불필요하게 서투른 당신은 당신의 자신이있을 때 휴식 것입니다 HeadRenderer.
CSS 특이성 이해
당신은 또한 당신의 CSS 선택기가 있는지 확인해야합니다 적어도 특정 요소에 PrimeFaces '기본 CSS 셀렉터와 같은 특정한다. CSS 특이성 및 계단식 및 상속 규칙 을 이해해야 합니다. 예를 들어 PrimeFaces가 기본적으로 다음과 같이 스타일을 선언하는 경우
.ui-foo .ui-bar {
color: pink;
}
그리고 당신은 그것을 다음과 같이 선언합니다.
.ui-bar {
color: purple;
}
를 가진 특정 요소가 class="ui-bar"를 가진 부모 요소를 가지면 class="ui-foo"PrimeFaces의 요소 가 여전히 우선 순위를 갖게됩니다.
웹 브라우저 개발자 도구를 사용하여 정확한 CSS 선택기를 찾을 수 있습니다. 웹 브라우저 (IE9 / Chrome / Firefox + Firebug)에서 해당 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택 하여 확인합니다.
부분 재정의
동일한 구성 요소의 모든 인스턴스가 아닌 특정 구성 요소 인스턴스에 대해서만 스타일을 재정의해야하는 경우 styleClass대신 사용자 지정 및 후크 를 추가합니다 . 특이성이 사용 / 적용되는 또 다른 경우입니다. 예를 들면 :
<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
border-style: none;
}
구성 요소가 a를 지원하지 않고 styleClassjsf 2.2 이상인 경우 passtrough 속성을 사용 하고 a를 추가 pt:class하여 출력에 끝낼 수도 있습니다 .
<p:clock pt:class="borderless" />
절대 사용하지 마십시오!
CSS 파일을 순서대로 제대로로드하지 못하거나 올바른 CSS 선택기를 찾는 데 실패한 경우 !important해결 방법을 찾을 수 있습니다. 이것은 명백한 잘못입니다. 이것은 실제 해결책이 아닌 추악한 해결 방법입니다. 장기적으로는 스타일 규칙과 자신을 더 혼동 할뿐입니다. 는 !important한다 만 HTML 요소의 하드 코드 값을 무시하기 위해 사용할 수 style에 CSS 스타일 시트 파일의 속성 (또한 차례 나쁜 연습에 있지만 드문 경우에 불행히도 피할 수).
또한보십시오:
- Facelets 템플릿에서 CSS / JS / 이미지 리소스를 참조하는 방법은 무엇입니까?
- Mozilla 개발자 네트워크> CSS> 특이성 (훌륭한 기사, 필독!)
- CSS의 스타일 우선 순위 이해 : 특이성, 상속 및 캐스케이드
예를 들어 cssOverrides.css와 같은 새 CSS 파일을 만들 수 있습니다.
그 안에 원하는 모든 재정의를 배치하면 프라임 페이스 버전을 업그레이드하면 영향을받지 않습니다.
h : head에 다음과 같이 추가하십시오.
<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />
작동하지 않으면 h : body에 추가해보십시오.
작동하는지 확인하려면 css 파일 내부에서이 간단한 예제를 시도하십시오.
.ui-widget {
font-size: 90% !important;
}
이것은 모든 프라임 페이스 구성 요소 / text의 크기를 줄입니다.
PrimeFaces 6.0을 사용하고 있습니다. 이에 대해 내가 갖고 싶었던 정보는 다음과 같습니다.
을 사용 <h:outputStylesheet/>하면 작동하지만 CSS가 <h:head></h:head>태그 의 마지막에 있어도 마지막으로로드되지 않습니다 (다른 CSS 파일은 나중에 포함됨). 내가 배운 당신이 할 수있는 트릭 여기가 내부에 배치하는 것입니다 <f:facet name="last"></f:facet>, 체내 이동해야하는 과 같이 :
<h:body>
<f:facet name="last">
<h:outputStylesheet name="css/MyCSS.css" />
</f:facet>
...
그러면 CSS가 마지막으로로드됩니다. 참고 : BalusC에서 설명한대로 특정 규칙을 준수해야합니다.
WebContent / resources / css /에 "MyCSS.css"를 배치했습니다.
리소스 로딩 순서에 대한 추가 정보 : http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces
보다 구체적인 규칙을 만드는 방법
PrimeFaces에서 사용하는 스타일 규칙은 매우 복잡 할 수 있습니다. 요소는 여러 CSS 규칙에서 스타일을받을 수 있습니다. DOM 검사기의 스타일 탭에서 필터링을 사용하여 사용자 정의하려는 속성을 검색 할 수 있다는 것을 아는 것이 좋습니다.
이 스크린 샷은 Chrome을 사용하여 촬영되었지만 Firefox 및 Safari에서도 필터링이 가능합니다.
When you have found the rule you want to customise, you can simply create a more specific rule by prefixing it with html. For example, your could override .ui-corner-all like:
html .ui-corner-all {
border-radius: 10px;
}
Replace theme values using a ResourceHandler
I usually just want to replace some color with another value. As colors can be used in many different rules it can be useful to create a ResourceHandler.
In the handler check for the PrimeFaces theme:
@Override
public Resource createResource(String resourceName,
String libraryName) {
if (isPrimeFacesTheme(resourceName, libraryName)) {
return new MyResource(super.createResource(resourceName, libraryName), this);
}
else {
return getWrapped().createResource(resourceName, libraryName);
}
}
protected boolean isPrimeFacesTheme(final String resourceName,
final String libraryName) {
return libraryName != null
&& libraryName.startsWith("primefaces-")
&& "theme.css".equals(resourceName);
}
In the resource, replace the color:
public MyResource(Resource wrapped, ResourceHandler handler) {
this.wrapped = wrapped;
this.handler = handler;
this.charset = Charset.forName(FacesContext.getCurrentInstance().getExternalContext().getResponseCharacterEncoding());
}
@Override
public InputStream getInputStream() throws IOException {
if (cache == null) {
cache = readInputStream(getWrapped().getInputStream());
// Replace values
cache = cache.replace("#007ad9", "#11dd99");
}
return new ByteArrayInputStream(cache.getBytes(charset));
}
And register it as follows in the faces-config.xml:
<application>
<resource-handler>com.example.MyResourceHandler</resource-handler>
</application>
For more information on resource handlers see:
'Program Club' 카테고리의 다른 글
| 'data-sort'속성에 따라 jQuery에서 div를 정렬합니까? (0) | 2020.11.30 |
|---|---|
| bash를 사용하여 한 줄씩 읽고 공간을 유지하십시오. (0) | 2020.11.30 |
| 자바 스크립트에서 localstorage, sessionStorage 및 쿠키를 지우는 방법은 무엇입니까? (0) | 2020.11.29 |
| Pandas 시리즈를 DataFrame으로 변환 (0) | 2020.11.29 |
| Room Persistence Library로 생성 된 데이터베이스의 내용보기 (0) | 2020.11.29 |