Frontend Sidebars CSS Boxes w/ curved edges & gradient backgrounds


Hi folks!  Thanks for all the help your posts have been giving me.  I figured out how to create some nice boxes in CSS with curved corners, colored borders, and a gradient background and here's the code!

/*right sidebar boxes gradient background*/
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats,
#sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .sidebar-table-of-contents,
#sidebar .adventure-log-index-filter{
background-image: linear-gradient(to bottom, #181818 , #002A50);
width: 226px;
border: 3px solid #489ebe;
padding: 10px;
margin: 20px;
border-radius: 10px;

/*left sidebar boxes gradient background*/
.campaign-public-layout #campaign-nav {background-image: linear-gradient(to bottom, #181818 , #002A50); border: 3px solid #489ebe; border-radius: 10px;}

If you put this into your custom css box on your advanced tab you'll see that the #489ebe is a robin's egg blue color and the #181818 is a dark gray almost black which is the top color fading down into #002A50 at the bottom which is a dark hue of blue that white text looks pretty nice on.  I used these with the "Metal Grunge" style to a nice effect.

Hope you guys find this helpful.  



Sign In or Register to comment.