如何自定义表头显示颜色？答案

【问题标题】：How to customize the header display color?如何自定义表头显示颜色？
【发布时间】：2011-06-08 04:41:29
【问题描述】：

我是 jQuery 移动新手。我试图将默认标题颜色更改为 #013A6F。

<div data-role="header" data-theme="b">
  <h1> Welcome</h1>
</div>

有什么见解吗？？

【问题讨论】：

你是如何尝试改变它的？发生了什么？你满意吗？
我正在研究 jQuery 主题。我想知道是否应该在 jQuery 的主题 css 中覆盖，还是应该在我的样式表中覆盖？？
它应该在 css 文件夹中……至少这是常规 jQuery 主题滚轮的“默认”颜色所在

标签： javascript jquery jquery-mobile

【解决方案1】：

我认为这将是您的 css。[Link here]
如果是这样，请执行此操作。

.ui-bar-b h1{
    background-color: #013A6F;
}

【讨论】：

我应该对 jquery.mobile.theme.css 进行更改吗？？
@peterpan：我建议你添加一个名为 theme-addon.css 的新 CSS。更好地轻松维护事物。否则你会忘记一段时间后你改变了什么:)
@peterpan 为什么你把hi 放在.ui-bar-b 之后？
@SudheerKumar：实际上是h1 :)

【解决方案2】：

您实际上可以轻松添加自己的主题。

这：https://github.com/jquery/jquery-mobile/blob/master/themes/valencia/jquery.mobile.theme.css 如果来自项目存储库的第二组主题。要添加您自己的名称，您可以随意命名它们，前提是您希望将它们命名为单个字母 a-z。

例如，如果您想添加自己的主题“x”，它看起来像：

.ui-bar-x { .... }

链接的文件是一个很好的例子，说明你必须玩什么。而且，正如 naveen 指出的那样，它是 .ui-bar-?您想要更改标题颜色的类。

这里链接了一些第三方主题，遗憾的是，其中一些链接似乎已损坏 - 当我最初看到它们时它们看起来很不错：http://forum.jquery.com/topic/custom-theme-28-2-2011

【讨论】：

【解决方案3】：

这是 jquery.mobile-1.0b1.min.css 中的一个类，在这里，我使用了网络渐变颜色作为#a2cbe7 和#6aaedb。您可以用自己的颜色代码替换它们。

.ui-bar-b{border:1px solid #456f9a;background:#6aaedb;color:#fff;font-weight:bold;text-shadow:0 -1px 1px #254f7a;background: #6aaedb; /* Old browsers */
    background: -moz-linear-gradient(top, #6aaedb 0%, #a1cae6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6aaedb), color-stop(100%,#a1cae6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6aaedb 0%,#a1cae6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6aaedb 0%,#a1cae6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6aaedb 0%,#a1cae6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #6aaedb 0%,#a1cae6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6aaedb', endColorstr='#a1cae6',GradientType=0 );}

【讨论】：