2009-03-20 11 views
2

更新:私は最初の部分は機能していますが、コーナーはありません。下の第2部を参照してください。GWTタブのCSSを変更する

一度に1つのタブバーを作成できるように、どのようにスタイルをタブバー(GWT内)に適用しますか?私は異なるスタイルを持つ必要があるいくつかの異なるtabPanelsを持っていますが、スタイルをバーに正しく適用する方法と、そのスタイルをCSSに追加する方法を理解できません。私のような何か行うと

は:

tabBar.addstyle("thisisastyle"); 

それは全体のバーのスタイルを追加し、私は特に、個々のタブの背景色を変更、アイテムのセットに適用します。私はDecoratedTabPanelを使用しています。私は丸みを帯びたコーナーのために独自の画像セットを持っていますので、使いたいものです。また、スタイルが正しく適用されたら、CSSでどのように呼び出すのですか?私の現在の試みはそうのようなものです:

.topTabs .gwt-DecoratedTabBar .tabMiddleCenter { 

パート2

他のすべてのCSSスタイルを簡単にタブバーにスタイル名を設定し、それらを次のように対処するの後に適用されます:

.customizedStyleName .tabTopCenter { 
    background-image: url('images/centerTopImage.gif'); 
} 

これは2つのコーナーでは動作しないようですが、ベースGWTが私のCSSを上書きします。右コーナーのためのCSSは次のようになります。

html > body .gwt-DecoratedTabBar .tabTopRight { 

のFirebug(yahのFirefoxの)でそれを検査します。誰も私にこれを無効にする方法を教えてもらえますか?

答えて

1

の後に、独自のCSSスタイルをロードして、標準のGWT CSSまたは他のライブラリサポートCSSを読み込む必要があります。

はその後、あなたが任意の「ベース」CSSを再定義することは自由です...最後のCSSが勝利します。 Firebugでは、 "strike through"フォントで上書きされたCSSスタイルが表示されます。

stdを上書きするためにこれを実行しました。 GWT、GWT-Ext、およびExt-GWT CSSをサポートしています。

あなたが「で構築」されたCSSクラスをオーバーロードしようとしている、あなたはスタイルの詳細を持っていない場合は、それを検査する...のJavadocに再び見た後のFirebugを使用します。

"GWTのインキュベータは、" ImageBundle ... ResourceBundleのに似て新しいCSS機械上の情報を持っていました。スタイルルールを動的に定義するための新しいメソッド。

+0

私はFireFoxで動作させています(topRightとtopInnerRightの両方のCSSタグを設定する必要があります)が、IEではまだ動作していません。私は単に背景を完全にオフにしようとしました、そしてIEで動作しません、デフォルトを使用しています。 – Organiccat

0

スタイルのプライマリ名を変更して全体のスタイルを書くことができます。

私はそれはIEのみで再現可能でなければなりません..あなたの問題はモジラでは再現できないと思います。ですから、あなたはstandard.cssファイルからスタイル全体をコピーして、gwt-DecoratedTabBarベースをcustomizedStyleNameと置き換えることができます。その後、ur.javaファイルで、スタイルプライマリ名をcustomizedStyleNameに設定します。次に不要な画像などを削除してdifferntスタイルを編集してください。それ以上の情報が必要な場合は教えてください。私は、requiriedソースコードとCSSファイルを投稿します。

1

一般的な問題はstandard.cssが動的ページへの最後のスタイルシートとしてリンクされていることです。これによって、あなたの設定の一部(非常に基本的なもの、例えばbody)は、standard.cssによって部分的に無効になることがあります。 .gwt.xmlファイルのコメントを外しても、好みのスタイルや、装飾されたパネルなどをレンダリングするために使用される標準的なグラフィックが失われても役に立ちません。http://IlIlIIlIlIlIlII.blog.de/2010/05/12/gwt-s-standard-css-killed-my-page-layout-8574576/

この問題をより簡単に処理する方法について他に提案がある場合は、コメントを残していただければ幸いです。

関連する問題