2011-06-08 60 views
6

我是jQuery手機新手。我試圖將默認標題顏色更改爲#013A6F。如何自定義標題顯示顏色?

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

任何洞察??

+0

你是怎麼試着改變它的?發生了什麼?你滿意嗎? – alexn 2011-06-08 04:42:54

+0

我正在研究jQuery主題。我想知道應該覆蓋在jQuery的主題CSS中,還是應該覆蓋我的樣式表? – peterpan 2011-06-08 04:44:03

+0

它應該在css文件夾中......至少這就是'默認'顏色用於常規jQuery themeroller – 2011-06-08 04:46:24

回答

6

我認爲這將是你的CSS。 [Link here]
如果是這樣,請執行此操作。

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

我應該對jquery.mobile.theme.css進行更改嗎? – peterpan 2011-06-08 04:57:02

+0

@peterpan:我建議你添加一個名爲'theme-addon.css'的新css。更容易維護的東西。否則,你會忘記一段時間後你改變了什麼:) – naveen 2011-06-08 05:03:18

+0

@peterpan爲什麼你在'.ui-bar-b'之後放了'hi'? – 2013-04-25 12:34:29

5

您實際上可以輕鬆地添加自己的主題。

這:https://github.com/jquery/jquery-mobile/blob/master/themes/valencia/jquery.mobile.theme.css如果從項目存儲庫的第二組主題。要添加你自己的,你可以給他們任何你想要的標題,只要你想給他們一個字母a-z。

舉例來說,如果你想增加自己的主題,「X」,它看起來是這樣的:

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

鏈接有關文件是在你有什麼玩一個很好的例子。而且,正如納文指出的那樣,它是.ui-bar-?你想要玩的課程來改變標題顏色。

這裏有鏈接的一些第三方的主題,可悲的是一些鏈接似乎打破 - 他們看起來相當不錯,當我最初看到它:http://forum.jquery.com/topic/custom-theme-28-2-2011

1

這是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);}