This is the script I used in the video
I’ve put the Genesis eNews Extended widget, in the Front page 3 widget area, of the Infinity Pro theme by StudioPress. Now I’m going to customize the CSS and make some small changes to the styling.
These are the CSS selectors I used in the video…
.front-page-3 .enews-widget .widget-title .front-page-3 .enews-widget p .front-page-3 .enews-widget form .front-page-3 .enews-widget input .front-page-3 .enews-widget input[type=email], .front-page-3 .enews-widget input[type=submit]
If you look carefully you’ll see that there are no “quote marks” in these CSS selectors.
If you want to follow along exactly without using the plugin, this is the code I made in the video.
This code will not work in other widget areas.
You can paste the code directly into WordPress via…
Appearance > Customize > Additional CSS (in WordPress versions 4.7+)
@media screen and (min-width: 1024px) {
.front-page-3 .enews-widget .widget-title {
font-size: 80px;
}
.front-page-3 .enews-widget p {
font-size: 22px;
font-style: italic;
}
.front-page-3 .enews-widget form
.front-page-3 .enews-widget input {
width: 40%;
}
.front-page-3 .enews-widget input[type=email],
.front-page-3 .enews-widget input[type=submit] {
width: 30%;
}
}
What did I do in the video..?
- Changed the button text.
- Reduced the size of email input box BUT! Only on desktops.
- I customized widget-title text.
- I customized paragraph text.
Some important points to remember from this video
First I had to copy and paste the selectors into the premium plugin that I use.
And, if you change the size of the email input box, take great care to make sure that it will fit. Test to see what it looks like using different screen sizes such as an iPad or mobile phone.
Bye for now. I’ll see you in the next video.