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 中被忽略。

所以你所要做的就是像这样设置背景图像和背景颜色.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;

最后两件事

  • 重写 Sencha 的 CSS 是不好的做法。使用cls工具栏上的配置为其分配一个 CSS 类，然后使用该类来设置工具栏的样式。

  • 不要使用 Firefox 测试您的应用程序，而是使用 Safari 的 Chrome。

希望这可以帮助

于 2012-07-18T19:12:25.127 回答
-2

你能创建一个安装 SASS 和 Compass 的自定义主题吗？对于 Mac 和 Windows 用户，安装 SASS 和 Compass 的说明略有不同。Mac 用户需要打开终端应用程序并键入以下内容：

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

您需要使用您的用户名和密码进行身份验证才能完成安装。Windows 用户需要打开命令行并键入以下内容：

i. gem install haml
ii. gem install compass

安装 Ruby

Mac 用户可以休息一下，因为 Ruby 已经默认安装在 OSX 上。Windows 用户应从 ruby​​installer.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 文件夹中创建一个新文件。这个新文件的后缀将是 .css 而不是 .scss。

.scss 是 SASS 文件的文件扩展名。SCSS 是 Sassy CSS 的缩写。

现在您已经设置了路径，让我们看看我们制作的主题文件副本。打开你的 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 文件。这个文件非常大，但它都是从基本命令创建的。

最好的部分是您现在可以使用一行代码更改应用程序的整个配色方案。

基本颜色

Sencha Touch 主题中的关键变量之一是$base_color. 这种颜色及其变化在整个主题中使用。要了解我们的意思，您可以更改主题的颜色，将以下内容添加到 myTheme.scss 文件的顶部（高于所有其他文本）：

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

接下来，您需要重新编译 SASS 文件以创建样式表。从命令行，您需要切换到 myTheme.scss 文件所在的 sass 文件夹。进入文件夹后，在命令行中键入以下内容并按 Enter：

compass compile

玩得开心:)，这将使用新$base_color值更新您的 myTheme.css 文件。在 Safari 或 FF 或任何地方重新加载页面，您应该会看到您的应用程序呈现新的灰色外观。

并在http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application中查看

我希望这有帮助。:)

于 2012-07-18T19:54:35.043 回答