SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.

I will be using a basic team site as my base for the screenshots.

Here is a basic structure of the main areas that I will cover.

1. Ribbon Row
   • Table Row Left
     • Site Actions
     • Navigate Up
     • Edit
   • Tab List
     • Browse
     • Page
   • Table Row Right
     • Give Feedback
     • Welcome Menu
2. Workspace
   • Body Container
     • Title Row
       • Title
         • Title Logo
         • Title Text / Breadcrumb
         • Page Description
         • Social Data
           • Separator
           • I like It
           • Tags/Notes
       • Top Header 2/Top Links
         • li Static-Selected
         • li Static
         • Search
         • Help
     • Status Bar Container
     • Main Area
       • Left Panel
         • Navigation Manager
           • li Static (Header)
           • ul li Static (Link)
         • Special Navigation Links List
           • Recycle Bin
           • View All Site Content
       • Content Table / Body Area
         • Web Part Cell
           • Web Part Header
             • WP Title
             • WP Header TD
             • WP Header Menu
             • WP Header Selection
           • Web Part Content

Ribbon Row:
Class/ID = “body #s4-ribbonrow”
Default CSS:
min-height:43px;
background-color:#21374c;
Comments: This is the container for all of the items in the top ribbon

Table Row Left:
Class/ID = “ms-cui-TabRowLeft”
Default CSS:
float:left;
margin-top:20px;
Comments: This is the container Site Actions, Navigate Up and Edit

Site Actions:
Class/ID = “ms-siteactionsmenuinner”
Default CSS:
border-color:#21374C;
border-top-color:#394f63;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -467px;
background-color:#21374c;
Comments: Main Style for Site Actions menu

Navigate Up:
Class/ID = “.s4-breadcrumb-anchor,.ms-qatbutton”
Default CSS:
margin:0px 3px 0px 0px;
padding:2px 5px 0px;
Comments: There is an image “fgimg.png” that sits within an “A” hyperlink Tag. This image is large and has many icons in it. It uses inline absolute positioning to show the correct Icon.
”position: absolute; top: -112px !important;”

Here is what the “fgimg.png” image looks like:

Edit:
Class/ID = “.s4-breadcrumb-anchor,.ms-qatbutton” (Same as Above)
Default CSS:
Same As Above
Comments: Same as above except that the background image position is different. “position: absolute; top: -235px;”

Browse:
Class/ID = “.ms-cui-tt-s > .ms-cui-tt-a”
Default CSS:
border-color:#b6babf;
background-color:#fff;
color:#23272c !important;
Comments: This is the selected state of the browse button. Note the “s” at the end of the class.

Page:
Class/ID = “.ms-cui-tt-span”
Default CSS:
padding:4px 10px 4px;
border-top:1px solid transparent;
text-align:center;
Comments: This is the non-selected state of the page button.

Give Feedback:
Class/ID = “No Class Or ID Specified, See below”
Default CSS:
Inline CSS and Image
Comments: If you would like to remove this icon via CSS, use the following:
.ms-cui-TabRowRight a img{
display: none;
}

Welcome Menu:
Class/ID = “.ms-welcomeMenu”
Default CSS:
padding:2px 5px 3px;
margin:0px 3px;
font-size:1em;
font-family:Verdana,sans-serif;
border:1px solid transparent;
Comments: The class for the arrow is “.ms-viewselector-arrow”

---

Workspace:
Class/ID = “body #s4-workspace”
Default CSS:
overflow:visible !important;
overflow-y:scroll;
overflow-x:auto;
position:relative;
left:0px;
Comments: This is the container and scroll area for the site.

Body Container:
Class/ID = “body #s4-bodyContainer”
Default CSS:
min-width:760px;
Comments: This class controls the minimum width.

Title Row:
Class/ID = “body #s4-titlerow”
Default CSS:
display:block !important;
Comments: This is the container for the Title, Tags, Ribbon, Main navigation, Search and Help.

Title Row:
Class/ID = “.s4-title”
Default CSS:
padding:0px 0px 0px 10px;
margin:0px;
min-height:64px;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -1013px;
background-color:#f9f9f9;
word-wrap:break-word;
-ms-word-wrap:break-word;
overflow-x:hidden;
Comments: Notice that there is a min height of 64px and a background image is applied by default.
Title Logo:
Class/ID = “.s4-titlelogo”
Default CSS:
padding:12px 10px 12px 0px;
text-align:center;
vertical-align:middle;
Comments: The logo can be changed via the Admin UI. Default Image size is 35x35px

Title Text:
Class/ID = “.s4-titletext”
Default CSS:
width:100%;
Comments: The title text is also the bread crumb.

Page Description:
Class/ID = “.s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription”
Default CSS:
margin-top:6px;
font-size:1em;
color:#5d6878;
font-weight:normal;
Comments: This only shows up if you have specified a description of the site.

Social Data:
Class/ID = “ms-socialNotif-Container”
Default CSS:
width:120px;
overflow-x:auto;
overflow-y:hidden;
padding:0px 3px;
Comments: This is the container that holds both I Like It and Notes.

Social Separator:
Class/ID = “.ms-socialNotif-groupSeparator”
Default CSS:
height:60px;
position:relative;
top:4px;
margin:0px 3px;
border-right:1px solid;
border-right-color:#e7e7e8;
Comments: This is the slight line on the left of the social tags.

I Like It:
Class/ID = “.ms-socialNotif”
Default CSS:
width:48px;
height:60px;
overflow:hidden;
margin:0px 1px;
padding:0px 2px;
border:1px solid transparent;
Comments: This class is shared with the tags and notes. The text uses the class “.ms-socialNotif-text” and the image “mossfgimg.png” with inline style of
position: absolute; top: -132px !important;

Here is what the “mossfgimg.png” image looks like:

Tags & Notes:
Class/ID = “.ms-socialNotif”
Default CSS:
Same As “I Like It” above
Comments: This class is shared with the I like It Feature. The image “mossfgimg.png” with inline style of
position: absolute; top: -300px !important;

Top Header 2:
Class/ID = “body #s4-topheader2”
Default CSS:
background:url("/_layouts/images/selbg.png") repeat-x left top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #b8babd;
Comments: This class makes up the majority of the navigation row style.

Top Links:
Class/ID = “.s4-toplinks”
Default CSS:
padding:0px;
Comments: This is the container for the main navigation, search and help.

Top Link Selected:
Class/ID = “.s4-toplinks .s4-tn a.selected”
Default CSS:
border-color:#91cdf2;
border-bottom-color:#addbf7;
border-top-color:#c6e5f8;
background:url("/_layouts/images/selbg.png") repeat-x left top;
background-color:#ccebff;
color:#003759;
padding:4px 5px;
margin:0px 5px;
Comments: The hover class is “.s4-toplinks .s4-tn a.selected:hover”

Top Link Static:
Class/ID = “.s4-tn li.static > .menu-item”
Default CSS:
color:#3b4f65;
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
height:15px;
Comments: The hover class is “.s4-tn li.static > a:hover”

Search:
Class/ID = “.s4-search table”
Default CSS:
width: 212px;
margin-right: 17px;
Comments: This is the container for the search box. The class resides in the Search.css file.

Search Input:
Class/ID = “.s4-search input”
Default CSS:
width: 212px;
margin-right: 17px;
Comments: Note that this class does not change width, border color or height. You could use this to change the background color.

Search Image:
Class/ID = “.s4-search .ms-searchimage”
Default CSS:
background-color:#fff;
border:1px solid #e3e3e3 !important;
height:16px;
padding:2px 3px 1px;
border-left:none !important;
margin-top:3px;
Comments: This class controls the border around the go image.

Help:
Class/ID = “.s4-help”
Default CSS:
margin:4px;
Comments: This uses the “fgimg.png” with inline style of:
position: absolute; top: -293px !important;

---

Status Bar Container:
Class/ID = “.s4-statusbarcontainer”
Default CSS:
None
Comments: I am not 100% sure where or how this is used. I can only imagine that this is a publishing class.

Main Area:
Class/ID = “body #s4-mainarea”
Default CSS:
float:left;
clear:both;
Comments: This includes both left navigation and content
Left Panel:
Class/ID = “body #s4-leftpanel”
Default CSS:
width:155px;
float:left;
Comments: This is the left navigation

Left Panel Headers:
Class/ID = “.s4-ql ul.root > li > .menu-item,.s4-qlheader,.s4-qlheader:visited”
Default CSS:
font-size:1.2em;
color:#0072bc;
margin:0px;
padding:3px 4px 3px 10px;
word-wrap:break-word;
overflow-x:hidden;
Comments: This class controls the look of the header text

Left Panel Links:
Class/ID = “.s4-ql ul.root ul > li > a”
Default CSS:
padding:3px 4px 4px 10px;
color:#3b4f65;
word-wrap:break-word;
overflow-x:hidden;
zoom:1;
Comments: This class controls the look of the link text

Special Navigation Links List:
Class/ID = “.s4-specialNavLinkList”
Default CSS:
margin:0px;
border-top:1px solid #dbddde;
padding-top:5px;
Comments: This class makes the line above the recycle bin

Recycle Bin:
Class/ID = “.s4-specialNavLinkList a”
Default CSS:
padding:3px 4px 3px 10px;
color:#3b4f65;
Comments: This is a shared class with view all site content

View All Site Content:
Class/ID = “.s4-specialNavLinkList a”
Default CSS:
Same As Above
Comments: This is a shared class with Recycle Bin

Content Table Body Area:
Class/ID = “.s4-ca”
Default CSS:
margin-left:155px;
margin-right:0px;
min-height:324px;
Comments: This is main class for the body content. Notice the 155px margin to the left. This basically moves the content over so that it does not overlap the left navigation.

Web Part Cell:
Class/ID = “.s4-wpcell”
Default CSS:
border:1px solid transparent;
Comments: This would be a good class to define a pixel line around web parts.

Web Part Header:
Class/ID = “.ms-WPHeader”
Default CSS:
background-color:#FFFFFF;
Comments: This controls the background color of the wp header.

Web Part Header TD:
Class/ID = “.ms-WPHeader td”
Default CSS:
border-bottom:1px solid #EBEBEB;
Comments: This controls the border color of the wp header.

Web Part Header Menu:
Class/ID = “.ms-WPHeaderTdMenu”
Default CSS:
width:21px;
border:1px solid transparent;
Comments: This class is for the web part menu spacing.

Web Part Header Selection:
Class/ID = “.ms-WPHeaderTdSelection”
Default CSS:
width:21px;
Comments: This class is for the web part selector spacing.

Web Part Content:
Class/ID = “.ms-wpContentDivSpace”
Default CSS:
margin-left:5px;
margin-right:5px;
Comments: This class adds marginal space left and right for the web part content.

There are many many many more classes that I could cover but these are some of the main ones to get you going. I will cover more in future posts.

Please leave a comment!

Get your website designed or redesigned by most talented website Designers

Web design or site look and feel. It includes the graphics, layout and the navigation – jobs assigned to designers. The web designer will also do some essential pages like home page, contact, etc and place the content in it.

Introducing SharePoint 2010

SitesCommunitiesContentSearchInsightsComposites

1. SharePoint Web Experience – We updated the SharePoint UI to make it simpler to access a growing range of tools. Highlights include incorporating the Office ribbon, in place web editing, AJAX responsiveness and richer navigation. We also expanded the reach of SharePoint sites through multi-lingual support, improved accessibility including WCAG 2.0 support and cross-browser support built on XHTML compliance.

2. Office Client – We continue to support previous versions of Microsoft Office working against SharePoint 2010. Office 2010 enhances this with features like offline editing with asynchronous saves as well as exposing SharePoint features through the new Office Backstage UI. Via the Backstage, you can access the context around the document including tags, related tagging and people.

3. SharePoint Workspace – In this release, we evolved and renamed Groove as SharePoint Workspace which provides great local and offline read-write access to SharePoint lists and libraries. SharePoint Workspace has a consistent experience with Office 2010 and SharePoint 2010 including the Office ribbon. It supports advanced features like bringing external business data offline and is smart about synching changes and not entire files.

4. Office Web Apps – We made SharePoint 2010 a great place to host the new Office Web Apps so you can view and update content from within a browser and include Office content as part of your web site (e.g. an Excel spreadsheet as part of “Sales Metrics Portal"). The Office Web Apps provide a familiar user experience, high fidelity viewing and essential editing without loss of data or formatting. They include Word, Excel, PowerPoint and OneNote. The OneNote client and Web App support is one of the coolest features of the release to enable multiple people to collaborate on a rich canvas online or offline. In addition to the Office Web Apps, we updated InfoPath Forms Services and Excel Services and added, new for 2010, Visio and Access Services.

5. SharePoint Mobile Access – We both improved the experience for mobile web browsers and are introducing a new SharePoint Workspace Mobile client so you can take Office content from SharePoint offline on a Windows Mobile device. These clients let you navigate lists and libraries, search content and people and even view and edit Office content within the Office Web App experience running on a mobile browser.

1. Collaborative Content – Building on the new SharePoint user experience, we made it much easier to create and find content in SharePoint sites. This includes not only improved blogs and wikis (both simple and enterprise) but also calendars, discussions, tasks, contacts, pictures, video, presence and much more. With Office 2010, multiple people can simultaneously author content on a SharePoint site.

2. Social Feedback and Organization – With SharePoint 2010, we are introducing a consistent experience for organizing, finding and staying connected to information and people including bookmarks, tagging and ratings. We have taken a holistic approach across search, navigation, profiles, feeds and more. We are bringing together informal social tagging with formal taxonomy described below so you can choose the right approach for a given set of content. We have been using these features internally for a while and I think you will find them not only useful but fun.

3. User Profiles – We enhanced user profiles to reflect colleagues, interests, expertise – either via explicit tagging or recommendations based on Outlook and Office Communicator. The model is opt-in so users can manage what information is shared publically. They decide when an interest is something they want to share or be asked about by others in the organization.

4. MySites – We significantly enhanced MySites in SharePoint 2010 building on the updated SharePoint UI and user profile. We streamlined MySites to give you quick access to your content, profile and social network while continuing to let you customize, target and personalize pages to the needs of different roles and users in your organization. The enhanced newsfeed helps track interests and colleagues.

5. People Connections – In SharePoint 2003, we introduced a universal person hyperlink and presence icon so you can always navigate to a user’s MySite, send them mail, start an IM, call, etc. In this release, we enhanced this UI in conjunction with Outlook and Office Communicator as well as greatly improved the colleague tracking and people search features with new algorithms and user experience leveraging expertise, social data and more. MySites also includes a new interactive organization browser built using SilverLight to give you another way to navigate the organization. In larger companies, org. chart browsing via the address book is one of the most popular features in Outlook and we think this takes that experience to the next level.

1. Large Lists and Libraries – We made architecture and user experience investments so you have much larger document libraries with metadata driven navigation to help users go quickly to the content that is most important to them. Libraries will scale to tens of millions and archives to hundreds of millions of documents. This is a key investment for high-end document and records management but also helps organizations with lots of smaller sites. We enhanced the workflow capabilities and tools in SharePoint Designer.

2. Enterprise Metadata – We are addressing your feedback to support content types and taxonomies across not only sites but also server farms. We have made applying this metadata easy (and valuable to users) in both the SharePoint and Office client user experience. The top-down taxonomy and bottoms-up social tagging (sometimes called folksonomy) combine to help improve search, navigation and people connections.

3. Document Sets – We are introducing a way to manage a collection of documents as a single object for workflow, metadata, etc. within SharePoint and Office so the experience more closely models your work product (e.g. a proposal that may contain a presentation, budget, contract, etc.).

4. Web Publishing including Digital Asset Management – We made a number of key improvements to make it easier to publish rich sites on the intranet or internet. We used the new browser ribbon and editor experience to speed site customization, content authoring and publishing tasks. We added digital asset management features like thumbnails, metadata and ratings for images as well as video streaming from SharePoint. Finally, we improved content deployment robustness from authoring to production for larger scale sites.

5. Governance and Records Management – Compliance is an increasingly important requirement for organizations. We enhanced the Records Managements features in 2010 building on the scalable storage and enterprise metadata support described above. We improved the sophistication and flexibility of our governance tools. Just a few new features include location-based file plans, multi-stage dispositions, in-place records and e-discovery.

1. Interactive Search Experience – We built a richer search experience providing flexible navigation, refinement and related searches. Both Standard and FAST Search for SharePoint get query completion, spell checking, wild cards and more. FAST enhances this experience enabling feature content for common queries and providing more flexible navigation and document thumbnails and previews including in slide navigation of PowerPoint presentations which is a common end user scenario.

2. Relevance – We improved the out-of-box ranking and expanded the relevance factors including social data such as tagging and usage (clicks). FAST Search adds more configurable set of relevance inputs for custom applications and specialized corpuses.

3. People Search – We greatly improved people finding based on social networking and expertise algorithms and tailored user experience for people including getting views of authored content. As users frequently do not know or recall the spelling of people’s names, we built a new phonetic search algorithm that works much better than previous approaches to spell checking for names. In testing, we had a lot of fun coming up with crazy ways to misspell each others' names to see if we could stump it.

4. Connectivity – We know lots of data lives outside SharePoint so we expanded and improved our connectors to index web sites, file servers, SharePoint, Exchange, Lotus Notes, Documentum and FileNet. The updated Business Connectivity Services (previously the BDC) described below makes it much easier to index an arbitrary source such as a custom database. You can create this search connection without code using the new SharePoint Designer.

5. Scale and Platform Flexibility – We made significant performance and scalability improvements through our search technology. Optimizing for 64-bit helped but we also introduced partitioned indices and scale-out query servers in SharePoint search this release. FAST scales-out even further and has significantly more pipeline extensibility to handle the largest collections and most complex value-added processing and search applications. We think both end users and IT will be immediately excited about the new capabilities supporting hundreds of millions of documents with great index freshness and query latency.

1. Excel Services – Excel rendering and interactivity in SharePoint gets better with richer pivoting, slicing and visualizations like heatmaps and sparklines. New REST support makes it easier to add server-based calculations and charts to web pages and mash-ups.

2. Performance Point Services – We enhanced scorecards, dashboard, key performance indicator and navigation features such as decomposition trees in SharePoint Server 2010 for the most sophisticated BI portals.

3. SQL Server – The SharePoint and SQL Server teams have worked together so SQL Server capabilities like Analysis Services and Reporting Services are easier to access from within SharePoint and Excel. We are exposing these interfaces and working with other BI vendors so they can plug in their solutions as well.

4. “Gemini” – “Gemini” is the name for a powerful new in memory database technology that lets Excel and Excel Services users navigate massive amounts of information without having to create or edit an OLAP cube. Imagine an Excel spreadsheet rendered (in the client or browser) with 100 million rows and you get the idea. Today at the SharePoint Conference, we announced the official name for “Gemini” is SQL Server PowerPivot for Excel and SharePoint.

5. Visio Services – As with Excel, users love the flexibility of creating rich diagrams in Visio. In 2010, we have added web rendering with interactivity and data binding including mashups from SharePoint with support for rendering Visio diagrams in a browser. We also added SharePoint workflow design support in Visio.

1. SharePoint Designer – We revamped the SharePoint Designer experience to focus on the building blocks of a SharePoint solution vs. HTML source code. The user experience gets easier including the Office Ribbon and new tools for building workflows and connecting to external data. We have made SharePoint Designer customizations safe out-of-box in 2010 so IT can let users customize sites without risk. SharePoint Designer is also a great tool for mashing-up SharePoint (which now exposes REST) and external data.

2. InfoPath Forms Service – InfoPath is the best way to have a common form definition render in the browser as well as in a rich and offline client. For 2010, we improved the design environment to make it easier to build rich forms declaratively with little to no code and more client-side validation. We have also made it straightforward to use InfoPath forms as native SharePoint forms both on the web and when offline from within the SharePoint Workspace client.

3. Access Services - Users have long loved the ability to create database applications quickly with forms and views. Access Services lets you publish new Access solutions to a SharePoint site where they can be managed centrally and accessed (necessary pun) from a web browser.

4. Sandbox Solutions – In SharePoint 2007, custom code requires the farm administrator to trust the code running on the server. In SharePoint 2010 we are introducing a new SharePoint custom code sandbox with isolation and resource limitations (memory, SQL, CPU) that allows administrators to let others safely add and consume custom solutions without impacting overall farm performance and stability. While it does not cover the full SharePoint object model it addresses key scenarios like custom web parts and event receivers. We will use this and the client side object model described later to support custom SharePoint solutions in SharePoint Online as well.

5. Business Connectivity Services – We expanded the read-only Business Data Catalog from SharePoint 2007 to support create, read, update, delete, search and offline access to line-of-business (LOB) data. This data, such as a customer record from a database, web services, etc. is called an External List in SharePoint 2010 and it is mapped to an External Content Type so this data looks and behaves like native SharePoint lists. You can not only update this data from within SharePoint but can take it offline from SharePoint Workspace and, where it makes sense like contacts, from Outlook with offline editing. There is great support for BCS in SharePoint Designer and Visual Studio 2010. This is perhaps our biggest “Wow, how did you do that?” demo. We will be building on the BCS for future LOB connectivity solutions.

The above content comes from the 'Microsoft SharePoint Team Blog' and can be found here.

Sharepoint Designer 2010 More...

In today's blog post, I'd like to share the Introducing SharePoint Designer 2010 video and get your reaction to it.

The video gives a quick tour of the SharePoint Designer interface and then goes into the four main areas of customization in SharePoint Designer.

1. Create data sources
2. Create custom views and forms
3. Create custom workflows
4. Design and brand a site

Taken together, these are the tasks you perform to create custom no-code solutions on the SharePoint platform.

Introduction to SharePoint Designer 2010

SharePoint Designer 2010 is the premier tool to configure and customize SharePoint 2010. It has evolved from SharePoint Designer 2007 with a totally new look and feel to it. This video shows how you can navigate around the SPD 2010 environment.

Managing SharePoint Designer 2010

SharePoint Designer 2010 is a powerful application used to build custom sites and solutions on the SharePoint platform. It’s a great way to create and customize pages, views, forms, data sources, workflows, and more.

But there are some tasks in SharePoint Designer that give SharePoint administrators real heartburn because of the potential problems it creates for them.

Here are the big 3:

1. Detaching pages from their site definition – When you do this, intentionally or not, the page overrides the site definition and therefore won’t be recognized the next time the site definition is updated. This means you’ll be talking to your SharePoint administrator the next time the server is upgraded.
   
2. Customize master pages and page layouts – While this may improve the look and feel of your site, there’s a risk that you’ll remove the corporate brand that was intended for all sites in your organization. Even worse, you could potentially break your site and other sites if you change or delete a required content region.
   



3. Editing files directly in the site URL structure – This might be a quick and easy way to modify any file on your site, but in doing so, you could mistakenly delete a support file or template file required by SharePoint.

So on one hand, SharePoint Designer 2010 gives you a lot of power and flexibility in how you change the appearance or functionality of a SharePoint site. But on the other, if it’s used incorrectly, it can create issues for you, your site, and of course, your administrator.

The SharePoint Designer Settings page

In SharePoint 2010, you and your administrator will be happy to learn about the SharePoint Designer Settings page, which looks like this.

The SharePoint Designer Settings page helps you manage how SharePoint Designer 2010 is used in your organization by giving you control of these settings:

1. Enable SharePoint Designer: Enables or disables SharePoint Designer for an entire application or site collection. When checked, SharePoint Designer can open and edit SharePoint sites. When unchecked, it cannot be used to open or edit sites.
   
2. Enable Detaching Pages from the Site Definition: Enables or disables the ability to detach pages from the site definition. When checked, SharePoint Designer allows users to edit pages in Advanced Mode, giving them access to every part of the page and consequently when they save, the page is detached from its site definition. When unchecked, SharePoint Designer disables the Advanced Mode, forcing users to edit only the parts of the page in a Web Part Zone. The page, as a result, is never detached from the site definition.
   
3. Enable Customizing Master Pages and Layout Pages – Enables or disables master pages and page layouts in SharePoint Designer. When checked, SharePoint Designer displays master pages and page layouts in the Navigation pane. When unchecked, these pages don’t appear in the Navigation pane of SharePoint Designer.
   
4. Enable Managing of the Web Site URL Structure – Enables or disables the site URL structure and its contents. When checked, SharePoint Designer displays the All Files options in the Navigation pane allowing users to view and edit any file on the site. When unchecked, the All Files option doesn’t appear in the Navigation pane.

In Central Admin and Site Collection Admin

There are not one but two SharePoint Designer Settings pages that you can use to manage how SharePoint Designer 2010 is used in your organization:

• Central Administration – The SharePoint Designer Settings page in Central Administration applies the settings at the web application-level for all site collection administrators on down. That’d be everyone.
  
• Site Collection Administration – The SharePoint Designer Settings page in Site Collection Administration (you know, the Site Settings page for your top-level site) applies the settings at the site collection level to all designers and owners.

Use one or both pages to manage how SharePoint Designer 2010 is used in your organization without fear of it detaching pages, removing corporate brands, or breaking sites. You may even choose to temporarily enable and disable certain SharePoint Designer features depending on where you’re at with your SharePoint deployment.

What’s next?

Once you determine how SharePoint Designer should be used, your next step will likely be adding and removing users to and from the Designers and Owners groups. In SharePoint 2010, you can do this from the Site Settings page as well as in SharePoint Designer 2010!

Want to see it in action? Check out this video where I go over these same points, show you the SharePoint Designer Settings pages, and what things look like in SharePoint Designer when you enable and disable each setting.

How to: Upload a file/document using the SharePoint Object Model

With this simple article, I'm walking you through the process of uploading any file to your Document Library.

Note; Since this is done through the local API, you need to have this code running on the server. That means that it's ideal to use in for example a FeatureReceiver or EventReceiver. You cannot run this code on the client in e.g. a Windows Form, then you'll need to utilize the SharePoint WebServices instead.

Code to upload a file/document to a SharePoint Document Library

Use the following code to get you started in uploading a file using the object model. It really isn't that hard :-)

// Getting a reference to the document library
var sp = new SPSite("http://localhost");
var site = sp.OpenWeb();
var folder = site.GetFolder("Documents");
var files = folder.Files;

// Opening a filestream
var fStream = File.OpenRead("C:\\MyDocument.docx");
var contents = new byte[fStream.Length];
fStream.Read(contents, 0, (int)fStream.Length);
fStream.Close();

// Adding any metadata needed
var documentMetadata = new Hashtable {{"Comments", "Hello World"}};

// Adding the file to the SPFileCollection
var currentFile =
files.Add("Documents/MyDocument.docx", contents, documentMetadata, true);

site.Dispose();
sp.Dispose();

As you can see in the image below, the metadata "Comments" has been filled in as per the metadata I specified in the code above.

Simple as that. Over and out!