WordPress themes use the style.css
file to control both the layout (positioning) of objects as well as how they look (appearance). We will create a different appearance for each sidebar of the theme, by using the color and background declarations of each sidebar selector.
We'll be using a variation of the Classic Wordpress theme in this example. You can use any theme you like, but the names of the selectors (such as #sidebar
instead of #menu)
may vary depending on the theme.
Open up your style.css
file and find the #menu{}
style. Change the background
color to #ff9966
, a peachy pink color. Next, change the border-top
declaration to none
, and the border-left
declaration to 5px dotted #ff3333
;. The #ff3333
hexidecimal code is a dark orange. Add the declaration color:#333
; to the #menu
style. Your style should now look like the example shown below:
#menu { position: absolute; background: #FF9966; border...