If you want to allow your users to view/update their personal Status on any page in SharePoint 2010 follow these simple steps.
1.) As with my previous post you need to add the following to the top of your custom master page right before the doctype:
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
2.) In your custom master page search for “s4-trc-container-menu” and add in the following before the “Welcome” control:
<SPSWC:ProfilePropertyLoader runat="server" />
<SPSWC:StatusNotesControl runat="server"/>
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
<SPSWC:ProfilePropertyLoader runat="server" />
<SPSWC:StatusNotesControl runat="server"/>
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
**Note that if you do not have the <SPSWC:ProfilePropertyLoader runat="server" /> control specified your users will not be able to update their status…
Your Result should look something like this:
So when I said anywhere, Its only where this custom master page is used… The other thing to note is that it adds significant amount of space to the ribbon area… So if you are cool with that then I hope this works for ya!
Here is a simple way to add in the logged in users profile picture right before or after the users name in the SharePoint 2010 ribbon.
1.) Add the following to the top of your custom master page right before the doctype:
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
2.) Add in the following control right before the welcome text:
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="float: left; height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="float: left; height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
A nice feature that you can customize is if you don’t want to show a placeholder image if a users has not uploaded a custom picture you can simply change ShowPlaceholder="true" to “false”. and it will only show a picture if someone has specified a custom one in their profile.
If you want to have the image on the right simply move the control after the welcome and muiselctor controls, also remove the float:left in the picture style:
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome>
<wssuc:MUISelector ID="IdMuiSelector" runat="server"/>
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome>
<wssuc:MUISelector ID="IdMuiSelector" runat="server"/>
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
The 20px height is that golden number because any larger and the image will get cropped off on the bottom in IE7 and in IE8 you will start to see some separation and cropping of the ribbon when viewing the other ribbon tabs.
The inline CSS above on the control is just to keep this blog post simple, Its recommended to move that inline style into your custom CSS file.
Wednesday, March 30, 2011
So, I have gotten a lot of great feedback within the comments of my blog. I have heard from quite a few people that they either just been tasked with branding SharePoint and don’t know where to start. Or they have a basic idea about SharePoint, CSS and HTML but don’t know where or how to reference the custom CSS. This is a long post so hold on to your hat!
Within this post I am going to focus this topic on SharePoint 2010 but the approach could be used either for 2007 or 2010.
Step 1: The first thing that you have to consider is how the SharePoint site that you are branding is configured?
- Is it SharePoint 2007 or 2010?
- Is it WSS or Full SharePoint Server?
- Will Publishing be enabled?
- What site templates will be branded?
- Publishing
- Team Collaboration
- Meeting Workspaces
- Search Center
- My Sites
- Administration Pages “_layouts/”
- Other?
Step 2: Be prepared and gather all design support files from your visual designer
- Support Images optimized for web
- Style Guide
- Hex colors for all design elements
- Text body colors
- Text link colors
- Text link hover colors
- Text header colors
- Background colors
- Heights and widths of design elements
- Ribbon
- Header
- Logo
- Navigation Container
- Navigation Links
- Left Side Navigation
- Content Area
Step 3: Choose your implementation approach
- Store all CSS and Images on the server
- This approach allows you to store all of your CSS and images in a custom folder on the server within the 14 hive, 12 hive for 2007.
- SharePoint 2010 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\customfolder
- SharePoint 2007 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\customfolder
- This approach allows you to have a single source for all of your CSS and images. Note that it is recommended to create a solution package with all of your files and deploy it especially if you have more than one web front end server. This will push all of the files to the correct location on each web front end so you do not have to do it manually.
- The other option is to Store all CSS and Images within SharePoint Style Library (Publishing Infrastructure and Site Publishing Feature need to be enabled)
- This approach allows you to have version control over your CSS and images. However these files will need to be added to each site collection the branding will be applied to so if you have a lot of site collections there will not be a single source for your files. AKA if you update one it will not update the branding globally.
Step 4a: If you choose to go with storing all of your CSS and images on the server, below are the steps to get you started.
I will walk you through the manual process of adding in the files, a solution would be created to add these files in normally. Please note that this should be done in a development environment first.
I will walk you through the manual process of adding in the files, a solution would be created to add these files in normally. Please note that this should be done in a development environment first.
- log into your web front end as a administrator
- Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES
- create a new folder within the styles library that is either your company name or project name or what ever makes sense
- upload all of your optimized images into this folder
- right click > new > text document
- rename it custom.css
- Open up the document in notepad and add in the following just to make sure you have it linked up correctly
body #s4-leftpanel{display: none !important;} body .s4-ca{background-color: #CCC; margin-left: 0px !important;} body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}
- Save the custom CSS file
Step 4b: If you choose to go with storing all of your CSS and images within SharePoint, below are the steps to get you started.
- first you need to make sure that you have the publishing infrastructure and publishing feature activated within your site.
- To verify click on Site Actions > Site Settings > Site Collection Administration > Site collection features
- Then to verify the site feature click on Site Actions > Site Settings > Site Actions > Manage site features
- by activating the publishing feature it creates a style library at the root of the site collection where you will be able to store and reference your custom CSS and images.
- navigate to the new style library:
http://sitename/Style%20Library/Forms/AllItems.aspx - you will normally see four folders
- en-us
- Images
- Media Player
- XSL Style Sheets
- create a new folder at this root location that is either your company name or project name or what ever makes sense
- upload all of your optimized images into this folder
- on your local machine create a new text document in notepad
- save it as “custom.css”, make sure you save as type “All Files” and Encoding “UTF-8”
- Open up the document in notepad and add in the following just to make sure you have it linked up correctly
body #s4-leftpanel{display: none !important;} body .s4-ca{background-color: #CCC; margin-left: 0px !important;} body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}
- Save the custom CSS file
Step 5a: Apply your server side custom CSS to your site.
You now have a few choices on how you want to apply your custom CSS to your site/page. If you want more details about other approaches see my blog post here: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html
You now have a few choices on how you want to apply your custom CSS to your site/page. If you want more details about other approaches see my blog post here: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html
- Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.
- For non-publishing Click on Site Actions > Site Settings > Galleries > Master pages
- For publishing Click on Site Actions > Site Settings > Galleries > Master pages and page layouts
- hover over v4.master and click on Send To > Download a Copy
- Save this copy of v4.master onto your local machine
- Rename it customv4.master
- Open up the master page in notepad.
- ** Do not try to open it locally with SharePoint designer, it will add in a bunch of weird references and your master page might get errors.**
- at the end of the head tag add the following code
- <SharePoint:CssRegistration name="custom/custom.css" After="corev4.css" runat="server"/>
- Save the master page and upload it into the master page gallery.
- Make sure that you publish it as a major version and approve it as needed.
- to apply your custom master page when publishing has been enabled click on site actions > site settings > look and feel > master page
- If Publishing is not enabled you will have to use SharePoint designer to set this custom master page, there will not be an option to do this through the UI.
- Change the Site Master page and the System Master page to your customv4.master and then click on ok
- Now You will finally see that you branding has been applied.
- Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.
- Click on site actions > site settings > look and feel > master page
- Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”
- add in the following path:
- _layouts/1033/styles/custom/custom.css
- then click on ok
- your site should now have the custom branding applied to this site and if you choose to any existing sub sites.
- ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **
- Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.
- Add the content editor web part to the page
- Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source
- paste in the following:
- <link href="/_layouts/1033/styles/custom/custom.css" rel="stylesheet" type="text/css"/>
- Save/Publish the page. Just this page will now have the custom branding applied.
Step 5b: Apply your Style library custom CSS to your site.
You have the same options as above but with different URL paths.
You have the same options as above but with different URL paths.
- Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.
- Use same method above to create your custom master page but use the following reference at the end of the HEAD section.
- <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/custom/custom.css %>" After="corev4.css" runat="server"/>
- Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.
- Click on site actions > site settings > look and feel > master page
- Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”
- add in the following path:
- /Style Library/custom/custom.css
- then click on ok
- your site should now have the custom branding applied to this site and if you choose to any existing sub sites.
- ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **
- Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.
- Add the content editor web part to the page
- Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source
- paste in the following:
- <link href="/Style Library/custom/custom.css" rel="stylesheet" type="text/css"/>
- Save/Publish the page. Just this page will now have the custom branding applied.
I hope this helps any new front end developers out there trying to get their feet wet with SharePoint 2010 branding.
Thursday, February 24, 2011
My previous post did not include a style for the search scope drop down. Use the following to CSS to update the search scope from:
Download updated files HERE
How to implement:
- Upload the custom master page into the master page gallery
- Navigate to the following location on your server: “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES”
- Create a folder called “LGSEARCH” and place the “lgsearch.css” and the two image files into this directory.
- Apply the “lgsearch.master” to your site.
Wednesday, February 2, 2011
If you would like to stylize your navigation drop downs in SharePoint 2010 here are the 4 main key classes to update your CSS.
The OOTB Navigation Drop Down CSS: “COREV4.CSS”
.s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */ background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #D9D9D9;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:3px 10px;
white-space:nowrap;
font-weight:normal;
}
a:link{
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
text-decoration:none;
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9;
}
.s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */ background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #D9D9D9;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:3px 10px;
white-space:nowrap;
font-weight:normal;
}
a:link{
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
text-decoration:none;
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9;
}
Example (Not good design, but you get the point)
/* Drop Down: Container Style */
.s4-tn ul.dynamic{
background-color:white;
border:3px dashed #000;
} /* Drop Down: Item Padding Style */
.s4-tn li.dynamic > .menu-item{
padding:10px 20px 10px 20px;
} /* Drop Down: Hyperlink Styles */
.s4-tn li.dynamic > a{
font-size: 9pt;
font-weight:normal;
color:#000;
} /* Drop Down: Hyperlink Hover Style */
.s4-tn li.dynamic > a:hover{
font-weight:bold;
background-color:#0C0;
color:#FFF;
}
.s4-tn ul.dynamic{
background-color:white;
border:3px dashed #000;
} /* Drop Down: Item Padding Style */
.s4-tn li.dynamic > .menu-item{
padding:10px 20px 10px 20px;
} /* Drop Down: Hyperlink Styles */
.s4-tn li.dynamic > a{
font-size: 9pt;
font-weight:normal;
color:#000;
} /* Drop Down: Hyperlink Hover Style */
.s4-tn li.dynamic > a:hover{
font-weight:bold;
background-color:#0C0;
color:#FFF;
}
Simply take the above 4 main CSS classes and add/edit/delete the properties to make your drop down style truly unique.
Tuesday, February 1, 2011
The OOTB search box in my opinion is hidden and misplaced. In most cases it gets in the way with the top navigation especially when you have a lot of items in it.
The solution to this problem is to move the search box up to the left of the social tags and make it bigger with CSS and Images.
Here is what the search box will look like: This design consists of two images one for the search box (searchbox.gif) and the other for the button (searchbutton.gif).
Moving the Search Control:
In your custom master page simply move the s4-searcharea div up into a new <td></td> before the social tags.
In your custom master page simply move the s4-searcharea div up into a new <td></td> before the social tags.
The final code should look like this: Notice that I kept the div and the “s4-rp” class. This has the “float:right” attribute for the help icon.
Putting it all together:
I have placed all of the support files to create this large search box style into the following .zip file that you can download and apply to your development site.
I have placed all of the support files to create this large search box style into the following .zip file that you can download and apply to your development site.
Source Files: Download HERE
How to implement:
- Upload the custom master page into the master page gallery
- Navigate to the following location on your server: “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES”
- Create a folder called “LGSEARCH” and place the “lgsearch.css” and the two image files into this directory.
- Apply the “lgsearch.master” to your site.
Wednesday, December 15, 2010
I thought that I created this post before, but I guess it was either the SharePoint 2007 Logo, or the SharePoint 2010 Search Button. So here it is.
Very much like the two examples above, if you simply want to change the site logo via CSS globally, or for a single site. Without having to go to the Site Actions > Site Settings > Title and description > adding in a URL to site logo. Then simply do the following:
- Copy your image anywhere users can access it
- Paste in the following CSS into your custom CSS file
.s4-titlelogo{
background-image: url(/_layouts/images/centraladmin_security_48x48.png);
background-position:left center;
background-repeat: no-repeat;
}
.s4-titlelogo > a > img{
visibility: hidden; width: 48px;
height: 48px;
}
background-image: url(/_layouts/images/centraladmin_security_48x48.png);
background-position:left center;
background-repeat: no-repeat;
}
.s4-titlelogo > a > img{
visibility: hidden; width: 48px;
height: 48px;
}
- Update the background image URL path above in red to where you uploaded the image
- Change the width and height above in Blue to match the image dimensions.
Wednesday, December 1, 2010
To hide the “My Site” link in the SharePoint 2010 top navigation you can easily do this via CSS.
Simply add the following to your custom CSS.
.ms-globalnavicon{
display: none;
}
display: none;
}
Now when you click on Site Actions > Site Settings > Top Link Bar. You can customize those links all you want and not have to worry about the “My Links” getting in the way. Its redundant/repetitive to the My Newsfeed link anyways. So I am not really sure why it was in there for the first place…
Wednesday, November 3, 2010
If you have ever added custom elements to your master page above or below the standard DIV tags you will notice that they start appearing in the SharePoint 2010 Modal windows when you don’t want them to.
The simple fix is to use the class “s4-notdlg” on your custom element to hide it when viewing the modal pop up windows.
To give you a better idea of what I am talking about I added in a simple DIV tag right above the s4-ribbon row DIV: The inline CSS below is just to make it stand out.
<div class="my-customdiv">Here is my custom header</div>
<style>
.my-customdiv{
background-color: #009;
border-bottom: 4px #FFF solid;
text-align: center;
color: #FFF;
font-size: 10pt;
font-weight: bold;
padding: 10px;
height: 30px;
}
</style>
<style>
.my-customdiv{
background-color: #009;
border-bottom: 4px #FFF solid;
text-align: center;
color: #FFF;
font-size: 10pt;
font-weight: bold;
padding: 10px;
height: 30px;
}
</style>
If I create a new list item or upload a document, the Modal Window shows my custom div above the input form. Not good…
To fix this you simply have to add the “s4-notdlg” CSS to the custom DIV tag to hide it from the modal window.
Example:
<div class="s4-notdlg my-customdiv">Here is my custom header</div>
<div class="s4-notdlg my-customdiv">Here is my custom header</div>
Tuesday, November 2, 2010
Update 11/4/2010: I found that by using the default SiteMapProviders="SPContentMapProvider" in the original post it was throwing errors when creating a publishing page.
So I have updated my approach below to utilize how breadcrumbs were done in MOSS 2007.
So I have updated my approach below to utilize how breadcrumbs were done in MOSS 2007.
Basically you should simply replace the existing PlaceHolderTitleBreadcrumb placeholder with the following:
<div class="custom-breadcrumb">
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
</asp:ContentPlaceHolder>
</div>
I have updated the post below to reflect the above changes.
I have received a lot of feedback about the OOTB breadcrumb control for SharePoint 2010 not being useful and hard to find. People would ask me: Where did the standard breadcrumb go? I know it was there in SharePoint 2007… Well to find it in 2010 you have to look hard (Which in my opinion is not a good thing). To find it. look in the ribbon for that little folder icon with the green arrow that is next to the site actions…
If you click on it, it will display a pop up menu with a hierarchy from the top of that site collection.
If you click on it, it will display a pop up menu with a hierarchy from the top of that site collection.
So to get the 2007 breadcrumb look and feel back you have to do some simple configurations.
First open up your custom master page and search for: “PlaceHolderGlobalNavigation”
Within this control there is another place holder called “PlaceHolderTitleBreadcrumb”
Simply delete the “PlaceHolderGlobalNavigation” Code and add in the following simplified code right above the “s4-mainarea” DIV.
<div class="custom-breadcrumb">
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
</asp:ContentPlaceHolder>
</div>
Now it is time to add in CSS to make it look more like a traditional breadcrumb. Add in the following CSS to your global CSS file or master page:
<style>
.custom-breadcrumb{
padding:5px 0px 5px 5px;
font-family: Arial sans-serif;
font-size:8pt;
font-weight: normal;
background-color: #EEE;
border-bottom: 1px #CCC solid;
}
</style>
.custom-breadcrumb{
padding:5px 0px 5px 5px;
font-family: Arial sans-serif;
font-size:8pt;
font-weight: normal;
background-color: #EEE;
border-bottom: 1px #CCC solid;
}
</style>
The breadcrumb should now look something like this:
Enjoy!
Sorry for the changes, but I am sure you will enjoy this better without the errors!
Thursday, September 16, 2010
I created a blog post on this for SharePoint 2007 HERE: But SharePoint 2010 is a bit more complex. Since it uses UL’s and Li’s for it’s navigation it is a bit harder to hide just one element.
You will notice that the Home tab actually is the first node and then has a child UL which represents the rest of the navigation Items. So the approach is to hide the first <li> <a> (display: none) and then simply just use (display:block ) to show the hidden <ul> <li> <a> tags.
Here is the CSS you could use to hide just the first node (home) tab in a SharePoint 2010 application:
.s4-tn li.static > a{
display: none !important;
}
.s4-tn li.static > ul a{
display: block !important;
}
display: none !important;
}
.s4-tn li.static > ul a{
display: block !important;
}
Enjoy!
Wednesday, August 18, 2010
I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. "
There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin.
Once you are done, simply modify the web part and hide it on the page.
If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.
Friday, August 6, 2010
I created a blog post about 2 years ago on how to create a centered fixed width design for SharePoint 2007. Well now with a little help from a few other posts (The SharePoint Muse, Elumenotion, Styled Point) we can create a SharePoint 2010 fixed with centered design.
Now this does come with some drawbacks. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. The ribbon will need to scroll with the body of the page to avoid a vertical scroll in the middle of your page once it is centered…
The trick to get this to work is to do the following:
- Open up your master Page and remove scroll="no" from the body.
- If you do not do this there will be no scroll bars on long pop up modal windows
- In the Master Page search for “s4-workspace” remove this whole DIV tag and its close Div tag at the bottom of the master page.
- This ID is tied to a JavaScript file that forces a full width on the page.
- Now Open up your CSS file and add the following:
1. body{
overflow:auto !important;
} form
{
width:980px;
margin: auto;
}
overflow:auto !important;
} form
{
width:980px;
margin: auto;
}
Your Site Should look something like this:
If you wanted to add some background color and borders to enhance the centered design replace it with this:
body{
overflow:auto !important;
background-color: #21374c;
}
.s4-widecontentarea{
background-color: #FFF;
}
form
{
width:980px;
margin: auto;
}
overflow:auto !important;
background-color: #21374c;
}
.s4-widecontentarea{
background-color: #FFF;
}
form
{
width:980px;
margin: auto;
}
The following is how it might look:
The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating <DIV> tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider.
To convert the large social buttons to smaller ones you simply have to modify the following:
Within your custom Master Page search for: “GlobalSiteLink3”
Simply Add “-mini” to the control ID
Original Large Control:
<SharePoint:DelegateControl ControlId="GlobalSiteLink3" Scope="Farm" runat="server"/>
<SharePoint:DelegateControl ControlId="GlobalSiteLink3" Scope="Farm" runat="server"/>
New Small Control ID:
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
.ms-mini-socialNotif-Container{
white-space: nowrap;
}
white-space: nowrap;
}
Friday, June 11, 2010
I was recently on a project where there was a requirement to have many items in the main navigation. There was not an option to consolidate these into smaller groups. The idea was to move the search box up into the top ribbon bar.
This would allow for more horizontal space for the navigation items. However in my attempt to move the search I found a little gotcha. I selected the search control in SharePoint Designer and moved it right above the welcome navigation control code.
Wrapped the control in a div tag and temporarily added an inline style of float left.
<div style="float: left;">
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
</asp:ContentPlaceHolder>
</div>
I saved the master page and then checked out what it looked like. The search was moved up correctly but it was not until I used IE8 dev toolbar to check for compatibility in IE7.
As you can see below in IE7 the search, and welcome link/drop down is no where to be seen and the ribbon tabs got all squished.
After doing some testing in IE7 mode an inline style gets applied to the ms-cui-TabRowRight with “Display: none”
I am not 100% why this is, but if I try to put the search anywhere else in the ribbon it just does not show… So I guess this is more of a warning to the designers out there. If you are thinking about putting the search in the top ribbon bar in your design comps know that there might be some issues with browser compatibility.
So what I ended up doing is moving the search to the left of the Social Notification tags. Wrapped it in a <td> tag and called it a day. The client was happy with the results since they were still able to have their navigation items and the search moved to a different location.
Please comment on this post if you have seen this issue before or have found a fix. Thanks!
