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