This is the code I used in the second video…
.home-section-2 .widget-title .home-section-2 p .home-section-2 .entry-title a .home-section-2 .entry-header::after .home-section-2 .featured-content img .home-section-2 .featured-content p .home-section-2 a.button
If you want to follow along exactly without using the plugin, this is the code I made.
This code will not work in other widget areas.
You can paste the code into…
Appearance > Customize > Additional CSS (in WordPress versions 4.7+)
.home-section-2 a.button {
border: 3px solid #7d7d7d;
color: #7d7d7d;
}
.home-section-2 a.button:hover {
border: 3px solid #000000;
color: #FFFFFF;
}
.home-section-2 .entry-header::after {
display: none;
}
.home-section-2 .entry-title a {
color: #7d7d7d;
font-family: 'Sorts Mill Goudy', serif;
line-height: 42px;
}
.home-section-2 .entry-title a:hover {
color: #F04848;
}
.home-section-2 .widget-title {
color: #5d5d5d;
font-family: 'Sorts Mill Goudy', serif;
font-size: 68px;
line-height: 74px;
}
.home-section-2 p {
color: #7d7d7d;
line-height: 36px;
}
This is the script I used in the first video…
Building Widget Area, Layout Grids, for Parallax Pro theme
Parallax Pro does NOT have a flexible layout grid for the home page widget areas.
So for instance, if you put six widgets in Home Section 2 widget area. Those six widgets would display full width one above the other.
However, I can use the, Genesis Widget Column Classes plugin, to build a layout grid in Parallax Pro, that is similar to the one available in Altitude Pro and Infinity Pro.
After installing and activating the plugin, I can see a new drop down box and a tick box above each widget.
I want the first widget to occupy it’s own row, spanning the full width.
So I ignore the drop down option. I Just tick the First: tick box.
That widget will now be the first and only widget on that row.
To make the other widgets display in a grid, I choose options such as one-half or one-third.
And for the first widget in any row, I tick the box that says First:
A recap of the important points…
For the first widget in any row tick the First: tick box.
And for each row, the number of divs containing widgets, must add up to make a full row. For instance…
one-half & one-half makes one full row.
one-third & two-thirds makes one full row.
But two-fourths & one-fourth, does not add up to a full row. It makes three fourths or three quarters of a row.
That’s all for this video. If you experiment and practice you’ll soon be able to build all kinds of layout grids.
Bye for now. I hope to see you soon in the next video.
Second Video Script
This is the script I used in the second video. It’s about styling the Parallax Pro homepage using CSS.
In a previous video I built a grid layout in the Home Section 2 widget area, of the Parallax Pro theme.
In this video I made some small CSS styling changes. I used a PREMIUM plugin to do this. But if you’re a whiz with CSS you could write the code by hand.
In order to use this PREMIUM plugin I need to tell the plugin which elements on my page I want to target.
I pasted the CSS selectors below into the Quick Configurator box. If you’re using the same PREMIUM plugin I used, you can copy and paste these selectors in to the Quick Confugurator box and follow along if you wish.
If you can write CSS by hand, use these selectors and then add your own properties and values to the selectors.
What I did in this second video
- First I found a web page that I liked.
- Then I used What Font, Chrome extension to find the font-family, font-size and font color being used in the page I wanted to copy.
I changed the font to: Sorts Mill Goudy, Serif – in…
- Widget Headlines
- Featured Post Titles
The paragraph text was already Sorts Mill Goudy, Serif. So I didn’t need to change it.
The reason I used Sorts Mill Goudy, Serif font is because it’s built in to my theme. But you could use any font in the list. Just remember that, using too many different fonts, can slow down your site.”
As well as changing the font family I also changed the text color of…
- Widget Headlines: Color: #5e5e5e
- Paragraph Text & Featured Post Titles: Color: #7d7d7d
For the paragraph text I used…
- Font Size: 26px
- Line Height: 36px
I then used a selector of, entry-header::after to remove the underline between the headline and paragraph text in the Featured Post Widget. When I’d found the right selector, I used a CSS setting of…
- display: none
I also changed the button border & button text to…
- Color: #7d7d7d
I used whatfont Chrome extension to discover what fonts were being used on a website I liked. I then customized the website I was building to get a similar look.
Don’t forget, I used a PREMIUM plugin to do this but if you’re a CSS whiz you could write the code by hand.
If you want to customize your own website, learning the basics of CSS and HTML is a good investment of your time.
Even if you use the PREMIUM plugin I use, having a basic understanding of code is really helpful.