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 */ }
Thank you. This has been a huge help