如何更改bootsfaces中的主題

我已經使用BootsFaces創建了webapp應用程序。現在我想改變當前使用的主題。我已經克隆了git存儲庫並嘗試通過從bootswatch下載主題來更改主題，如下面提供的文檔所述。如何更改bootsfaces中的主題

定製

直到有自定義程序的新版本，你仍然可以定製外觀和感覺走的是構建系統的優勢。網上有很多Bootstrap定製工具，例如 Bootswatch。你需要的是一個帶有變量的文件來定製的構建。一些定製程序也會爲您提供.less文件。

將文件放在構建的BootsFaces /更少目錄和調整的BS-*文件使用的變量/ .LESS文件。

Bootswatch我可以下載variables.less，bootswatch.less，但在bootsfaces文件中有alerts.less，badges.less，bsf.less。我不知道如何自定義主題。我完全失去了嘗試改變主題，任何幫助，非常感謝。

UPDATE

那正是問題，從bootswatch或從任何引導的網站，不管我會得到靴子bootstrap.min.css和bootstrap.css，但是在bootsfaces soource代碼中，我發現bsf.css和theme.css文件目錄BootsFaces-OSP-master\BootsFaces\css。而在theme.css目錄BootsFaces-OSP-master\BootsFaces-OSP-master\BootsFaces\themes和BootsFaces.css在BootsFaces-OSP-master\BootsFaces\min目錄在其中做我需要bootstrap.css和bootstrap.min.css

來源

2015-08-23 Karthik Prasad

您必須將* .less文件編譯爲* .css文件。但我想有一個更簡單的方法：Bootswatch還允許您直接下載CSS文件（至少在我檢查的一個示例中）。 –

@StephanRauh可以請解釋一下，如何編譯* .less到* .css，在git源代碼中我找到了.less和* .css文件 –

首先，我希望你不需要編譯LESS文件，因爲已經有一組預先編譯的CSS文件。但是，如果您需要或想要查看，請訪問http://getbootstrap.com/getting-started/#grunt和http://lesscss.org/。你將不得不安裝node.js和Grunt。這是一個30分鐘的問題（除非你開始思考，而不是逐字按照指示:)）。 –

@Karthik BootsFaces團隊仍在研究中Build越來越Bootswatch的主題，所以我們可以得到BootsFaces庫在許多口味。

當然它也不是那麼容易，實際上需要建設圖書館借了一些更改後，這裏是如何：

克隆自己喜歡的GitHub的庫，下載bootswatch.less和variables.less後主題
將variables.less重命名爲bs-variables.less並將其與bootswatch.less複製到less目錄中

編輯bs-core.less以導入bs變量。爲了覆蓋原始變量

// Core variables 
@import "variables.less"; 
// Custom Variables override 
@import "bs-variables.less";

編輯BS-theme.less導入BS-variables.less和bootswatch.less覆蓋原始變量和更改應用到主題更少文件

// Core variables 
@import "variables.less"; 
@import "bs-variables.less"; 

@import "theme.less"; 
@import "bootswatch.less";

根據bootswatch主題自定義，其他文件可能需要您在步驟3中所做的更改，例如bs-alert
現在使用Gradle構建庫（閱讀Gradle構建需求）並享受！

來源

2015-08-25 19:46:57 TheCoder4eu

是的，我會按照這一步，而不是添加bootstrap.min.css，因爲我發現重複的主題被複制....... –

更新：v0.8.0添加Bootswatch主題支持[見主題部分]（http：// www.bootsfaces.net/layout/themes.jsf） – TheCoder4eu

更換您可以給link一個ID和一個特定的事件來改變href屬性你想要的css文件。

例子：

HTML

// Inside head of document 
<link id="currentCSS" rel="stylesheet" type="text/css" href=""> 


<select id="cssSelector" class="form-control"> 
    <option value="https://bootswatch.com/cerulean/bootstrap.min.css">Cerulean</option> 
    <option value="https://bootswatch.com/cosmo/bootstrap.min.css">Cosmo</option> 
    <option value="https://bootswatch.com/cyborg/bootstrap.min.css">Cyborg</option> 
</select> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

$(function() { 
    $('#cssSelector').on('change', function(event) { 
     var css = $(this).val(); 
     $('#currentCSS').attr('href', css); 
    }); 
});

來源

2015-08-23 19:24:26

如何更改bootsfaces中的主題

回答

相關問題