| I follow Heather Solomon's blog on a regular basis to get answers to all my SharePoint-centric web design questions. Recently I had a tougher design job and a layout from the graphics designer that included rounded chrome. My first thought upon seeing this "approved" mock-up was "Yikes!!!" But, I took a deep breath and delved into the world of google in search of my answers. There are several people out there who offer their take on this solution and I'm about to become just another one of those helpful blogging folks. For the most part I used Heather's CSS styles, but switched up the padding, height and font style/sizes a bit. The key to getting this right, and nobody mentions this, is the image sizes. You can copy Heather, Kyle, or my styles all you want, but if your images are sized differently you'll still spend time changing elements around until you get the right fit. With that said, I'm going to tell you EXACTLY what I did to make this work. I just don't think anyone should suffer through the headache unless absolutely necessary and I don't like reinventing the wheel either. So, here's how I create my customized web part chrome… 1. You'll need three images. The left corner, right corner, and background image. Mine had a height of 34px, the corner images were 10 x 34, the background image was 24 x 34. 2. You need to make sure that either the images sit on a canvas that is the same color as your background or on a transparent canvas. 3. You need to add the following styles to your CSS: .ms-WPHeader td:first-child { background:transparent url('../images/webpartBg.jpg') repeat-x; margin: 0; padding: 0; height: 34px; } .ms-WPHeader TD h3 { background:transparent url('../images/webPartRight.jpg') no-repeat top right; padding: 7px 7px 0px 0px; height: 34px; font-size:11pt; font-weight:bold; color: #0E53B2; } .ms-WPHeader TD h3 a:visited { color: #0E53B2; } .ms-WPHeader TD h3 a:link { color: #0E53B2; } .ms-WPHeader TD span:first-child { background:transparent url('../images/webPartLeft.jpg') no-repeat top left; padding: 7px 7px 0px 0px; padding-left: 25px; height:34px; } |
|