CSS Archive

CSS for adding Rounded Corners to a SharePoint 2010 Webpart Title

Posted July 27, 2012 By Kevin Bennett

Here is some CSS for making Rounded Corners on a SharePoint 2010 Webpart Title

[code]
/* repeating background for header */
.ms-WPHeader .ms-WPHeaderTd, .ms-WPHeaderTdMenu, .ms-WPHeaderTdMenu:hover,
.ms-WPHeader TD.ms-WPHeaderTdSelection
{
   background: url(‘wpart_back.jpg’) repeat-x center left;
   margin: 0;
   height: 33px;
   border-color:transparent ;
   background-color:transparent;
}

/* removes the background from the drop down arrow and the checkbox on right side of header and from the spacer cells before and after the header */
.ms-WPHeader .ms-WPHeaderTdMenu,
.ms-WPHeaderTdSelSpan
{
   background-color:transparent;
}

/* right rounded corner */
.ms-WPHeader .ms-wpTdSpace
{
 background-image:url(‘wpart_right.jpg’);
 background-position: right  center;
 background-repeat: no-repeat;
 padding-left:5px;
}

/* left rounded corner */
.ms-WPHeader .ms-wpTdSpace:first-child
{
   background: url(‘wpart_left.jpg’) no-repeat;
   background-position: left center;
   padding-top: 0px;
   padding-left: 0px;
}

/* removes the underline from under the header */
.ms-WPHeader TD
{
    border-bottom: transparent 0px none !important;
    border-right: transparent 0px none !important;
    border-top: transparent 0px none !important;
    border-left: transparent 0px none !important;
}

/*wpart title padding left*/
.ms-WPHeader TD.ms-WPHeaderTd
{
 padding-left:10px;
}

/* wpart title */
.ms-standardheader.ms-WPTitle a
{
  font-weight:normal;
  color:white;
  font-weight:bold;
}
[/code]

not sure where I found this at but have been using for a year or two.

If its yours let me know so I can give credit where credit is due.

Be the first to comment
Filed in CSS, Sharepoint 2010 | Tagged: ,

Calling out Custom CSS on a page

Posted February 1, 2012 By Kevin Bennett

In Customizing Sharepoint I needed to call some custom CSS. In this case I needed to put a banner across the top and a custom logo.

The easiest way I found to do this is to create some CSS for the banner which would be

[code]

.s4-title {
    background: url(‘Style Library/Custom Images/New_bgrnd.png’) no-repeat scroll right top;
    margin: 0;
    }

[/code]

 

But aside from adding this to a new Content Editor Webpart (which I did for testing) on each page I wanted to call it from a custom CSS file. To accomplish this I added the following to a copy of v4.master (because we are that lame and still use v4 out of the box). I put this in the Header Section of New_v4.master

[code]

<SharePoint:CssRegistration name=”/Style Library/Custom CSS/New_Custom.css” After=”corev4.css” runat=”server”/>

[/code]

Of course I had to create the new Folder under style library called Custom CSS (this is also what I did with the images by creating a custom images folder).

Save, checkin and publish all.

Next change your Master page to New_v4.Master in Site Settings –> Master Page to the New_v4.master

Be the first to comment
Filed in CSS, Sharepoint 2010 | Tagged: , , , ,