2013-06-05 70 views
2

我想在我的jquery移動網站中添加一個自定義主題。如何添加自定義主題jQuery的移動從主題滾子網站?

我訪問了主題滾輪網站,我設計了一個主題,然後我下載了一個zip文件。

裏面有一個主題文件夾和一個index.html。裏面的主題文件夾有一個images文件夾2 CSS文件

1)customTheme.css

2)customTheme.min.css

我複製粘貼2)在我的項目夾。

然後在我的項目,我做的事:

<head> 
    <meta charset="utf-8"> 
    <title>CEID</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="customTheme.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <link rel="stylesheet" href="custom.css" /> 
</head> 

它應該工作的權利?我在這裏做錯了什麼?

主題不工作..

什麼我設計這樣的容貌:

enter image description here

什麼我得到這個樣子的:

enter image description here

我的HTML如下像這樣:

<head> 
    <meta charset="utf-8"> 
    <title>CEID</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="themes/CustomTheme.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 

使用自定義CSS:

/* Home page banner */ 
h2#banner { 
    background:transparent url(images/banner.png) no-repeat left 10px; 
    width:220px; 
    height:250px; 
    margin:-10px auto -150px auto; 
    text-indent:-9999px; 
} 
/* Home page banner landscape */ 
.landscape h2#banner { 
    background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px; 
    width:480px; 
    height:290px; 
    margin:-10px auto -175px auto; 
    text-indent:-9999px; 
} 

.ui-listview .ui-li-icon { 
    max-height: 32px !important; 
     max-width: 32px !important; 
} 

/* Home page icons */ 
.ui-li-icon { 
    top:0.4em !important; 
} 
/* Make room for icons */ 
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { 
    padding-left:47px; 
} 

我的html的身體:

<body> 

<div data-role="page" id="home"> 
    <div data-role="header"> 
    </div> 
    <div data-role="content"> 

     <h2 id="banner">CEID Mobile</h2> 

     <div class="menu_list"> 
      <ul data-inset="true" data-role="listview"> 
       <li><a href="information.html"><img src="images/info.png" alt="Information" class="ui-li-icon">Πληροφορίες</a></li> 
       <li><a href="staff.html"><img src="images/staff.png" alt="Staff" class="ui-li-icon">Προσωπικό</a></li> 
       <li><a href="research.html"><img src="images/research.png" alt="Research" class="ui-li-icon">Έρευνα</a></li> 
       <li><a href="undergraduates.html"><img src="images/undergraduates.png" alt="undergraduates" class="ui-li-icon">Προπτυχιακά</a></li> 
       <li><a href="metaptyxiaka.html"><img src="images/graduates.png" alt="Graduates" class="ui-li-icon">Μεταπτυχιακά</a></li> 
       <li><a href="students.html"><img src="images/students.png" alt="Students" class="ui-li-icon">Φοιτητές</a></li> 
       <li><a href="news.html"><img src="images/news.png" alt="News" class="ui-li-icon">Ανακοινώσεις</a></li> 
      </ul>  
     </div> 

     <div class="menu_list"> 
      <ul data-inset="true" data-role="listview"> 
       <li><a href="http://www.ceid.upatras.gr"><img src="images/info.png" alt="Information" class="ui-li-icon">Μεταφορά στον Ιστότοπο</a></li> 
      </ul>  
     </div> 


    </div> 
</div> 

</body> 
+0

但問題是什麼? – Jai

+0

它不工作。主題不起作用 –

回答

4

你的榜樣將無法正常工作,看看你有什麼:

<link rel="stylesheet" href="customTheme.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 

有3個不同的CSS文件。第一個是你的自定義主題,第二個只是結構化css文件(其他所有內容),最後一個是完整的jQuery Mobile css文件。目前你的最後一個css文件(完整的)是覆蓋自定義css主題。

解決您的問題改變一切:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<link rel="stylesheet" href="customTheme.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 

甚至更​​好去除jquery.mobile-1.3.1.min.css和只使用:你需要了解

<link rel="stylesheet" href="customTheme.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 

,jQuery Mobile的有3個可用的css文件。jquery.mobile-1.3.1.min.css應該單獨使用,因爲它適用於主題和結構。如果你有自定義主題,那麼你只需要使用自定義主題的CSS文件和jquery.mobile.structure-1.3.1.min.css

編輯:

不要忘了,你還需要data-theme添加到您的網頁DIV容器:

<div data-role="page" id="home" data-theme="b"> 

,或者你可以將其添加到只有你的頭,內容和頁腳DIV的,但我會建議你將其添加到頁面DIV。

+0

當我按照你說的做,只保留自定義主題和結構時,它的作用就是部分的。標題採用我分配的顏色。然而,頁面的其餘部分看起來很糟糕。按鈕或列表周圍沒有大綱。一切都是白色的。背景沒有顏色..任何想法我現在做錯了什麼? –

+0

你可以寄給我你的自定義CSS,我會看看?還至少有一個頁面。 – Gajotres

+0

並告訴我你的網頁的其餘部分使用經典的主題,只有你的頭部使用自定義的主題? – Gajotres

相關問題