PrimeFaces 구성 요소는 쇼케이스

내가 사용하려고보다 다르게 보입니다 큰 링크에는 밑줄이 있습니다. PrimeFaces 쇼케이스와 비슷한 것으로 변경하는 방법은 무엇입니까?PrimeFaces 구성 요소는 쇼케이스

내 테마는 "부트 스트랩"입니다. 내 XHTML :

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html" 
     xmlns:p="http://primefaces.org/ui"> 

    <h:head> 
    </h:head> 

    <h:body> 
     <p:breadCrumb> 
      <p:menuitem value="Categories" url="#" /> 
      <p:menuitem value="Sports" url="#" /> 
      <p:menuitem value="Basketball" url="#" /> 
      <p:menuitem value="NBA" url="#" /> 
      <p:menuitem value="Teams" url="#" /> 
      <p:menuitem value="L.A. Lakers" url="#" /> 
      <p:menuitem value="Roster" url="#" /> 
      <p:menuitem value="Kobe Bryant" url="#" /> 
     </p:breadCrumb> 
    </h:body> 
</html>

출처

2016-09-06 Marcin

이 트위터는 어떻게 관련이 있습니까? – Kukeltje

그건 아니야 ;-) 그냥 평범한 CSS –

@ JasperdeVries : 나는 실제 버전 (위의 코드가 아님)에서 OP가 twitter-bootstrap css를 사용하고 있다고 의심한다. (그러나 OP는 primeface 부트 스트랩을 사용하여 답장 상태를 옵션으로 지정할 수있다. to) – Kukeltje

스타일 시트에서이 CSS를 사용해보십시오.

나는이

CSS를 작동 희망 : 쇼케이스는 기본적으로 오메가 테마를 사용하는 동안

a { 
    text-decoration: none; 
    outline: none; 
} 

.ui-breadcrumb ul li { 
    display: block; 
    float: left; 
    overflow: hidden; 
    position: relative; 
} 

.ui-breadcrumb ul li a.ui-icon-home { 
    margin-top: 1px; 
    overflow: hidden; 
    padding: 0; 
} 

.ui-widget-header a { 
    color: #222; 
} 

.ui-breadcrumb ul li .ui-menuitem-link { 
    display: block; 
    float: left; 
    margin-top: 3px; 
    overflow: hidden; 
    position: relative; 
    color: #222; 
    font-size: 90%; 
} 

.ui-breadcrumb-chevron { 
    margin-top: 2px; 
}

출처

2016-09-06 17:27:59

이것이 왜이 문제를 해결했는지 설명해 주시겠습니까? – Kukeltje

부모 태그가 다른 CSS 값을 설정했다고 생각합니다. 내가 맞습니까? – Marcin

@marcin 네, 다른 값을 렌더링합니다. 비록 당신이 사용자 정의 CSS를 포함하여 그 값을 덮어 쓸 수 있습니다. 구현을 위해 주제 및 사용자 정의 [http://courses.coreservlets.com/Course-Materials/pdf/jsf/primefaces/users-guide/more-theme-info.pdf]에 대한 짧은 문서를 읽을 수 있습니다. –

첫째, 당신은 부트 스트랩 테마를 사용하고 있습니다. 먼저 프로젝트에서 사용중인 것과 동일한 테마를 사용하도록 쇼케이스를 설정해야합니다. "PF 테마"버튼 (PC를 사용할 때 페이지의 오른쪽 상단 모서리에있는 가장 왼쪽 버튼)을 클릭하면됩니다.

그런 다음 브라우저의 디버깅 도구를 사용하여 탐색 경로 요소 (PrimeFaces 쇼케이스의 모든 요소)를 검사하십시오. 테마의 CSS 옆에 showcase.css도로드되어 있습니다. 규칙 중 하나가 모든 위젯에 적용됩니다.

.ui-widget { 
    font-size: 90%; 
}

이로 인해 발생하는 차이 (텍스트가 큼)가 발생합니다.

a { 
    text-decoration: none; 
    outline: none; 
    color: #25AAE1; 
}

은 아마 더 사용자 정의가 있습니다 : 당신이 이동 경로에 앵커를 검사하는 경우

, 당신은 다음과 같은 규칙을 찾을 수 있습니다. showcase.css을 살펴보세요.

디버깅 도구에 익숙하지 않은 사용자는 예상 할 수있는 예입니다. 이 스크린 샷은 Chrome을 사용하여 촬영되었습니다. 맨 위에 사이트가 있습니다. DOM 트리의 왼쪽에는이 경우 가장 중요하며, 오른쪽에는 선택된 노드에 적용된 규칙이 있습니다. 각 규칙에서로드 된 스타일 시트를 볼 수 있습니다.

관심 (그리고 크롬을 사용)하는 경우

는 사용할 수 documentation on how to use the DOM inspector 큰있다.

발견 한 차이점 (또는 적어도 프로젝트에서 원하는 사항)은 사용자 지정 스타일 시트에 저장해야합니다. CSS 파일을 만들고 /webapp/resources/css/custom.css라고 말하고 템플릿 머리에 넣으십시오.

<h:head> 
    ... 
    <h:outputStylesheet name="css/custom.css"/> 
</h:head>

출처

2016-09-06 21:24:46

PrimeFaces 구성 요소는 쇼케이스

답변

관련 문제