A Little CSS

Styling Super Powers

CSS stands for Cascading Style Sheets and it is a language used to define the styles, or appearance of how things look on your website. CSS controls things like colors, spacing, borders, text alignment and more. By learning just a little bit about CSS you can do some really slick stuff. In this lesson we’ll go over the custom CSS we added to the Fit Band website to make things really shine.

Here is the complete CSS we used on the Fit Band website. After showing you the code, we’ll go over each piece, how to use it, and why it works.

To use this code, you can copy and paste it into the Additional CSS area of the WordPress customizer. The cool thing about the customizer is that you can see the changes you make take place in real time. So feel free to edit the code and watch to see what difference it makes on your website.

/** space header button **/
#header-bar-button {
  margin-left: 20px;
  margin-bottom: 10px;
}

/** set button border radius **/
.ttfmake-button, 
.site-main .gform_wrapper .gform_footer input.button, 
button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
  border-radius: 0px;
}

/** enews form **/
#subbox {
margin-bottom: 20px;
  width: 100%;
}

#subbutton {
  width: 100%;
}

/** logo hiDPI **/
.custom-logo {
  width: 215px;
  height: 45px;
}

/** extra top padding **/
.top-pad {
  padding-top: 30px;
}

/** placeholder color **/
input::placeholder {
  color: #ababab;
}

/** testimonials **/
img.wps-avatar {
  border-radius: 50%;
  width: 100px;
  margin-right: 10px
}

blockquote p {
  font-size: 17px;
}

Space Header Button

/** space header button **/
#header-bar-button {
  margin-left: 20px;
  margin-bottom: 10px;
}

 

This snippet of CSS adds a little bit of spacing around the Join button in the header bar. One cool thing about CSS is that it is pretty human readable. This code just adds 20px of spacing to the left of the button and 10px of spacing below the button.

The way we use it is by giving the anchor tag an id.

<a href="#" id="header-bar-button" class="ttfmake-button">Join Now</a>

The key component right now is the id=”header-bar-button” because that is what connects our Join Now link with the #header-bar-button CSS code.

TTFMake Button

/** set button border radius **/
.ttfmake-button, 
.site-main .gform_wrapper .gform_footer input.button, 
button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
  border-radius: 0px;
}

This little snippet of CSS make all our buttons have squared off edges. Without this, all the buttons you make in the Make Theme will have rounded edges. Sometimes that’s nice and other times it’s nice to square off the edges.

If you want to play around with it a little bit, you can adjust how rounded the edges are. For example, rather than having border-radius: 0px; try setting the border radius to 10px like this border-radius: 10px; In other words, just change the 0px to 10px and watch what difference it makes.

eNews Extended Styles

The Genesis eNews Extended plugin is the plugin we’re using to implement the email sign up form on the home page. We’ll dive deep into this in our email marketing course. But, if you’d like to use the eNews Extended plugin and have the form look like the one on the Fit Band site, then copy and paste this snippet of code into the Additional CSS area of the WordPress customizer.

/** enews form **/
#subbox {
  margin-bottom: 20px;
  width: 100%;
}

#subbutton {
  width: 100%;
}

The #subbox style is the text field that collects the email address. This snippet of CSS makes the email field stretch all the way (100%) across the column. In addition we put 20px of spacing at the bottom of the email field so that the submit button is not crammed up against the email field.

The #subbutton is the submit button for the email sign up form. This code makes the submit button stretch all the way across the column, just like the email field.

Retina Display Logo

To make your logo look crisp on retina displays (hiDPI) like 4k monitors, you want to make your images twice as wide and twice as tall as they will be displayed on the screen. This snippet of code makes the logo appear the correct size even though the image itself is 2x the size.

/** logo hiDPI **/
.custom-logo {
  width: 215px;
  height: 45px;
}

The Make Theme automatically applies the CSS class .custom-logo to the logo image you upload. The Fit Band logo is actually 430px wide and 90px tall – in terms of pixels. But we want to display it at half that size so we set the width to 215px and the height to 45px. With this CSS in place your logo will be displayed at 215 x 45 no matter what size the image actually is. You may need to adjust these values based on the size of your logo image.

Extra Top Padding

We set the Site Header to not have padding below it so that the banner image we added would be flush up against the site header.

But on the other pages, like the Contact page, About page, etc. we don’t want the page heading smashed up against the tan site header. It is nice to have a little breathing room at the top of the page so we created a class called .top-pad and assigned that class name to the Content sections at the top of the page.

/** extra top padding **/
.top-pad {
  padding-top: 30px;
}

To apply this style to the Content section, click the gear icon to access the settings for the section. Scroll down to the Code section and type top-pad as the CSS Class Name.

Once that CSS class is applied we get some extra spacing between the tan header and when the content begins on the page.

Placeholder Text Color

The placeholder text is the text in a form field that you see before you write something in the text field. For example, in this form we have email address set as the placeholder text.

If the placeholder text is too dark, I think it is a little confusing because it looks like there is already something written in the form filed. So, I like to lighten up the placeholder text color a little bit. We do that with this snippet of CSS.

/** placeholder color **/
input::placeholder {
  color: #ababab;
}

Testimonials In Style

The Make Theme comes with some really nice styles for customer testimonials right out of the box. We took it one step further by adding some rounded avatar images and setting the font size of the text in the testimonial.

/** testimonials **/
img.wps-avatar {
  border-radius: 50%;
  width: 100px;
  margin-right: 10px
}

blockquote p {
  font-size: 17px;
}

To take advantage of the CSS style for the images of the customers next to their testimonials, you need to add a CSS class to the image.

The fist step to get these circle avatars for the testimonials is to create square images of people’s faces. On the Fit Band site the images are 200px by 200px square which we resize to 100px by 100px via CSS to keep the images share on hiDPI displays. Then we apply the CSS class wps-avatar to the image to give it the rounded effect.

The border-radius: 50%; rounds each of the 4 corners so that the image becomes circular. Then we also add a right margin of 10px margin-right: 10px; to keep the customers name and age off the side of the image by a little bit. Also note that the image is Align > Left under the Display Settings. This allows the customer’s name and age to appear directly to the right of the image rather than showing up below the image.

Conclusion

This is relatively advanced stuff, and you can certainly build a really nice looking website using the Make Theme without using any custom CSS. If you’d like to use this CSS, you can simply copy and paste the code into the Additional CSS settings in the customizer, then just use the CSS class names where you need them. You don’t have to write any new CSS. It is a good idea to take a little time to understand how CSS works if you really want to have fine-tuned control over the design of your site.

Get Tips Like This In Your Inbox

If you liked this post, get more like this one emailed to you.

We respect your privacy. Cancel anytime.