人氣 70°c

WP用CSS美化密碼保護頁的提示樣式

WordPress 內容管理系統,有時候部落格某些文章不希望所有訪客閱覽到,就會在發佈文章或頁面設置密碼,只有知道密碼的讀者才能夠打開文章內容,WP默認的密碼提示樣式不太美觀,想手動進行二次美化修改及優化。

文章或頁面加入密碼後,就會出現提示「這是一篇受密碼保護的文章,您需要提供訪問密碼:」或「這篇內容受到密碼保護。如需檢視內容,請於下方欄位輸入密碼:」然後也有Input輸入框填寫密碼。但是!WP預設的密碼頁樣式不太好看,想修改更加美麗,你可以在主題目錄的CSS文件,加入以下代碼,並適當修改到自己心目中喜歡的樣貌。

CSS:

.post-password-form {
	padding-top: 15px;
}
.post-password-form p {
	filter: glow(color:crimson, strength=2);
	color: white;
	font-weight: 900;
	text-shadow: 1px 1px 5px crimson;
}
.post-password-form:first-letter {
	font-size: 2.1em;
}
.post-password-form label {
	margin-bottom: 10px;
}
.post-password-form input[type="password"] {
	width: 95%;
	padding: 10px;
	margin: 10px 0;
	font-size: 16px;
	border-radius: 4px;
	border: none;
	color: #00000060;
	background: #6BD089;
}
.post-password-form input[type="password"]::placeholder {
	color: #00000060;
}
.post-password-form input[type="password"]:focus {
	color: #000000;
	outline: none;
}
.post-password-form input[type="submit"] {
	background: #085820;
	color: #ffffff;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
}
.post-password-form input[type="submit"]:hover,
.post-password-form input[type="submit"]:active {
	background: #44000A;
	color: #ffffff;
}
相關文章:
01. WP投稿功能新增密碼保護和隱藏內容
02. WP設置密碼保護的文章禁止搜尋引擎收錄
03. WP刪除修改標題前的私密or受保護的內容
標籤: