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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Extend Primary Sidebar Background To Footer

This solution enables you to display the background of the primary sidebar widget area all the way to the footer of your site like this:

full-hieght-sidebar

The background displays when the primary sidebar is active or not.

Here’s how the sidebar background looks when you populate the primary sidebar widget area with the calendar widget.

sidebar-background

This solution involves 3 steps:

  1. Create 2 jQuery files in your child themes js folder. Create a js folder in your child themes root directory if needed.
  2. Add PHP to the end of your child themes functions file to load the js.
  3. Add CSS to your child themes style.css file to color the background of your sidebar.

This tutorial was written in response to the following question from a member of WP Sites:

I don’t know if it is possible, but I want the sidebar to have a background color to the bottom of the page. Now it only has a background color where the widgets are, but I also want it to have a background color where there are no widgets. It has to be one block visually so to speak. Can you help me with this problem or do I want something that is impossible to achieve?

Register for full access

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.