0

上部にドッキングされたツールバーがあり、firebugを使用して要素を検査し、cssクラスを見つけました。これは次のとおりです。

  .x-toolbar-dark.x-docked-top 
  {
      border-bottom-color: #000000;
  }

これを次のように変更しました：

  .x-toolbar-dark.x-docked-top 
  {
     border-bottom-color: #000000;
     background-color: transparent !important;
  }

Firefoxではツールバーが透明に見えますが、Chromeではデフォルトの背景色（青）が残っています。なぜこれが起こるのですか？ここでこの手法を使用する必要はないかもしれませんが、firebugを使用して非常に特定のcssクラスを見つける必要がある場合が確かにあります。ヘルプや情報はありますか？

注：ツールバーのCls属性を使用してみたところ、同じ結果になりました。

4

3 に答える 3

0

Chromeでは背景画像（グラデーション）が機能しますが、Firefoxでは無視されます。

したがって、あなたがしなければならないのは、次のようにbackground-imageとbackground-colorを設定することだけです.x-toolbar-dark。

.x-toolbar-dark{
   background-image: none;   
   background-color: transparent;   
}​

http://jsfiddle.net/awHkT/1/

于 2012-07-18T19:10:46.217 に答える
0

SenchaはWebkitブラウザー用であるため、CSSはChromeやSafariなどのWebkitブラウザー用に作成されています。したがって、この種または問題は、-webkitプレフィックスが付いたCSSルールが存在するためである必要があります。これは、Webkitブラウザーにのみ適用され、Firefoxでは無視されます。

しかし、とにかく、ツールバーにはグラデーションの背景があるので、それをオーバーライドしたい場合は、次のようにする必要があります：

background-image: none;
background-color: transparent;

最後に2つ

  • SenchaのCSSをオーバーライドするのは悪い習慣です。ツールバーの構成を使用clsしてCSSクラスを割り当て、このクラスを使用してツールバーのスタイルを設定します。

  • Firefoxではなく、SafariのChromeでアプリをテストしてください。

お役に立てれば

于 2012-07-18T19:12:25.127 に答える
-2

SASSとCompassをインストールするカスタムテーマを作成できますか？SASSとCompassのインストール手順は、MacとWindowsのユーザーによって若干異なります。Macユーザーは、ターミナルアプリケーションを開き、次のように入力する必要があります。

i. sudo gem install haml
ii. sudo gem install compass

インストールを完了するには、ユーザー名とパスワードで認証する必要があります。Windowsユーザーは、コマンドラインを開いて次のように入力する必要があります。

i. gem install haml
ii. gem install compass

Rubyのインストール

RubyはデフォルトでOSXにすでにインストールされているため、Macユーザーは休憩を取ります。Windowsユーザーは、rubyinstaller.orgからRubyインストーラーをダウンロードする必要があります。

インストールが完了すると、フォルダを設定してSASSとCompassの使用を開始する準備が整います。

カスタムテーマの作成

次に行う必要があるのは、独自のテーマSCSSファイルを作成することです。../lib/resources/sassでsencha-touch.scssファイルを見つけて、ファイルのコピーを作成します。ファイルの新しいコピーの名前をmyTheme.scssに変更します。

次に、新しいテーマを探すようにインデックスに指示する必要があります。前のサンプルファイルを使用して、index.htmlファイルを開き、次の行を見つけます。

<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">

index.htmlファイルのsencha-touch.cssスタイルシート参照をmyTheme.cssを指すように変更します。

<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">

SCSSとCSS

現在、cssフォルダーにsencha-touch.cssというスタイルシートが含まれており、scssフォルダーにsencha-touch.scssという一致するファイルがあることに注意してください。SCSSファイルがコンパイルされると、cssフォルダーに新しいファイルが作成されます。この新しいファイルには、.scssではなく.cssのサフィックスが付きます。

.scssは、SASSファイルのファイル拡張子です。SCSSはSassyCSSの略です。

パスを設定したので、作成したテーマファイルのコピーを見てみましょう。myTheme.scssファイルを開きます。次のように表示されます。

@import 'sencha-touch/default/all';
@includesencha-panel;
@includesencha-buttons;
@includesencha-sheet;
@includesencha-picker;
@includesencha-tabs;
@includesencha-toolbar;
@includesencha-toolbar-forms;
@includesencha-carousel;
@includesencha-indexbar;
@includesencha-list;
@includesencha-list-paging;
@includesencha-list-pullrefresh;
@includesencha-layout;
@includesencha-form;
@includesencha-msgbox;
@includesencha-loading-spinner;

このコードは、デフォルトのSencha Touchテーマファイルをすべて取得し、cssフォルダーにある新しいCSSファイルにコンパイルします。../lib/resources/cssフォルダーにあるsencha-touch.cssファイルを開くと、以前に使用していた圧縮されたCSSファイルが表示されます。このファイルはかなり巨大ですが、すべて基本的なコマンドから作成されています。

最良の部分は、1行のコードでアプリケーションの配色全体を変更できることです。

ベースカラー

SenchaTouchテーマの重要な変数の1つはです$base_color。この色とそのバリエーションは、テーマ全体で使用されます。意味を確認するには、テーマの色を変更して、myTheme.scssファイルの先頭に以下を追加します（他のすべてのテキストの上に）。

$base_color: #d1d3d4; //for example, color gray

次に、SASSファイルを再コンパイルしてスタイルシートを作成する必要があります。コマンドラインから、myTheme.scssファイルが存在するsassフォルダーに変更する必要があります。フォルダに移動したら、コマンドラインに次のように入力してEnterキーを押します。

compass compile

そして楽しんでください:)、これはあなたのmyTheme.cssファイルを新しい$base_color値で更新します。Safari、FF、またはその他の場所でページをリロードすると、アプリケーションに新しい灰色の外観が表示されます。

そしてこれをhttp://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-applicationで見てください

これがお役に立てば幸いです。:)

于 2012-07-18T19:54:35.043 に答える