آموزش تغییر ظاهر فرم نظرات در وردپرس

آموزش تغییر ظاهر فرم نظرات در وردپرس

گاهی اوقات ساده بودن فرم نظرات شما را عذاب میدهد . شما براحتی میتوانید فرم نظرات سایت وردپرس خود را خصوصی سازی کنید.

در زیر لیستی از کلاس های فرم نظرات را مشاهده میکنید که میتوانید هر یک از آنها را براحتی خصوصی سازی کنید

#respond { }

#reply-title { }

#cancel-comment-reply-link { }

#commentform { }

#author { }

#email { }

#url { }

#comment

#submit

.comment-notes { }

.required { }

.comment-form-author { }

.comment-form-email { }

.comment-form-url { }

.comment-form-comment { }

.comment-form-cookies-consent { }

.form-allowed-tags { }

.form-submit

شما برای استایل دهی به فرم نظرات باید تغییرات خود را در فایل style.css ذخیره نمایید. در پایین چند کد مختلف برای استایل دهی برای شما قرار خواهیم داد که باید انها را در style.css جایگذاری نمایید

تغییر فونت های ورودی :

#author, #email {

font-family: "Open Sans", "Droid Sans", Arial;

font-style:italic;

color:#1d1d1d;

letter-spacing:.1em;

}

#url  {

color: #1d1d1d;

font-family: "Luicida Console", "Courier New", "Courier", monospace;

}

تغییر ظاهر دکمه ارسال نظرات :

#submit {

background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);

background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);

background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);

background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);

background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);

background-color:#44c767;

-moz-border-radius:28px;

-webkit-border-radius:28px;

border-radius:28px;

border:1px solid #18ab29;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:Arial;

font-size:17px;

padding:16px 31px;

text-decoration:none;

text-shadow:0px 1px 0px #2f6627;

}
#submit:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));

background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);

background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);

background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);

background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);

background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);

background-color:#5cbf2a;

}

#submit:active {

position:relative;

top:1px;

}

برجسته کردن فیلد فرم فعال :

#respond {
background: #fbfbfb;

padding:0 10px 0 10px;
}
/* Highlight active form field */
#respond input[type=text], textarea {

  -webkit-transition: all 0.30s ease-in-out;

  -moz-transition: all 0.30s ease-in-out;

  -ms-transition: all 0.30s ease-in-out;

  -o-transition: all 0.30s ease-in-out;

  outline: none;

  padding: 3px 0px 3px 3px;

  margin: 5px 1px 3px 0px;

  border: 1px solid #DDDDDD;

}
#respond input[type=text]:focus,

input[type=email]:focus,

input[type=url]:focus,

textarea:focus {

box-shadow: 0 0 5px rgba(81, 203, 238, 1);

margin: 5px 1px 3px 0px;

border: 2px solid rgba(81, 203, 238, 1);
}