PrimeFacesコンポーネントは、私が使用しようとしていますショーケース

よりも違って見える： http://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml 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

このTwitterのboodstrapが関連している方法：CSSファイルを作成し、/webapp/resources/css/custom.cssを言うと、あなたのテンプレートの頭の中に組み込むことができますか？ – 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も読み込まれています。そのルールの1つがすべてのウィジェットに適用されます：

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

これは、あなたも（あなたのテキストがより大きい）違いを引き起こしています。

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

は、おそらく多くのカスタマイズがあります：あなたがブレッドクラムにアンカーを検査した場合

は、次のルールがあります。 showcase.cssをよくご覧ください。

デバッグツールに精通していない場合は、これが期待できる例です。このスクリーンショットはChromeを使用して撮影されました。一番上にはサイトがあります。 DOMツリーの左側で最も重要なのはこの場合です。右側では、選択したノードのルールが適用されます。各ルールでは、ロードされているスタイルシートを見ることができます。

あなたが興味を持って（とChromeを使用して）している場合は、利用可能documentation on how to use the DOM inspector偉大な存在です。

見つかった相違点（またはあなたのプロジェクトで少なくとも必要なもの）は、カスタムスタイルシートに入れてください。

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

出典

2016-09-06 21:24:46

PrimeFacesコンポーネントは、私が使用しようとしていますショーケース

答えて

関連する問題