How to: Custom WordPress Widget CSS Styling in Pagelines Framework 2.0

Goal: Custom Widget colors, text and rounded corners:

• Title: dark-blue background; bold, white font.
• Body: medium-blue background; rounded top-left/right corners.
• NOTE: these are only initial customizations. More is required.

Solution: Add the following CSS to Child Theme stylesheet.

/* Widget Title: BG Color + Font */
h3.widget-title {
background-color: #0B5487; /* Dark blue */
color: white;
font-weight: bold;
margin: -10px -10px 0 -10px;
padding: 20px;
text-align: left;
}
/* Widget Body: BG Color + Rounded corners + Margin */
.widget {
background-color: #3683B1; /* Med blue */
border-top-left-radius: 12px; /* CSS3 */
border-top-right-radius: 12px; /* CSS3 */
border-bottom-right-radius: 0; /* CSS3 */
border-bottom-left-radius: 0; /* CSS3 */
-khtml-border-radius-topleft: 12px; /* Old Konqueror browsers */
-khtml-border-radius-topright: 12px; /* Old Konqueror browsers */
-khtml-border-radius-bottomright: 0; /* Old Konqueror browsers */
-khtml-border-radius-bottomleft: 0; /* Old Konqueror browsers */
-moz-border-radius-topleft: 12px; /* Firefox */
-moz-border-radius-topright: 12px; /* Firefox */
-moz-border-radius-bottomright: 0; /* Firefox */
-moz-border-radius-bottomleft: 0; /* Firefox */
-webkit-border-top-left-radius: 12px; /* Safari and Chrome */
-webkit-border-top-right-radius: 12px; /* Safari and Chrome */
-webkit-border-bottom-right-radius: 0; /* Safari and Chrome */
-webkit-border-bottom-left-radius: 0; /* Safari and Chrome */
margin-bottom: 10px; /* Add space between each Widget in Primary Sidebar */
}