Monday, November 17, 2008

Alternative way to Change Site Logo

OOTB SharePoint allows you to change the logo of the page from the default:  titlegraphic.gif image to another image by going into site settings > Title, Description, and Icon.

The following method is a way to add a new logo to your page with just CSS. If you wanted to make this more global you will need to use an alternate method to override the default CSS classes.

  • Upload your new logo to either the server or to a list on your site.
  • Add a Content Editor webpart to the page.
  • Add in the following to the source viewer.

<STYLE>
.ms-titleimagearea{
background-image:url("/_layouts/images/xyzcorp.gif");
background-repeat: no-repeat;
background-position: top left;
}
#ctl00_onetidHeadbnnr0{
visibility: hidden;
height:130px;
width: 126px;

}
</STYLE>

  • In the example above I have uploaded the xyzcorp.gif logo to the images folder on the server.
  • Make sure you modify the elements above in bold green: logo name, height, and width (of logo).
  • Save the page and you should now have the new logo on the page.

Default:
image

Modified:
image

Thursday, October 30, 2008

My Hats: The roles that I play

Like many of you out there, you have more then 1 hat. I have set a goal for myself to have a good understanding of all aspects of consulting and SharePoint with an addition to a few Specialties.

So here are my hats, drop me a comment with yours.

  • Senior Consultant: Attend sales calls, proposal creation, requirements gathering, knowledge transfers, etc..
  • SharePoint Administrator: Creating, Configuring, and Troubleshooting SharePoint systems.
  • SharePoint IA (Information Architecture): Taxonomy, Wireframe's, Layouts, Navigation.
  • SharePoint Branding: Visual Design, CSS, Photoshop, Master Pages, Page Layouts
  • SharePoint Governance: Gathering, Defining, and Delivering tailored plans. Also includes Communications, Vision, and Road Maps.
  • Mentor/trainer/Contributor: Help contribute to the community and increase productivity and delivery standards.
  • SharePoint Application Migration: Help analyze applications and function for migrations.

Monday, October 27, 2008

SharePoint Governance Meeting Breakdown

One of the things I have noticed is that if you throw out the word "Governance" you have some people say they don't have it but think it might be useful, and others who just run for d-hills. Its a normal reaction for people to not want restrictions or other people telling them how to use a system. But all in all it's best to have one.

Within this post I would like to break down some of the common elements that you might see in a SharePoint Governance Plan. Hopefully this will make it easier for scheduling meetings and for getting everyone on the same page.

I have broken out the following meetings into 4 sections: In my previous post about governance I stated that these plans are basically 1/2 Roles and Responsibilities and 1/2 Policies and Procedures. Please note that the time dedicated for each one of these meetings are estimations and should not be taken as written in stone.

  • Meeting #1: Overview
  • Meeting #2: People
  • Meeting #3: Support
  • Meeting #4: Policies/Procedures

Meeting #1:  Overview

Date/Time Meeting Topic(s) Proposed Resources
~2 Hours

Overview of Governance Checklist/Base Document
The primary objective of this plan is to establish the creation of a governing body for the usage and management of the SharePoint environments.

Core SharePoint Team
Business Units
App. Administrators

Meeting #2: People

Date/Time Meeting Topic(s) Proposed Resources
~2 Hours

Roles & Responsibilities / Locations
The SharePoint environments will be managed by two types of groups made up of smaller teams: a strategic group and a tactical group.  Regardless of the title, each team has a distinct role with distinct responsibilities. 

  1. Core Team (PM's, Business Owners, Administrators)
  2. Infrastructure
  3. Service/Help Desk
  4. Application Administrators
  5. Application Developers
  6. Business Units (Owners, Contributors, Members)
  7. Trainers
  8. Business Analysis

Core SharePoint Team

~1 Hours

Governance Communication
Communications will include the type of release, schedule, impact, and list of new or changed Web Parts.

Core SharePoint Team
~.5 Hours

Training
Definition on where users get training, and in what format.

Core SharePoint Team
Business Units

~2 Hours

Security / Permissions
Defining policies around who can grant permissions and to what level.

Core SharePoint Team
App. Administrators

Meeting #3: Support

Date/Time Meeting Topic(s) Proposed Resources
~1Hour

Search
Responsibilities for relevancy settings expectation, Define Content Sources to be indexed, Usages of Keywords and Best Bets.

Core SharePoint Team

~1Hour

Release Schedule
Schedules for Bug Fixes, Major Minor Releases. Dev, QA, Production Cycles and who signs off on it.

Core SharePoint Team
App. Administrators
Application Developers

~1Hour

Service Level Agreements (SLAs)
Time estimations for site creations, Site Quotas, Escalation procedures, and Resource Availability

Core SharePoint Team
Service/Help Desk

~.5 Hours

Testing
Policies around Who, and what is required for testing. Mechanisms for testing feedback, and references to test plans

Core SharePoint Team
Business Analysis

Meeting #4: Policies/Procedures

Date/Time Meeting Topic(s) Proposed Resources
~1Hour

Site Policies
Defining Policies for some of the following: Templates, Upload sizes, Document Retention's, Document Management, Auditing, and Logs.

Core SharePoint Team
App. Administrators
Business Units

~1Hour

Site Provisioning
Defining what metadata should be captured during the creation of a site, branding, quotas, Charge back models, and naming standards.

Core SharePoint Team

~1Hour

Site Use Confirmation & Deletion
Policies around site monitoring, usage, and retention.

Core SharePoint Team
App. Administrators
Infrastructure

~1Hour

My Sites
List of Features that will be enabled and for which users.

Core SharePoint Team
Business Units

~1Hour

Change Management Process
Definition of change request process, and issue ticketing.

Core SharePoint Team
App. Administrators
Service/Help Desk

~1Hour

Deployment / Customization
Policies around 3rd party webparts, Customization software (Visual Studio, SharePoint designer), Source Code Repositories, and Coding standards.

Core SharePoint Team
App. Administrators
Application Developers

Friday, October 24, 2008

A fix for the annoying line below the Main Navigation in publishing sites

There are some things in SharePoint that you just have to take a second to shake your head in disbelief on why it was built that way. In most cases if you have been working with SharePoint as long as I have your perception on what is normal is a little skewed... To this point on many of my designs I have worked around this little gem. In most cases it does not effect the designs or I could create a simple fix for it.

One of the functions of a publishing site the is not available for a WSS site is the  "Page Editing Toolbar".

image

This toolbar is only suppose to be visible if you either click on Site Actions > Edit page, or Site Actions > Show Page Editing Toolbar. This is technically not the case. If you look at the screenshot below you will see that there is a 1px high by 100% wide background color of #79a7e3 from the toolbar showing through into the design in normal mode: Normally you would think this would be a border bottom to the main navigation but it is not.

imageWhat I normally do is to take that "ms-consolemptablerow" class and just change the background color from #79a7e3 to "transparent".

This is especially important for designs that are very simple and do not need that extra line below the navigation.

image

Once you use the following css, the line will be removed.

.ms-consolemptablerow{
background-color: transparent;
}

You might ask yourself well how will this look if I edit the page and show the toolbar? Well this is where you start scratching your head... It actually is hidden from view when the toolbar is visible...

Try it for yourself, make the background red and view the page in non-edit mode, and then either view the toolbar or edit the page and see what happens... Its gone like Magic.

BG Red (Non Edit Page) BG Red (Edit Page)
image image

Go figure...

Benefits of VMware Workstation for Branding

Just because I work for EMC does not mean that I have to use VMware over Virtual PC or any other Virtual OS software. I just find VMware very easy to use.

VMWareSnapshotsI have been using VMware for about 4 years now for all of my branding projects. I store them on an external drive and back it up frequently. This allows me to take all of my work on the road or to any client site as needed. As you can see from the screenshot on the left I normally start all of my projects from a base vanilla image of SharePoint. I have blurred out some of the names to protect my clients names.

On this image I have all of the tools I need to create my branding masterpieces. (SharePoint Designer, Office 2007, IE Developer Toolbar, and Visual Studio)

The great thing about VMware is that I can always go back to any of my past projects and make edits or changes as needed. Say for example you finished up a project about a month ago and you are knee deep into another project. When all of a sudden you get an email that there was this weird bug that needs to be fixed. All you would have to do is save a snapshot of your current project and open up the snapshot of the old project make the fix and you are done.

I guess the trick is to remember to save those snapshots. They really don't take up that much room on your drive.

If you have not tried out VMware you can try an evaluation copy here: http://www.vmware.com/products/ws/

Thursday, October 23, 2008

Creating a Center Justified Fixed Width Design

If you have ever had the task of creating a SharePoint Design with a fixed width that is centered on the page here is a post that might help you. (Sorry about the length...)

In your alternate stylesheet add the following classes and properties:

body{
background-color:#EEE;
font-family:verdana,arial,helvetica,sans-serif;
color:#000;
text-align: center;
padding-top: 20px;
}
.ms-main{
width: 980px;
border: 3px #006699 solid;
border-bottom: 0px #0066699 solid;
background-color:#FFF;
}
#mainTable{
width: 100%;
}

Here is an example of what the results of the code above would look like:

image

Simplified HTML from OOTB SharePoint

<HTML>
<HEAD>
</HEAD>
<BODY>
    <form>
        <TABLE class="ms-main">
          </TABLE>
    </form>
</BODY>
</HTML>

Basically if you look at the the simplified SharePoint's html and Classes above you will notice we are simply applying a light background color, Top Padding, and Text-Aligning property to the <Body> tag. This helps center the site, and brand it as a container.

As for the "ms-main" class we are setting the width of the site to be 980px (you can set this to what ever you like but If majority of your users are all 1024x768 or above I would recommend using this size.) I have also added in a border to help contain the site and a background color of white, so when classes that do not have a background color specified do not show the gray <body> background.

The reason why I needed to add the #mainTable class with a width of 100% is that there is a issue with the Web part picker that when you click on Add a Web Part it uses the class of ms-main and since that class now has a fixed width it does not display properly. See screenshot below: Notice you cannot see the "advanced web part gallery and options link or the ADD, and Cancel Buttons... To see them you have to expand the window. (Not a good experience for your users)

image

So by using the #mainTable class properties above to set the width to 100% you get the correct display of the Web Part Picker.

imageI guess the way the webpart picker works is that there is a masterpage that lives in the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS" directory called "pickerdialog.master" and in this master page there is the following html:

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%" HEIGHT="100%" id="mainTable">

I have simply taken the ID of that table to fix the issue with webpart picker. The reason why this works is that on the default masterpage this ID is not present.

If you dive deeper into the file there is a content place holder called: <asp:ContentPlaceHolder id="PlaceHolderDialogBodySection" runat="server"/>

The file that defines this Content Control  is located in the same directory called "webpartgallerypickerpage.aspx". This page has the classes that define the look and feel of the Webpart selection but not the outside container of the picker. The outside shell is controlled by the Master page listed above.

Sorry about the rant on the Picker but it is very important to know about how classes are shared across many different types of pages. That is why it is always a really good idea to make sure you dedicate enough time for testing!

Wednesday, October 22, 2008

Example: SharePoint Branding Install Instructions

After all branding files have been created we as designers sometimes don't get the option to install and implement the visual design ourselves. So the creation of an Install Guide can be important in two ways.

  1. Ability for the site owner/Administrator to have a back up guide on how to re-apply the visual design in case of a Disaster Recovery.
  2. If someone other than the creator of the branding files needs to apply the branding due to security reasons/Location.

Below are some install instructions for a site with the following:

  • Publishing Site
  • Custom Master Page
  • Custom Page Layout
  • Custom CSS
  • Custom Images

Step 1: Enable Publishing Feature:

  1. Enable the Office SharePoint Server Publishing Infrastructure Feature for the top level site collection.
    • Click on Site Actions > Modify All Site Settings
    • Click on Site collection features
    • Make sure the "Office SharePoint Server Publishing Infrastructure" is Active
  2. Enable the Office SharePoint Server Publishing for the site.
      • Click on Site Actions > Modify All Site Settings
      • Click on Site features
      • Make sure the "SharePoint Server Publishing" is Active

Step 2: Images:

  1. Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)
    • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
    • Copy over the “XYZ_Images” folder.

Step 3: Styles:

  1. Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)
    • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
    • Copy over the “XYZ_Styles” folder.

Step 4: Upload Master Page and Page Layout:

  1. From the top level site collection do the following:
    • Click on Site Actions > Modify All Site Settings
    • Click on “Master pages and page layouts”
    • Upload both the “XYZ_Custom.master” and “XYZ_PageLayout.aspx” files. Make sure these files are Checked in as a major version, and Accepted if approval is required.
    • Change the XYZ_Custom.master file properties to the following:
      • Content Type: Publishing Master Page
    • Change the XYZ_PageLayout.aspx file properties to the following:
      • Content Type: Page Layout
      • Content Type Group: Page Layout Content Type
      • Content Type Name: Welcome Page

Step 5: Apply Master Page and Alt CSS:

  1. From the top level site collection do the following:
    • Click on Site Actions > Modify All Site Settings
    • Click on “Master page”
    • Choose the “XYZ_Custom.master” for both the Site Master Page, and the System Master Page.
      • Check off the boxs to reset all sub sites.
    • At the bottom of the page click on Specify a CSS to be used… and paste in the following path:
      • /_layouts/1033/styles/xyz_styles/xyzstyle.css
      • Check off the box to reset all sub sites.

Step 6: Apply Page Layout:

  1. From the top level site collection do the following:
    • Click on Site Actions > Edit Page
    • In the Toolbar click on the “Page” button then “Page Settings”
    • Under Page Layout section choose “xyz_PageLayout.aspx” from the drop down

Drop me a note if you found this useful!

Tuesday, October 21, 2008

Knowing the basics of CSS (Cascading Style Sheets)

If you want to know more about CSS and how to use it, there are many great resources out there that can help you get started: I would start with http://www.w3schools.com/Css/default.asp

Here are the basics that you will use:

Syntax
selector {property: value;}

External Style Sheet - (Added within the <head> tags)
<link rel="stylesheet" type="text/css" href="style.css" />

Internal Style - (Added within the <head> tags)
<style type="text/css">
selector {property: value;}
</style>

Inline Style- (Added within the <body> tags)
<tag style="property: value">

Or use the following table with some of the most basic Properties. I am using the .MS-Main class as a reference for all of the examples below.

Properties

Example

Other Values

Backgrounds

   

background-color

.MS_Main{
background-color:  #000000
}

black
rgb(0,0,0)
transparent

background-image

.MS_Main{
background-image:  url(imgname.gif);
}

none

 

background-position

.MS_Main{
background-position:  top left;
}

top center
top right
bottom right
x% y%
xpos ypos
(Many Others)

background-repeat

.MS_Main{
background-repeat:  no-repeat;
}

repeat
repeat-X
repeat-Y

background-attachment

.MS_Main{
background-attachment: fixed;
}

scroll

Borders

 

 

border

.MS_Main{
border:  1px #000000 solid;
}

none

Element Position and Visibility

 

 

display

Note:  You will never use display none for the body of you website.

.MS_Main{
display: none;
}

Block
(Many others)

visibility

.MS_Main{
visibility: hidden;
}

visible
collapse

position

.MS_Main{
position: relative;
top: 10px;
left: 10px;
}

static
absolute
fixed

Heights and Widths

 

 

height

.MS_Main{
height: 400px;
}

auto
length (px)
%

width

.MS_Main{
width: 980px;
}

auto
length (px)
%

Fonts and text treatments

 

 

Font-family

.MS_Main{
Font-family: arial, sans-serif;
}

Times, Serif
(many Others)

Font-size

.MS_Main{
Font-size: 12pt;
}

10px
1.1em
x-large

Font-style

.MS_Main{

Font-style: italic;

}

normal

oblique

Font-weight

.MS_Main{
Font-style: bold;
}

normal
bolder
lighter
100
(Many Others)

Text-align

.MS_Main{
Text-align: center;
}

left
right
justify

Text-decoration

.MS_Main{
Text-decoration: underline;
}

none
overline
line-through
blink

Line-height

.MS_Main{
Line-height: 20px;
}

normal
number
length (px)
%

Spacing of Elements

 

 

Padding

.MS_Main{
Padding: 20px;
}

padding-top
padding-left
(Many Others)

Margin

.MS_Main{
margin: 10px;
}

margin-top
margin-left
(Many Others)

Pseudo-classes

 

 

Hover

Note: you apply this pseudo class after the class name to achieve a hover state effect.

.MS_Main:hover {
Background-color: #CC0000;
}

Transparencies

Note: You can make a class’s opacity to give it a transparent look.

.MS_Main: {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

!Important tag

Note: Sometimes your css will not override hardcoded inline styles or ids so you can simply force the style with the !important tag.

.MS_Main{
Background-color: #CC0000 !important;
}

Differences between Classes and ID's

A class is referenced in the HTML as the following:
<td class="ms-main"></td>

Notice the class does not have the "." period in front of it. To add style to this class you would use the following syntax:
.ms-main {color: red;}

A ID is referenced in the HTML as the following:
<DIV ID="ms-main"></DIV>

To add style to this class you would use the following syntax:
#ms-main {color: red;}

So if you can remember that Classes use (.) periods and ID's Use (#) Pound signs you should be golden.

Thursday, October 16, 2008

Pimp My Portal Theme

I have been in a giving mood lately, so I thought I might Package up my Pimp My Portal Theme and distribute it out to the masses.

pimpmyportal

I have included the install instructions within the zip file called Read Me Install Instructions.txt and all of the support files here: Download

This theme comes in really handy when April 1st comes around...
Hint, Hint, Wink, Wink...

And yes, if you have animations turned on in your browser settings you will get an extra special surprise with the hopping car. Old School at its best.

Enjoy!

Tuesday, October 14, 2008

OOTB SharePoint Layered Photoshop File

I have created a Photoshop layered file, based on the OOTB SharePoint look and feel. This file includes the following:

  • Nested Folders
  • Labeled Layers
  • Editable Text
  • Exact Font Colors and Type
  • Separation of background elements
  • Resolution set to 1024x768

image

You can download this file here: Download

Enjoy!

Write me a comment if you find this useful!

Monday, October 13, 2008

Brand your site by using: Features, Site Definitions, and Custom Master Pages

I will walk you though a few steps to implement your branding by using custom Site Definitions, Master Pages, and Features.

Images:

Place all modified images in a new folder in the following directory

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\Custom

Styles:

Create a separate CSS file and place it in a new folder in the following directory.

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\Custom

Application Master Page: *Modify only if you want Farm Wide System pages to have a consistent look and feel.

Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS
  • Add a <link type="text/css" rel="stylesheet" href="" /> in the head of the Application.Master to your alternate stylesheet.

Site Definition:

Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\SiteTemplates
  • Make a copy of the “STS” folder and re-name it to something like "CUSTOMSTS".
  • Go to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\1033\XML
  • Copy the “WEBTEMP.XML” File, Re-Name it.
    (Ex: WEBTEMPCUSTOM) and change all references from STS to CUSTOMSTS. This post does not effect any of the MPS or Meeting workspace sites. So delete all Templates that refer to MPS.

Create Feature:

I will refer to this post for creating this part of the process:
http://techietweaks.blogspot.com/2008/08/creating-custom-sharepoint-masterpage.html

Install Feature:

Open up a command prompt

  • Type the following:
  • “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN\stsadm.exe” –o installfeature –filename CUSTOMSTSMasterPage\feature.xml

Perform an IISREST:

Open up a command prompt and type “IISRESET

**** Make sure the permissions that are set to that new folder are the same as the original or basic users will get prompted for authentication because they don’t have permission for the images/styles ****

Delete all temporary internet files from your browser and then refresh the page

Here is a diagram that explains how this all works:

image

Thursday, October 9, 2008

Functional SharePoint Branding Style guide

As part of our normal delivery on branding projects we usually supply a SharePoint style guide. This document is intended to be used by site owners/developers to support the branding once the project is complete. I have created many variations of this type of document, What I find really helpful for the consumers of this document is to provide some of the following:

Branding Requirements: Example

# Properties
1 Branding will be applied at the site collection level
2 Any Changes to branding (CSS, Images) will automatically get updated to the site. Admin will not have to force or re-apply styles
3 When a sub-site is created, it will automatically have branding applied.
4 All _layout application pages will have branding as well.

As we all know there are many ways to add lipstick to the pig, so what I would suggest is to add the following as well: Make sure you work closely with the site owner and educate them on the pro's and Con's of each method.

Write in the implementation method related to those Requirements and how they will be met: Example

Requirement
# Met
Approach Known Issues
2, 3, 4

Modify Core Server CSS File:
Including Custom CSS at the end of the Core.css file on each one of the web front end servers

This will be applied to all sites, sub-sites, application pages, and My Sites. However if another application needs to have their own branding it will have to override the custom CSS. All default files will need to be backed up in case of service pack updates or upgrades.

*For the first release this would be recommended as the best method.

2, 3, 4

Modify All Core Server Master Pages:
Adding a CSS Reference to all major master page files on the server. Application.master, default.master, simple.master

Same as modify core CSS file. (This approach is not a best practice)
2, 3

Modify Server Default.Master:
Adding a CSS Reference to the server side default.master

This will not modify the system pages located in the _layouts pages.
1, 2, 3, 4*

Custom Site Definitions and Ref. Alternate Style sheet:
Create Custom Site Definitions, reference Custom CSS file in all Default.aspx pages, and Reference an alternate CSS file at the top level site collection.

This method meets all of the required elements but the following is a known issue

*The Alternate Style sheet will have to be applied to every top level site collection and not all system pages will be branded…

1, 2, 3

Custom Site Definitions
Create Custom Site Definitions, reference Custom CSS file in all Default.aspx pages.

This method will not brand system pages.
1, 2, 4

Custom Master Page within UI and Ref. Alternate Style sheet:
Create custom Master page and store it in the Master Page and Page Layouts Gallery with reference to Custom CSS file on the server. At the top level the alternate Style sheet will need to be referenced within the UI.

This approach is the most flexible and is the best practice for brand implementations per site collection. However the custom master page will have to be uploaded and applied for every site collection. When new WSS sites are created the brand will not be applied automatically
1, 2

Custom Master Page within UI
Create custom Master page and store it in the Master Page and Page Layouts Gallery with reference to Custom CSS file on the server.

This approach will not touch any system pages.
4

Custom Theme
Create a custom theme and apply it to each site.

This approach is defined per site and cannot be pushed across all sites. If design is modified it will not be visible until an IISREST and the theme is removed and then applied again.
1, 2, 4

Alternate Style Sheet
Reference the Alternate Style sheet at the top level site collection.

This approach does not get applied when a new site is created.

The last but really useful thing that I started to add to my Style Guide and CSS is Zone Numbers and Comments.

I will use my personal favorite design that I have created as an example: Pimp My Portal...
image 

Zone 1:

Preview Main Classes
image .ms-globalbreadcrumb
image .ms-globallinks,
.ms-globallinks a

Zone 2:

Preview Main Classes
image .ms-globalTitleArea
image

td.ms-titleimagearea
#GlobalTitleAreaImage

image #SRSB

In the Alt. Style sheet I would provide the following comments to match up the zones: This allows an easy way to find the modified classes.

/* Zone 1: Top Navigation Styles */
.ms-globalbreadcrumb{
background-image:none !important;
background-color:transparent !important;
border-bottom: 0px #2d5696 solid;
padding:3px 10px 0px 10px;
}

/* Zone 2: Global Title Area */
.ms-globalTitleArea{
text-align:right;
background-image:none;
background-position:right top;
background-repeat:no-repeat;
background-color: transparent;
height: 63px;
padding-left:10px;
padding-right:0px;
padding-top:1px;
}

/* Zone 2: Search box Positioning */
#SRSB{
    padding-top: 15px;
}

Some of the other parts of the SharePoint Branding Style Guide would include:

  • Approved Logos
  • Approved Corporate Color Palette
  • Image and CSS Locations
  • Installations Instructions
  • List of Modified Images