如何自定义标题显示颜色?

时间:2011-06-08 04:41:30

标签: javascript jquery jquery-mobile

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

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

任何洞察力?

3 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:5)

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

这: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

答案 2 :(得分:1)

这是jquery.mobile-1.0b1.min.css中的一个类, 在这里我使用了网络渐变颜色作为#a2cbe7&amp; #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 );}