Frontend Sidebars CSS Boxes w/ curved edges & gradient backgrounds

camarilladee
camarilladee

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.  

-Dee

Comments

Sign In or Register to comment.

Curiosities and Acquisitions is June's Campaign of the Month!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions