SharePoint 2010

Monday, April 11, 2011

Simple CSS to style SharePoint 2010

I have compiled some very friendly css from alot of great bloggers' fantastic minds. This removes the leftnav, replaces the banner, and wraps your titles with a nice rounded corner look. I like the oversized corners so it looks somewhat oval egg like. I think it gives it a natural feel.
SharePoint Branding, sharepoint css, sharepoint 2010 css

**CHANGE THE FOLLOWING TO FIT YOUR WEBSITE**
background colors in blue
font colors in green
filepaths to change in yellow
border color in orange

Instructions:
1. Copy paste the code below into a notepad.
2. Save it as newcss.css
3. Open SharePoint site in SharePoint Designer.
4. Click on "Site Assets" and click on Import Files.
5. Grab that newcss.css
6. Click on "Master Pages"
7. Edit your v4master (After you make a backup copy!)
8. Put  <link rel="stylesheet" href="/site/siteassets/newcss.css" type="text/css" media="screen" /> in directly after the  </head>... should be around line 36 in the v4master code. Save it.
9. Right click your v4master in the "Master Pages" page of SharePoint Designer and click on "Set as custom master page".

Code:
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
.s4-title {
            background: #fff url('/site/siteassets/Banner.jpg') repeat-x 0px 0px;
            margin: 0;
            min-height: 100px;
            overflow-x: hidden;
            padding: -10px 0 0 310px;
            word-wrap: break-word;
}
tr.ms-WPHeader td {
            background: #fff;
            border-style: none;
}
.s4-wpcell:hover .ms-WPHeader td, .s4-wpActive .ms-WPHeader td, .s4-wpcell .ms-WPSelected .ms-WPHeader td {
            border-style: none;
}
tr.ms-WPHeader td.ms-wpTdSpace {
            padding: 0;
            width: 10px;
            background: #fff url('/site/siteassets/wp-corners.png') top right no-repeat;
}
tr.ms-WPHeader td.ms-wpTdSpace:first-child {
            background: #fff url('/site/siteassets/wp-corners.png') top left no-repeat;
}
h3.ms-WPTitle {
            color: #6d6d6d;
            font-weight: bold;
}
h3.ms-WPTitle a:link, h3.ms-WPTitle a:active, h3.ms-WPTitle a:visited, h3.ms-WPTitle a:hover {
            color: #6d6d6d;
}
.ms-wpContentDivSpace {
            margin: 0;
}
td.ms-WPBorder, td.ms-WPBorderBorderOnly {
            border-color: #eee;
            border-top-style: none;
}

Now you just need to host your .png corners and your .jpg banner and get your paths right.

!important make the banner 2500 x 100 to avoid replication.  I did a metal looking gradient with bevel and emboss looking edges... Not saying you should, but it looks nice.

If you need help with your corners...
THIS IS THE BEST ROUND CORNERS GUIDE EVER!

1 comment:

  1. Samurai Swords, Very cool concept and reviews
    The work is very versatile, with so many concentrations intermingling
    Samurai Swords

    ReplyDelete