-2
我們最初在WordPress（主題53309）中構建了我們的網站，現在我試圖添加登錄模式，出於某種原因，來自登錄模式的樣式表正在受到衆多現有wordpress樣式表的干擾的問題。樣式表設置干涉
爲了讓它工作起來，我開始排除原始主題的.css文件，並將其全部註釋掉（*/- * /），然後一塊一塊地啓動，直到我到達故障點。 ..不幸的是，正如我所說，有很多問題，所以我將不得不分別處理每個問題。
第一個問題......在IE平臺以及Chrome上，登錄模式中的按鈕變得很小且迷失方向！分解代碼，我意識到.css文件上的這個問題被觸發，現在我評論它，直到我解決它。
足夠我的解釋....讓我粘貼在這裏所有的源代碼，希望有人可以闡明一些原因。
該網頁（包括登錄模態）：My home Page
登錄模態樣式表：
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "PT Sans", sans-serif;
color: #505260;
background-color: white;
}
a {
color: #2f889a;
text-decoration: none;
}
img {
max-width: 100%;
}
input, textarea {
font-family: "PT Sans", sans-serif;
font-size: 16px;
font-size: 1rem;
}
input::-ms-clear, textarea::-ms-clear {
display: none;
}
/* --------------------------------
Main components
-------------------------------- */
header[role=banner] {
position: relative;
height: 50px;
background: #343642;
}
header[role=banner] #cd-logo {
float: left;
margin: 4px 0 0 5%;
/* reduce logo size on mobile and make sure it is left aligned with the
transform-origin property */
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
header[role=banner] #cd-logo img {
display: block;
}
header[role=banner]::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
@media only screen and (min-width: 768px) {
header[role=banner] {
height: 80px;
}
header[role=banner] #cd-logo {
margin: 20px 0 0 5%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.main-nav {
float: right;
margin-right: 5%;
width: 44px;
height: 100%;
background: url("../img/cd-icon-menu.svg") no-repeat center center;
cursor: pointer;
}
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.main-nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
background: #292a34;
border-top: 1px solid #3b3d4b;
color: #FFF;
}
@media only screen and (min-width: 768px) {
.main-nav {
width: auto;
height: auto;
background: none;
cursor: auto;
}
.main-nav ul {
position: static;
width: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
line-height: 80px;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav li {
display: inline-block;
margin-left: 1em;
}
.main-nav li:nth-last-child(2) {
margin-left: 2em;
}
.main-nav a {
display: inline-block;
height: auto;
line-height: normal;
background: transparent;
}
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
}
.main-nav a.cd-signup {
background: #2f889a;
border: none;
}
}
/* --------------------------------
xsigin/signup popup
-------------------------------- */
.cd-user-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(52, 54, 66, 0.9);
z-index: 3;
overflow-y: auto;
cursor: pointer;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.3s, visibility 0.3s;
-moz-transition: opacity 0.3s, visibility 0.3s;
transition: opacity 0.3s, visibility 0.3s;
}
.cd-user-modal.is-visible {
visibility: visible;
opacity: 1;
}
.cd-user-modal.is-visible .cd-user-modal-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.cd-user-modal-container {
position: relative;
width: 90%;
max-width: 600px;
background: #FFF;
margin: 3em auto 4em;
cursor: auto;
border-radius: 0.25em;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.cd-user-modal-container .cd-switcher:after {
content: "";
display: table;
clear: both;
}
.cd-user-modal-container .cd-switcher li {
width: 50%;
float: left;
text-align: center;
}
.cd-user-modal-container .cd-switcher li:first-child a {
border-radius: .25em 0 0 0;
}
.cd-user-modal-container .cd-switcher li:last-child a {
border-radius: 0 .25em 0 0;
}
.cd-user-modal-container .cd-switcher a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
background: #d2d8d8;
color: #809191;
}
.cd-user-modal-container .cd-switcher a.selected {
background: #FFF;
color: #505260;
}
@media only screen and (min-width: 600px) {
.cd-user-modal-container {
margin: 4em auto;
}
.cd-user-modal-container .cd-switcher a {
height: 70px;
line-height: 70px;
}
}
.cd-form {
padding: 1.4em;
}
.cd-form .fieldset {
position: relative;
margin: 1.4em 0;
}
.cd-form .fieldset:first-child {
margin-top: 0;
}
.cd-form .fieldset:last-child {
margin-bottom: 0;
}
.cd-form label {
font-size: 14px;
font-size: 0.875rem;
}
.cd-form label.image-replace {
/* replace text with an icon */
display: inline-block;
position: absolute;
left: 15px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 20px;
width: 20px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
text-shadow: none;
background-repeat: no-repeat;
background-position: 50% 0;
}
.cd-form label.cd-username {
background-image: url("../img/cd-icon-username.svg");
}
.cd-form label.cd-email {
background-image: url("../img/cd-icon-email.svg");
}
.cd-form label.cd-password {
background-image: url("../img/cd-icon-password.svg");
}
.cd-form input {
margin: 0;
padding: 0;
border-radius: 0.25em;
}
.cd-form input.full-width {
width: 100%;
}
.cd-form input.has-padding {
padding: 12px 20px 12px 50px;
}
.cd-form input.has-border {
border: 1px solid #d2d8d8;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.cd-form input.has-border:focus {
border-color: #343642;
box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
outline: none;
}
.cd-form input.has-error {
border: 1px solid #d76666;
}
.cd-form input[type=password] {
/* space left for the HIDE button */
padding-right: 65px;
}
.cd-form input[type=submit] {
padding: 16px 0;
cursor: pointer;
background: #2f889a;
color: #FFF;
font-weight: bold;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus {
background: #3599ae;
outline: none;
}
.cd-form .hide-password {
display: inline-block;
position: absolute;
right: 0;
top: 0;
padding: 6px 15px;
border-left: 1px solid #d2d8d8;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 14px;
font-size: 0.875rem;
color: #343642;
}
.cd-form .cd-error-message {
display: inline-block;
position: absolute;
left: -5px;
bottom: -35px;
background: rgba(215, 102, 102, 0.9);
padding: .8em;
z-index: 2;
color: #FFF;
font-size: 13px;
font-size: 0.8125rem;
border-radius: 0.25em;
/* prevent click and touch events */
pointer-events: none;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
-moz-transition: opacity 0.2s 0, visibility 0 0.2s;
transition: opacity 0.2s 0, visibility 0 0.2s;
}
.cd-form .cd-error-message::after {
/* triangle */
content: '';
position: absolute;
left: 22px;
bottom: 100%;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}
.cd-form .cd-error-message.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.2s 0, visibility 0 0;
-moz-transition: opacity 0.2s 0, visibility 0 0;
transition: opacity 0.2s 0, visibility 0 0;
}
@media only screen and (min-width: 600px) {
.cd-form {
padding: 2em;
}
.cd-form .fieldset {
margin: 2em 0;
}
.cd-form .fieldset:first-child {
margin-top: 0;
}
.cd-form .fieldset:last-child {
margin-bottom: 0;
}
.cd-form input.has-padding {
padding: 16px 20px 16px 50px;
}
.cd-form input[type=submit] {
padding: 16px 0;
}
}
.cd-form-message {
padding: 1.4em 1.4em 0;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4;
text-align: center;
}
@media only screen and (min-width: 600px) {
.cd-form-message {
padding: 2em 2em 0;
}
}
.cd-form-bottom-message {
position: absolute;
width: 100%;
left: 0;
bottom: -30px;
text-align: center;
font-size: 14px;
font-size: 0.875rem;
}
.cd-form-bottom-message a {
color: #FFF;
text-decoration: underline;
}
.cd-close-form {
/* form X button on top right */
display: block;
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: -40px;
background: url("../img/cd-icon-close.svg") no-repeat center center;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
@media only screen and (min-width: 1170px) {
.cd-close-form {
display: none;
}
}
#cd-login, #cd-signup, #cd-reset-password {
display: none;
}
#cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
display: block;
}/* These are the button styles! interfering with modal...
.btn, .reply a {
\t border:1px solid #777777;
\t color:#333333;
\t text-decoration:none;
\t background:#fff;
\t cursor:pointer;
\t padding:0;
\t display:inline-block;
\t text-transform:uppercase;
\t border-radius:0;
\t outline:none;
\t box-shadow:none;
\t text-shadow:none;
\t position:relative;
\t letter-spacing:0;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
\t font:bold 18px/1.2em 'Lato', sans-serif;
}
.btn > span, .reply a > span {
\t position:relative;
\t z-index:100;
\t display:inline-block;
\t vertical-align:middle;
\t padding:15px 21px;
}/*
.btn:hover, .btn:active, .reply a:hover, .reply a:active {
\t color:#fff;
\t background:#ff6b57;
\t border-color:#333333;
\t box-shadow:none;
}
.btn:hover > span:after, .btn:active > span:after, .reply a:hover > span:after, .reply a:active > span:after {
\t color:#333333;
\t margin-left:15px;
}
.btn:focus, .reply a:focus {
\t color:#333333;
\t background:#fff;
\t border-color:#333333;
}
.input-btn { padding:0; }
.input-btn > span {
\t display:inline-block;
\t padding-bottom:0;
\t vertical-align:baseline;
\t position:relative;
}
.input-btn input {
\t display:block;
\t border:none;
\t background:none;
\t color:#333333;
\t z-index:100;
\t padding:15px 21px !important;
\t margin:0;
\t position:relative;
\t height:auto;
\t text-transform:inherit;
\t font:bold 18px/1.2em 'Lato', sans-serif;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.input-btn:hover input, .input-btn:active input {
\t color:#fff !important;
\t background:none;
\t border-color:#fff;
\t box-shadow:none;
}
.input-btn:focus input {
\t color:#333333;
\t background:none;
\t border-color:#333333;
}
.btn-from-top { background:none; }
.btn-from-top:before {
\t -webkit-transition:all 0.3s ease;
\t -moz-transition:all 0.3s ease;
\t -o-transition:all 0.3s ease;
\t transition:all 0.3s ease;
\t content:'';
\t width:100%;
\t height:0;
\t top:0;
\t left:0;
\t z-index:10;
\t position:absolute;
\t background:#ff6b57;
\t border-radius:0;
}
.btn-from-top:hover {
\t background:none;
\t color:#fff;
}
.btn-from-top:hover:before {
\t height:100%;
\t background:#ff6b57;
}
.btn-from-bottom:before {
\t content:'';
\t width:100%;
\t height:0;
\t bottom:0;
\t left:0;
\t z-index:10;
\t position:absolute;
\t background:#ff6b57;
\t border-radius:0;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-from-bottom:hover {
\t background:#fff;
\t color:#fff;
}
.btn-from-bottom:hover:before {
\t height:100%;
\t background:#ff6b57;
}
.btn-from-left:before {
\t content:'';
\t width:0;
\t height:100%;
\t top:0;
\t left:0;
\t z-index:10;
\t position:absolute;
\t background:#ff6b57;
\t border-radius:0;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-from-left:hover {
\t background:#fff;
\t color:#fff;
}
.btn-from-left:hover:before {
\t width:100%;
\t background:#ff6b57;
}
.btn-from-right:before {
\t content:'';
\t width:0;
\t height:100%;
\t top:0;
\t right:0;
\t z-index:10;
\t position:absolute;
\t background:#ff6b57;
\t border-radius:0;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-from-right:hover {
\t background:#fff;
\t color:#fff;
}
.btn-from-right:hover:before {
\t width:100%;
\t background:#ff6b57;
}
.btn-from-center-vertical, .btn-from-center-horizontal, .btn-to-center-vertical, .btn-to-center-horizontal, .btn-from-center-in-sides { overflow:hidden; }
.btn-from-center-vertical:before, .btn-from-center-vertical:after, .btn-from-center-horizontal:before, .btn-from-center-horizontal:after, .btn-to-center-vertical:before, .btn-to-center-vertical:after, .btn-to-center-horizontal:before, .btn-to-center-horizontal:after, .btn-from-center-in-sides:before, .btn-from-center-in-sides:after {
\t content:'';
\t position:absolute;
\t background:#ff6b57;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-from-center-vertical { background:#ff6b57; }
.btn-from-center-vertical:before, .btn-from-center-vertical:after {
\t width:55%;
\t top:0;
\t height:100%;
\t background:#fff;
}
.btn-from-center-vertical:before { left:0; }
.btn-from-center-vertical:after { right:0; }
.btn-from-center-vertical:hover:before, .btn-from-center-vertical:hover:after { width:0; }
.btn-from-center-horizontal { background:#ff6b57; }
.btn-from-center-horizontal:before, .btn-from-center-horizontal:after {
\t background:#fff;
\t width:100%;
\t left:0;
\t height:55%;
}
.btn-from-center-horizontal:before { top:0; }
.btn-from-center-horizontal:after { bottom:0; }
.btn-from-center-horizontal:hover:before, .btn-from-center-horizontal:hover:after { height:0; }
.btn-to-center-horizontal:before, .btn-to-center-horizontal:after {
\t height:0;
\t left:0;
\t width:100%;
}
.btn-to-center-horizontal:before { top:0; }
.btn-to-center-horizontal:after { bottom:0; }
.btn-to-center-horizontal:hover:before, .btn-to-center-horizontal:hover:after { height:50%; }
.btn-to-center-vertical:before, .btn-to-center-vertical:after {
\t width:0;
\t top:0;
\t height:100%;
}
.btn-to-center-vertical:before { left:0; }
.btn-to-center-vertical:after { right:0; }
.btn-to-center-vertical:hover:before, .btn-to-center-vertical:hover:after { width:50%; }
.btn-from-center-in-sides {
\t padding:15px 21px;
\t background:#fff;
}
.btn-from-center-in-sides:before {
\t content:'';
\t width:100%;
\t height:100%;
\t background:#ff6b57;
\t border-radius:0;
\t position:absolute;
\t top:0;
\t left:0;
\t -webkit-transform:scale(0);
\t -moz-transform:scale(0);
\t -ms-transform:scale(0);
\t -o-transform:scale(0);
\t transform:scale(0);
\t -webkit-transform:scale(0);
\t -moz-transform:scale(0);
\t -ms-transform:scale(0);
\t -o-transform:scale(0);
\t transform:scale(0);
}
.btn-from-center-in-sides:hover, .btn-from-center-in-sides:active { background:#fff; }
.btn-from-center-in-sides:hover:before, .btn-from-center-in-sides:active:before {
\t -webkit-transform:scale(1.2);
\t -moz-transform:scale(1.2);
\t -ms-transform:scale(1.2);
\t -o-transform:scale(1.2);
\t transform:scale(1.2);
\t -webkit-transform:scale(1.2);
\t -moz-transform:scale(1.2);
\t -ms-transform:scale(1.2);
\t -o-transform:scale(1.2);
\t transform:scale(1.2);
}
.btn-only-text-line-from-left {
\t padding:0;
\t border:none;
\t transition:400ms color ease;
}
.btn-only-text-line-from-left span {
\t padding:1px 0;
\t display:block;
}
.btn-only-text-line-from-left span:before {
\t content:'';
\t width:0;
\t height:1px;
\t background:#333333;
\t position:absolute;
\t bottom:0;
\t left:0;
\t z-index:100;
\t opacity:1;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-only-text-line-from-left.input-btn > span { padding:0; }
.btn-only-text-line-from-left.input-btn input {
\t display:block;
\t height:100%;
}
.btn-only-text-line-from-left:hover, .btn-only-text-line-from-left:active { color:#fff; }
.btn-only-text-line-from-left:hover span:before, .btn-only-text-line-from-left:active span:before {
\t width:100%;
\t background:#fff;
}
.btn-only-text-two-lines-from-left {
\t padding:0;
\t border:none;
\t transition:400ms color ease;
}
.btn-only-text-two-lines-from-left span {
\t padding:2px 0;
\t display:inline-block;
}
.btn-only-text-two-lines-from-left span:before {
\t content:'';
\t width:0;
\t height:1px;
\t background:#333333;
\t position:absolute;
\t top:0;
\t left:0;
\t z-index:-1;
\t opacity:1;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-only-text-two-lines-from-left span:after {
\t content:'';
\t width:0;
\t height:1px;
\t background:#333333;
\t position:absolute;
\t bottom:0;
\t left:0;
\t z-index:-1;
\t opacity:1;
\t -webkit-transition:all 0.3s;
\t -moz-transition:all 0.3s;
\t transition:all 0.3s;
\t transition:all 0.3s ease 0s;
}
.btn-only-text-two-lines-from-left.input-btn > span { padding:0; }
.btn-only-text-two-lines-from-left.input-btn input {
\t display:block;
\t height:100%;
}
.btn-only-text-two-lines-from-left:hover, .btn-only-text-two-lines-from-left:active { color:#fff; }
.btn-only-text-two-lines-from-left:hover span:before, .btn-only-text-two-lines-from-left:hover span:after, .btn-only-text-two-lines-from-left:active span:before, .btn-only-text-two-lines-from-left:active span:after {
\t width:100%;
\t background:#fff;
}
*/我試過到目前爲止：如果你看一下主題CSS你會注意到我是如何添加了許多「！重要」標籤......其目的顯然是覆蓋WordPress的主題CSS，這顯然是設計來以某種方式統治一切......但是，現在不幸的是，它並沒有預算...按鈕仍然搞砸了。
我不能做什麼：我不能修改的主題CSS，因爲我不知道在頁面還有什麼會因此改變....
我們無法通過單獨查看樣式表來判斷任何事情，因此我們需要查看它的實際操作。你需要創建一個小提琴或其他東西。 –
您可以做的是從您的登錄頁面中刪除原始CSS，然後根據需要從原始CSS中緩慢添加CSS定義到您自己的CSS中。根據需要覆寫 – ochi
ochi，這正是我所做的......而且這篇文章是寫在一個棘手的地方......我知道這是按鈕樣式，但我的解決方案用「！important」覆蓋不起作用出於某種原因 –