How To Put A Background On Your Sidebar

Today I had a sudden desire to post a tutorial on something, but I wasn't sure what. So I asked my dear friend Awdur for help, and she expressed a desire for instructions on putting a background on your sidebar.
So I dug around and messed with a few things, the usual stuff. Well, I finally discovered how to change things IN the HTML, but it was really complicated, and I wanted there to be an easier way.
In the end, I came up with this, I hope you like it.
Adding the Code

1. As usual, the first step is to get into your HTML template. To do this, go to Dashboard>>Template>>Edit HTML
Now you need to find the following piece of code. To do this, press ctrl+f  for windows command+f for mac. A search box should appear.
/* Variable definitions
==================== 


2. Paste the following code just below it.

<Group description="Right Sidebar Background" selector="body">

<Variable name="sidebar.right.top.color" description="Right Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>

<Variable name="sidebar.right.left.color" description="Right Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>

<Variable name="sidebar.right.right.color" description="Right Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>

</Group>

<Group description="Left Sidebar Background" selector="body">

<Variable name="sidebar.left.top.color" description="Left Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>

<Variable name="sidebar.left.left.color" description="Left Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>

<Variable name="sidebar.left.right.color" description="Left Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>

</Group>

<Group description="Sidebar Column Background" selector="body">

<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>

<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>

</Group>

3. Now locate this piece of code:
 ]]></b:skin>


And just above it, place the following:
#sidebar-right-1 { background: $(sidebar.right.top.color); }
#sidebar-right-2-1 { background: $(sidebar.right.left.color); }
#sidebar-right-2-2 { background: $(sidebar.right.right.color); }
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }
.column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }
#sidebar-left-1 { background: $(sidebar.left.top.color); }
#sidebar-left-2-1 { background: $(sidebar.left.left.color); }
#sidebar-left-2-2 { background: $(sidebar.left.right.color); }


SAVE TEMPLATE and the code work is done.

Designing The Sidebar

Dashboard>>Template>>Customize>>Advanced
You should see options for changing the background styling of your sidebar. Enjoy!



BONUS TIP And as a bonus, something which I have always wanted, the code for centering your post titles. The fact that they were aligned left has ALWAYS bothered me, and I have finally figured out the remedy. Here is the code:
h3.post-title { text-align:center; }
There are two places where you can put the this code, either one should work. Dashboard>>Template>>Customize>>Advanced>>Add CSS, just copy the code into the white box.
OR
Dashboard>>Template>>Edit HTML, find this: 
]]></b:skin>

And put the alignment code right above it.








 photo theauthor_zps8356b86b.png

FACEBOOK   GOOGLEPLUS   PINTEREST   TWITTER

No comments:

Post a Comment

I should be most pleased if you would leave a comment. I do so love reading them and hearing what you think.
(all of it, I want to know everything you think about....wait no, that's creepy)