• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Adding a CSS Background to the Shimmer Child Theme for Genesis

September 15, 2015 by Sallie Goetsch 2 Comments

screenshot: Shimmer Theme demo page

I’m building a site right now that uses the Shimmer child theme for Genesis from Viva la Violette. The theme has a background of light-colored polka dots made from a very small tiled image. A background image that small is not going to cause performance issues, but I’m biased in favor of using CSS (or icon fonts, when appropriate) instead of images wherever I can.

Since I am not all that expert in CSS gradients, I looked around for a pattern to start from, and found a simple polka-dot example at Enjoy CSS. Then I tweaked the colors and the radii of the dots until I had something I liked. This was not an exact duplicate of the original pattern: I decided I liked the way it looked with two sizes of dots.

pattern: tiny dots in pale gold
Original background pattern
Polka dot pattern built only with CSS3
Enjoy CSS example: gray background with white dots
Pattern with two sizes of lilac dots, created with Easy CSS
Pattern with two sizes of lilac dots, created with Easy CSS

The Enjoy CSS generator provides code for a class called .gradient-pattern, but I wanted to apply the background to the body. This turned out to be fairly easy.

The original CSS for site body in Shimmer is as follows:

body {
	background: url(images/bg.png) #fff;
	color: #989797;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
}

If you want to use the background I created, change that to:

body {
	background: -webkit-radial-gradient(#f4f0f7 0, #f4f0f7 4%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 100%), -webkit-radial-gradient(#f4f0f7 0, #f4f0f7 4%, #f4f0f7 9%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
	background: -moz-radial-gradient(#f4f0f7 0, #f4f0f7 4%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 100%), -moz-radial-gradient(#f4f0f7 0, #f4f0f7 4%, #f4f0f7 9%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
	background: radial-gradient(#f4f0f7 0, #f4f0f7 4%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 100%), radial-gradient(#f4f0f7 0, #f4f0f7 4%, #f4f0f7 9%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
	background-position: 0 0, 30px 30px;
	-webkit-background-origin: padding-box;
	background-origin: padding-box;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-background-size: 60px 60px;
	background-size: 60px 60px;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-transform: none;
	transform: none;
	-webkit-transform-origin: 50% 50% 0;
	transform-origin: 50% 50% 0;
	color: #989797;
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.625;
}

(Okay, so I increased the font size, which you don’t have to, but almost all theme designers make default fonts too small.)

Enjoy CSS is free, but you do need to log in with a social account in order to get the code after you’ve finished using the generator.

Stay tuned to see the new Shimmer-based site in my portfolio–launch date is less than a week away!

Related Items

  • WP-Tonic Episode 95: Choosing a Premium WordPress Theme
    WP-Tonic 095: How to Pick the Right Premium WordPress Theme
  • How to Configure Your WordPress Site for Mobile Devices (in One Minute)
  • Video Tutorial: Adding a (Dynamic) Widget

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: CSS, Genesis Theme Framework, Tutorial

Reader Interactions

Comments

  1. Melker Walter says

    February 18, 2017 at 7:08 am

    I like how you use gradients on background property. If you use background images you might be interested in having a color filter effect- I’m not sure if it looks good with patterns by the way.

    The thing is, the background image is added with linear gradient on top but it has a lower opacity so it looks like its a color overlay, see this post: http://www.22bulbjungle.com/background-image-color-overlay-create-a-filter-look-with-css/

    Reply
    • Sallie Goetsch says

      February 18, 2017 at 1:47 pm

      That looks interesting, Melker. I’ve played a bit recently with the CSS filter property (which works on both images and videos), but not as much with gradients.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact