如何定製Auth0鎖定控件的樣式？

我正在嘗試設置Auth0鎖定控件的樣式，但是我的樣式未應用。如何定製Auth0鎖定控件的樣式？

根據文檔，我應該能夠設置該控件的樣式來匹配我的網站，Lock: Customize the look and feel。

前置在自定義CSS的前體鍵，以便在CSS規範贏得

我加入這行我不太樣式表。

body #a0-lock.a0-theme-default .a0-panel { 
    font-family: 'Open Sans', sans-serif; 
}

但是我的風格不適用，當我在Firefox中調試樣式表時，我可以看到我的代碼丟失了選擇。

我怎樣才能贏得樣式選擇？我如何設計Auth0鎖定控件？

如果它的重要我運行一個ASP.Net MVC網站，我的少轉換爲CSS。我正在使用Auth0鎖定版本8.2。

來源

2016-03-23 James Wood

我能夠使用一個更具體的選擇器來解決。在我的問題，我錯過了全選（*）

所以; body #a0-lock.a0-theme-default .a0-panel成爲; body #a0-lock.a0-theme-default .a0-panel *

我發現獲取完整選擇器的最簡單方法是調試正在運行的應用程序的樣式。

來源

2016-03-24 21:56:16

確保您的css順序也被正確定義。據order of css definition docs

Auth0鎖插入它在HTML文檔的頭節點CSS定義，它這樣做在最後。因此，爲了覆蓋鎖的主體風格，你必須爲Auth0鎖定包含標籤定義後立即插入你的CSS體內節點，：

這爲我工作

<script src="http://cdn.auth0.com/js/lock-7.min.js"></script> 
<link rel="stylesheet" href="custom.css"/>

然後在我的css

body #a0-lock.a0-theme-default .a0-panel { 
    background-color: greenyellow; 
}

若要更改各個元素的font-family使用更具體的選擇器。例如。改變鎖頭使用的字體家庭以下

body #a0-lock.a0-theme-default .a0-header h1 { 
    font-family: 'Open Sans' !important; 
}

改變所有面板元件字體家庭使用*像下面

body #a0-lock.a0-theme-default .a0-panel * { 
    font-family: 'Open Sans' !important; 
}

來源

2016-03-24 08:19:29 kachhalimbu

試過，但它沒有幫助。 –

什麼沒有工作？背景顏色變爲'greenyellow'還是字體族變爲'Open Sans'？在後面的例子中，使用更具體的選擇器來更改auth0鎖頭的font-family添加'a0-header h1'選擇器。要更改所有面板元素的font-family，請在選擇器末尾添加「*」。看到我上面的編輯。 – kachhalimbu

CSS定義的順序似乎沒有太大影響。 –

如何定製Auth0鎖定控件的樣式？

回答

相關問題