How can I style the WordPress sidebar?« Back to Questions List

I noticed in the output on the video about the WordPress theme the sidebar wasn't looking too pretty, is there a way I can style the sidebar in my design so it looks better in the output?

Added July 10, 2015 4:06 am

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

This is Easy, but can become Complex

Our default WordPress template has the styles already included so we suggest you start there. Styles commonly use 2 tags, one for layers and one for classes, you can simply define your sidebar elements and change them in your PSD.

*Important* industry rules apply:
a) if you plan to change individual side bar modules, then you must know the names of the elements
b) if you want to control the side bar in general, then you must be familiar with Pseudo Classes and Selectors

EXAMPLE CSS CLASSES

WordPress has specific rendering of elements, you will need to know your element parent-child relationship to correctly control the CSS. Eg. WordPress will use custom CSS selectors to control page navigation.

IN WORDPRESS:
a) .sidebar > ul[role="navigation"] > li.pagenav > .page_item, or
b) .sidebar > .pagenav > .page_item
IN PHOTOSHOP (CSS LAYER NAMES):
a) sidebar>>ul[role="navigation"]>>li.pagenav>>.page_item, or
b) sidebar>>.pagenav>>.page_item

-- OR --

IN PHOTOSHOP (CSS FOLDERS):
sidebar (folder)
-pagenav (folder)
--page_item (layer)

RESOURCES:

WP templates: //exportkit.com/suite/download/126/psd/wordpress
Layer styles – //exportkit.com/plugin/layer-tags/advanced-layer-tags/css-style-tag
Class styles – //exportkit.com/plugin/layer-tags/advanced-layer-tags/css-styles-tag

Answer by admin
Answered On July 12, 2015 5:25 pm #
Looking for another answer? View other questions in WordPress Output or get premium support for guaranteed results.
Asked by Chris Loggins★★★
1983 views
1 answer
Last Answered 7 years ago by admin

Categories

Recent Answers

asked by saramaria
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.