Custom SharePoint themes... the easy way.

Many blogs that I read are telling me to use PowerPoint to create my SharePoint themes. Well screw that. I want an easier way!

So Microsoft made this:
Microsoft Theme Builder!


To me, this is themes in "easiest possible mode". I can kick out 5 options for a site in like 2 minutes. Big thanks to Microsoft for making a tool for this.

Best Weather Widget?

I just used this on my site and stripped the non essential code out of it, but the bottom line is that this thing is great for SharePoint 2010. And it even has a 4-day forecast built in!

The issue is that SharePoint will duplicate any javascript that you throw into a webpart's source. So that rules out 90% of the weather widgets out there. This widget is Flash based and works flawlessly. Enjoy.
 
http://yowindow.com/weatherwidget.php

HIDE THE RIBBON!

SharePoint 2010 ribbon

Put this above the body in your master page. I found two divs that were root that I threw it in between towards line 293. This will hide the blue ribbon at the top of every page for users or groups that are not able to add or customize pages.

Code:
<Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl2" runat="server" PermissionsString="AddAndCustomizePages">
    <script type="text/javascript">
        document.getElementById("s4-ribbonrow").style.display = "block";
    </script>
</Sharepoint:SPSecurityTrimmedControl>

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.

**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!