javascript 如何自定义页眉显示颜色?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6274283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize the header display color?
提问by peterpan
I'm new to jQuery mobile. I was trying to change the default header color to a #013A6F.
我是 jQuery 移动版的新手。我试图将默认标题颜色更改为 #013A6F。
<div data-role="header" data-theme="b">
<h1> Welcome</h1>
</div>
Any insight??
有什么见解??
采纳答案by naveen
I think this would be your css.[Link here]
If so, do this.
我认为这将是你的 css。[链接在这里]
如果是这样,请执行此操作。
.ui-bar-b h1{
background-color: #013A6F;
}
回答by J.T.Sage
You can actually easily add your own themes.
您实际上可以轻松添加自己的主题。
This: https://github.com/jquery/jquery-mobile/blob/master/themes/valencia/jquery.mobile.theme.cssif a second set of themes from the project repository. To make add your own, you can title them anything you wish, provided you wish to title them a single letter a-z.
这个:https: //github.com/jquery/jquery-mobile/blob/master/themes/valencia/jquery.mobile.theme.css如果来自项目存储库的第二组主题。要添加您自己的内容,您可以随意给它们命名,前提是您希望将它们命名为单个字母 az。
For instance, if you wanted to add your own theme 'x', it would look something like:
例如,如果您想添加自己的主题“x”,它看起来像:
.ui-bar-x { .... }
The file linked about is an excellent example at what you have to play with. And, as naveen pointed out, it is the .ui-bar-? class you'd want to play with to change the header color.
链接的文件是您必须玩的一个很好的例子。而且,正如 naveen 指出的,它是 .ui-bar-? 您想用来更改标题颜色的类。
There are a few third-party themes linked here, sadly a few of the links seem broken - they looked pretty nice when I originally saw it: http://forum.jquery.com/topic/custom-theme-28-2-2011
这里链接了一些第三方主题,遗憾的是,其中一些链接似乎已损坏 - 当我最初看到它时它们看起来很不错:http: //forum.jquery.com/topic/custom-theme-28-2- 2011年
回答by NJInamdar
This is a class in jquery.mobile-1.0b1.min.css, here I have used the web gradient colors as #a2cbe7 & #6aaedb. You can replace them with your own color codes.
这是 jquery.mobile-1.0b1.min.css 中的一个类,这里我使用了 web 渐变颜色作为 #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 );}