Jak zmienić wygląd gadżetu "obserwuj przez e-mail" - część 3 - okno newslettera

wtorek, 14 marca 2017

Na blogu już były dwa wpisy poświęcone gadżetowi "obserwuj przez e-mail". Dziś pokażę Wam jak w prosty sposób, bo za pomocą kodu CSS, zmienić wygląd tego gadżetu tak, aby przypominał okienko newslettera. Dzięki tej instrukcji, będziecie mogli dodać tekst do Waszego gadżetu "obserwuj przez e-mail", który zaprosi Waszych potencjalnych czytelników do subskrypcji.

1. Motyw (kiedyś szablon) - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

.widget.FollowByEmail {
text-align: center;
padding: 0 !important;
}
.FollowByEmail h2.title{
display: none;
}
.FollowByEmail .widget-content {
background: #fafafa;
padding: 20px;
}
.FollowByEmail .widget-content:before {
content: "Newsletter";
color: #161616;
text-align: center;
font: normal bold 14px 'Playfair Display', serif;
font-size: 20px;
font-style: normal;
}
.FollowByEmail .follow-by-email-inner {
display: block;
overflow: hidden;
}
.FollowByEmail .follow-by-email-inner:before {
content: "TU WPISZ TEKST";
color: #161616;
font-size: 13px;
font-style: italic;
line-height: 1.7;
margin: 10px;
display: block;
opacity: .7;
}
.FollowByEmail .follow-by-email-inner td {
display: block;
width: 100%;
}
.FollowByEmail input.follow-by-email-address {
display: block;
padding: 10px;
width: 100% !important;
font-style: italic;
border: 0 !important;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
margin-right: 0;
padding: 0;
border: 0;
color:#ffffff;
background-color: #000;
font:normal normal 12px Open Sans !important;
text-transform: uppercase;
letter-spacing: 2px;
height: 42px;
z-index: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
font-size:90% !important;
margin: 0 -1% 0px;
width: 100%;
}
.follow-by-email-inner .follow-by-email-submit:hover {
background: #fbe2dd;
color: #4e4d4c;
}

Tło całego okienka 
Marginesy wewnętrzne całego okienka
Tytuł 
Kolor tytułu
Font tytułu
Wielkość fontu
Tekst, który ma się pojawiać nad okienkiem wpisywania maila
Kolor tekstu
Wielkość tekstu
Styl tekstu 
Odstęp między liniami w tekście 
Margines
Marginesy wewnętrzne okna do wpisywania maila 
Kolor tekstu przycisku "subskrybuj" 
Kolor tła przycisku
Font przycisku 
Transformacja tekstu 
Odstęp między literami
Wysokość przycisku 
Kolor tła po najechaniu na przycisk myszką 
Kolor tekstu po najechaniu na przycisk myszką 

Efekt:

Jeśli spodobał Ci się wpis, przekaż go dalej :)