SharePoint Branding

SharePoint 2010: Branding Step by Step IV

2011-09-15T22:15:00.000-07:00

Setting Up a SharePoint Environment for Branding

When you create SharePoint based Solutions, it is better to install Microsoft SharePoint Server 2010 or Microsoft SharePoint Foundation 2010 in your local computer. The post enables you to get started with an environment that is specifically suited to SharePoint Branding environment.

System Requirements

The minimum requirements for installing SharePoint 2010 are

64-bit operating system running either Windows Server 2008 with SP2 or later or Window Server 2008 R2
OS will need at least .NET 3.5 with SP1 installed as well
SQL Server 2005 with SP2 or later or SQL Server 2008. SQL must be 64-bit also
80 GB for system drive (You must have sufficient space for the base installation and diagnostics such as logging, debugging, creating memory dumps, and so on)
CPU utilization and support for RAM over 4GB but 6GB is a better starting point

Prerequisite Installer

The process is kicked off with the Products Preparation Tool, to install all of Required programs that are required to make SharePoint Installation run.

Prerequisite's main functions

First configures IIS with the necessary settings
Search for the checks listed programs and if they are not installed, or if the wrong version is found, automatically access the Microsoft Download Center, after that download and install

Running SharePoint Setup

Click Install SharePoint Server from launch the Microsoft SharePoint Server 2010 splash screen.
Next you will be move to prompts for Product Key. You must have the product key for your version of SharePoint Server 2010 existing

After that Read your License terms and click I accept and continue.

Next you will be Splash screen prompts for install SharePoint Server will appear Click Server Standalone, will install SQL Server Express 2010 with SharePoint Server installation package.

further details about SharePoint Setup - Farm installation you can go to below link:
http://sharepoint-admin-2010.blogspot.com/2011/01/installing-and-configuring-sharepoint.html

The Standalone installation will take few minutes, Next you will see the Run Configuration Wizard screen appear enabled the check box and click close, this will start the configuration wizard automatically.

On the Welcome to SharePoint Products and Technologies page, click Next.

The wizard will now configure SharePoint 2010 - Standalone, will take few minutes. At the Configuration Successful prompt, click Finish.

The configuration wizard creates an empty site collection and opens the page where you select its site template for your first SharePoint 2010 site collection. Select the collaboration - team site and click OK.

Your new site collection will look like Below figure

Installing SharePoint Designer
Download SharePoint Designer 2010(64bit)
Download SharePoint Designer 2010 (32bit)

or from Site collection site actions -> edit in SharePoint Designer

By the time you’re running the SharePoint Designer installation you will come across “read the Microsoft software license terms” enable the agree check box and continue.

“choose the installation you want” screen click on Install Now

SharePoint Designer Installation completes with blow figure in this screen click close

Installing Browsers for Usability Testing
Download “FireFox” browser
Download “Google Chrome” browser
Dwonload “Apple Safari” browser

Next will be setting up a site collection for our branding activitice for that we need to make some changes in site collection -> Site Settings.

Now in SharePoint Designer and Site Settings we have only limited setting for branding under Look and Feel, Galleries and Designer. Below figure shows existing setting

For that we need to activate certain features

SharePoint Server Publishing Infrastructure
Site Actions -> Site Settings -> Site Collection Administration -> Site collection features

SharePoint Server Publishing
Site Actions -> Site Settings -> Site Actions -> Manage site features

Below figure shows existing setting after features added

You can access the SharePoint Central Administration site from Start menu -> All Programs -> SharePoint 2010 Products -> Central Administration. Your Central Administration site will look like Below figure

Our next step will be how to make use of out-of-the-box sharepoint branding. We will meet on next post.

SharePoint 2010: Branding Step by Step III

2011-05-11T23:59:00.000-07:00

Change The Design Layout Into Working HTML and CSS

If your branding assignment is other than just simple modifications to the out-of-the-box SharePoint branding, it’s a good idea to make a working HTML version of the design layout.

Before that we need to slice the images from the design layout in a way that it can be used in the working HTML.

Slicing Design Layout

Why we need to slice design layout. One important fact is to reduce the loading time of the working HTML, by optimizing repeating or stretch area with single small image to fill a larger space, and to creating mouse events with clickable image areas like navigation.

Most meaningful fact is most of the image areas can be reproduce using CSS styles. Below figure shows slice tool

Select the slice tool and start working with Logo and title area like below figure shows.

Then double-click the sliced area, a popup will appear named slice options and start filling the form like below figure shows.

Next is Icons and Search bar, this are background transparent images for this we need to hide the background colours with effects thereafter set slicing like below figure shows.

Now comes the tricky part repeating areas like navigation and background areas of body, footer and working environment. Only select small part of the image like bellow figure shows.

Now we have sliced our design layout and ready to save, from file menu select save for web and devices option. Important information we need to save our transparent images as PNG and others as JPEG. Below Figure shows detail view of image saving method.

Building Up The Working HTML and CSS

We can start the working with HTML by setting up the folder structure. We need two folders named CSS and images and Place the entire images inside the image folder. After that we can start coding.

Now we need to create an index.html file and styles.css file under CSS folder.

Below I have provided the index.html code. This code has been done to the standards of W3 XHTML and only used DIV tags structuring.

Copy and paste the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SharePoint Sri Lanka</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body class="home">

<div id="page">

<div id="header">
<h1 id="logo"></h1>
<h1 id="title"></h1>
<div id="top-right">
<ul>
<li><a href="#"><h1 class="homeicon"></h1></a></li>
<li><a href="#"><h1 class="tagicon"></h1></a></li>
<li><a href="#"><h1 class="emailicon"></h1></a></li>
</ul>
<form action="#" method="post" id="search">
<p>
<label for="q">Search</label>
<input type="text" class="text" name="q" id="q" value="Search"/>
<input type="submit" class="submit" value=" "/>
</p>
</form>
</div>
<div id="MainNav">
<ul>
<li><a href="#" class="sub">Home</a></li>
<li><a href="#" class="sub">IT Departments</a></li>
<li><a href="#" class="sub">Services</a></li>
<li><a href="#" class="sub"> WIKI</a></li>
<li><a href="#" class="sub">Blog</a></li>
</ul>
</div>
</div>

<div id="wrap">
<div id="content">

<h1>Our Company</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut est. Cras tempus justo ut tortor. Integer arcu. Quisque pede. Nunc sapien. Fusce urna. Fusce libero tellus, varius a, placerat imperdiet, auctor eu, dolor. Quisque ut velit. Cras nonummy rutrum tortor. Suspendisse egestas. Vestibulum sagittis eros et sem.</p>

</div>

<div class="LN">
<h2>Calendar</h2>
<div id="news">
<ul>
<li>
<a href="#">
<span class="date">December 10, 2009 ›</span>
<span class="title">Lorem ipsum dolor sit amet holoda, consectetur adipiscing elit.</span>
</a>
</li>
</ul>
<p class="more"><a href="#">View More Stories ›</a></p>
</div>
</div>

<div class="calendar">
</div>

</div>

<div id="footer">
<div id="footer_content">
<ul style="float: left; padding-left: 0px;">
<li style="padding-bottom: 10px;" class="Orange">GENERAL</li>
<li><a class="footer_gray" href="#">Circular</a></li>
<li><a class="footer_gray" href="#">Cost Centers</a></li>
<li><a class="footer_gray" href="#">ESS</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Policies</a></li>
<li><a class="footer_gray" href="#">Holidays</a></li>
<li><a class="footer_gray" href="#">Organizational Chart</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Site Map</a></li>
<li><a class="footer_gray" href="#">Security Policy</a></li>
<li><a class="footer_gray" href="#">Phone Directory</a></li>
</ul>
<ul style="float: left; padding-left: 50px;">
<li style="padding-bottom: 10px;" ;="" class="Orange">OTHER</li>
<li><a class="footer_gray" href="#">Forms</a></li>
<li><a class="footer_gray" href="#">Noticeboard</a></li>
<li><a class="footer_gray" href="#">Events</a></li>
</ul>
<ul style="float: left; padding-left: 50px;">
<li style="padding-bottom: 10px;" ;="" class="Orange">DOWNLOADS</li>
<li><a class="footer_gray" href="#">Groups</a></li>
<li><a class="footer_gray" href="#">Other Applications</a></li>
<li><a class="footer_gray" href="#">Drivers</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Software Updates</a></li>
<li><a class="footer_gray" href="#">Microsoft</a></li>
<li><a class="footer_gray" href="#">HNB Applications</a></li>
</ul>
</div>
<div id="copyright">© 2011 khalam azad.</div>
</div>
</div>

</body>
</html>

Now creating style.css file this code also given below

/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: Helvetica, Calibri, Arial, sans-serif;
background: #9c9c9c url(../images/background.jpg) center no-repeat;
height: 100%;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
table { border-spacing: 0; }
acronym { cursor: help; }

html { font-size: 100.01%;overflow-y: scroll; }
body { font-size: 62.5%; line-height: 1.2; }
input, button, select, textarea { font-size: 100%; }

input.text, textarea { padding: 1px 2px; font-size: 100%; font-family: Arial, sans-serif; }
.submit, input[type="submit"], button { cursor/**/: /**/pointer; font-family: Arial, sans-serif; }
select { font-size: 100%; font-family: Arial, sans-serif; }
select > option { padding: 0 5px 0 3px; }

.alR { text-align: right; }
.alC { text-align: center; }

.hide { display: none; }
.clear { clear: both; }

.ir { position: relative; overflow: hidden; }
.ir span { position: absolute; width: 100%; height: 100%; left: 0; top: 0; text-indent: -1000em; }

a:link, a:visited { text-decoration: none; cursor/**/: /**/pointer; }
a:link:hover, a:visited:hover { text-decoration: underline; }

#header:after, #wrap:after, #content:after, #footer:after
{ content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }

a:link, a:visited {
color: #6099ba;
}
a:visited {
}
a:link:hover, a:visited:hover {
color: #1971c4;}

html { height: 100%; }

#page {
width: 984px;
margin: 0 auto;
min-height: 100%;
font-size: 1.2em;
color: #5a5a5a;
background: #FFFFFF
}
#header {
background: #e7e7e7 url() repeat-x 0 0;
position: relative;
height:112px;
z-index: 10;
}
#logo {
float: left;
background: url(../images/sharepoint-SL-logo.png) no-repeat 0 0;
height:90px;
width:151px;
}
#title {
float: left;
background: url(../images/top-title.png) no-repeat 0 0;
height:90px;
width:581px;
}
#top-right{
float: right;
margin:20px 0 0 0;
}
#top-right li{ float:left}
h1.homeicon{
background:url(../images/home-icon.png) no-repeat;
height:32px; width:35px;
}
h1.homeicon:hover{
background:url(../images/home-icon.png) no-repeat 100% -32px;
height:32px; width:35px;
}
h1.tagicon{
background:url(../images/tag-icon.png) no-repeat;
height:32px; width:37px;
}
h1.tagicon:hover{
background:url(../images/tag-icon.png) 100% -32px;
height:32px; width:37px;
}
h1.emailicon{
background: url(../images/email-icon.png) no-repeat;
height:32px; width:28px;
}
h1.emailicon:hover{
background: url(../images/email-icon.png) 100% -32px;
height:32px; width:28px;
}
#search {
float: right;
padding: 2px 20px 0 0;
clear:both;
}
#search label {
display: none;
}
#search input.text {
float: left;
width: 140px;
height: 20px;
font-size: 91.67%;
color: #555555;
padding: 5px 10px 5px 8px;
border: none;
background: url(../images/search-bar.png) no-repeat 0 0;
}
#search input.submit {
float: left;
width: 24px;
height: 22px;
margin-top: 4px;
border: none;
background: url(../images/search-icon.png) no-repeat 100% 0;
}
#search input.submit:hover {
background-position: 100% -21px;
}
#MainNav {
clear: both;
position: relative;
background: #5c5c5c url(../images/top-nav.jpg) 100% 0%;
height: 40px;
padding: 0 15px;
}
#MainNav li {
float: left;
margin: 0 5px 0 0;
}
#MainNav li a:link, #MainNav li a:visited {
color: #fff;
display: block;
float: left;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
padding:0 20px;
text-decoration: none;
z-index: 2;
}
#MainNav li a:hover {
color: #ffbe00;
background:url(../images/top-nav.jpg) 100% -41px;
}
.home #wrap {
font-size: 91.67%;
padding: 20px 20px 0;
background: url(../images/home-body-background.jpg) repeat-x;
}
#wrap {
font-size: 91.67%;
padding: 20px 20px 0;
background: url(../images/body-background.jpg) repeat-x;
}
#wrap p {
line-height: 1.54;
margin: 0 0 6px;
}
.GWP{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 0 0 20px;
width:600px;
height:225px;
overflow: auto;
float:left;
}
.NSM{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 0 0 20px 20px;
width:320px;
height:225px;
overflow: auto;
float:left;
}
.LN{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 30px 0 20px;
width:390px;
height:410px;
overflow: auto;
float:left;
padding: 10px;
}
.LN h2 {
font-size: 154.54%;
font-weight: normal;
line-height: 1.23;
color: ##767373;
margin: 0 0 .5em;
}
.LN ul,
.LN ol {
line-height: 1.54;
list-style: disc;
margin: 0 0 1em 2em;
}
.LN ol {
list-style: decimal;
}
#news {
}
#news ul {
list-style: none;
margin: 0 0 .5em;
}
#news li {
margin: 0 0 1em;
}
#news a:link, #news a:visited {
}
#news a:link .date, #news a:visited .date {
display: block;
color: #6e6d6e;
}
#news a:link .title, #news a:visited .title {
display: block;
font-weight: bold;
color: #252327;
}
#news a:link:hover .title, #news a:visited:hover .title {
text-decoration: underline;
}
.calendar{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 30px 0 20px 20px;
width:510px;
height:430px;
overflow: auto;
float:left;
}
/* old style*/
#copyright {
background-position: bottom;
background:url(../images/bg_footer_02.jpg) repeat-x;
height: 20px;
color:#CCC;
margin-left: auto;
padding-top: 13px;
clear: both;
padding-left:40px;
margin-right: auto;
font-size:80%;
}
#copyright a:hover{
color:#FFF;
}
#footer_content {
height: 90px;
line-height:15px;
margin-right: auto;
margin-left: auto;
padding: 15px 40px 5px;
background: url(../images/bg_footer_01.jpg) repeat-x;
}
.Orange {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fe9901;
line-height: 16px;
}
a.footer_gray {
color: #bbbbbb;
text-decoration: none;
}
a.footer_gray:hover {
color: #7F7C7C;
text-decoration: none;
}
#content h1 {
color: #767373;
font-size: 236.36%;
font-weight: normal;
line-height: 1;
margin: 0 0 0.3em;

Now you guys may get some problems that can be sorted out alone. Please change the image name according to CSS file.

Yes! We’re done with the backup works now. Next step will be setting up a SharePoint environment for branding. I hope next post will be more interesting than ongoing posts.

SharePoint 2010: Branding Step by Step II

2011-04-21T22:31:00.000-07:00

Creating Design Layout

Unlike wireframes, Design Layout are intended to be the final branding of the actual SharePoint site. creating Design Layout should include all of the things that make up a the final design, such as logo, colors, fonts, photos, resolution of the website and anything else that will appear on the final web solution.

To create a realistic prototype, Microsoft Expression Design and Adobe Photoshop will help. This two design application are ideal. Below figure shows Adobe Photoshop tool used to create the Design Layout

To obtain above design layout start with a new blank document. Use the following parameters for the Document as shown in the screenshot below.

Before starting your design Layout leave 15px from left and right corners of the blank document for browser compatibility. This will help you at the time you create your Prototype.

Now we need to create the top header section of the page. this section, we will have the Sharepoint forum logo, title, sub title, search, tag, email and the basic menu.

before creating Our featured areas we need to create the home page gradient divider grid line in order to get some realistic effect. To do this,

Go to its Blending Options > Gradient Overlay top colour #c6c6c6 bottom colour #e3e3e3.

Our featured area need some realistic effect for that we can use,
Blending Options > Inner Shadow white colour choke: 100%
next
select Blending Options > Colour Overlay: #f4f4f4 colour and
select Blending Options > Stroke size:1px, colour: #d1d1d1 and position: inside.

In the footer section of the design layout you can put some related links, also the copyright details if you wish to contain.

There we go... We are almost finished the layout designing (for this design layout I have font: "Arial". Heading font size 18pt, normal font size 11pt and sub heading 11pt bold, footer heading size 12pt.)

finally the design layout looks like!

Look for "change the design layout into Working HTML and CSS, which helps you a lot in sharepoint conversion.", in next branding step by step III

further details about Photoshop you can go to below link:

http://sixrevisions.com/graphics-design/35-basic-tutorials-to-get-you-started-with-photoshop
http://www.psd.tutsplus.com
http://photoshoptutorials.ws
http://www.photoshopstar.com

Launch of SharePoint Forum - Sri Lanka

2011-01-06T02:53:00.000-08:00

Hi SharePoint devotees. Great news came to light on 12th of January 2011, the launch of the Sri Lankan SharePoint Forum. It speaks about this magnificent tool reaching its peak.

Microsoft SharePoint forum - Sri lanka is dedicated to SharePoint and related products. The forum which can be reached online at www.SharePointSriLanka.org or www.SharePointSriLanka.com or www.SharePointSriLanka.net

The forum’s offline sessions which will take place on second Wednesday of every month at Microsoft office, Sri Lanka. It will hold two technical sessions each week.

On the launch we had over 130 followers and we did two sessions. The 1st session which was conducted by me on topic Professional SharePoint branding. It was a memorable and outstanding event for me. I like to thank and appreciate the support given by Prabath fonseka who found my talent and pushed me forward. Finally I like to extend my gratitude to my team member and friend Dinusha Kumarasiri. The second session was on Claim-based Authentication hosted by Prabath fonseka.

SharePoint 2010: Branding Step by Step I

2010-12-26T21:26:00.000-08:00

Hi..! SharePoint branding followers, this is step by step branding blogging is to help you people out of SharePoint branding issues. What we will be doing is will do complete branding top to bottom. First identifying a wireframe, building it to Photoshop Realistic Design, Converting Design into Working HTML, CSS and jQuery after that testing in Multiple Browsers and last not least Branding with SharePoint Designer 2010.

In SharePoint Designer 2010 we have lots of steps like creating a new master page, page layouts, modifying the CSS and jQuery.

Then creating custom themes with the office client, modifying themes in SharePoint Server. Planning site navigation and using non-SharePoint navigation, breadcrumb navigation and site map providers.

Ok will start our work right now.

Why Plan for Branding?

You guy can jump into SharePoint designer and start creating master pages for SharePoint 2010 but in a project environment that will be a mistake. The process of actually creating a brand in a SharePoint site involves several steps, including creating master pages, page layouts, CSS, and more. By effectively planning your branding before starting it, you have proactively considered exactly what you want to create and how it will be produced. Any adjustments or changes that are discovered during the planning process can be realized with much less effort than having to deal with them inside of SharePoint.

Requirements Analysis

Whether your SharePoint branding project is a site for 10 users or 10,000 users, certain requirements will undoubtedly need to be met. This is why the first step of almost any project, whether it is a SharePoint branding project or not, should be some amount of requirements analysis. Requirements analysis involves gathering and understanding the specific needs of a project. Typically this process includes asking a lot of questions and breaking larger problems into more manageable pieces to gain a better understanding of them.

Targeted Browsers and screen resolution

Another important decision to make is which browsers, operating systems and screen resolution will be targeted by your branding. Although many people may say that a website should support all browsers equally, it is often impractical to test each and every browser for pixel-perfect display. This is why it’s a good idea to decide early what browsers and operating systems will be supported by your SharePoint site. As mentioned earlier, this decision is typically much more important for public-facing Internet sites, for which you have no control over what browser users will be using to access the site. Currently, most web designers consider 1024 × 768 to be the most common screen resolution, followed closely by 1280 × 800.

Creating Wireframes

Wireframes are skeletal page designs; they capture the layout and flow of a website without focusing on colors and graphics. Guys, you people might be wondering why you should create a static, black-and-white wireframe when you plan to create a dynamic, full-color website. The major reason for creating wireframes before full-color comps is to ensure that all the stakeholders and decision makers focus on the layout and page flow, rather than get hung up on colour and images of published in site. Below figure shows wireframe that we are going to use for all practice.

I didn’t use any special tool to create the wireframe, it is not a major graphic work the tool I use to create the above wireframe is Microsoft word 2010 . Most of the work is done by Shapes tool under insert tab in the ribbon. I used the basic shapes and rectangle shapes to get above output. Below figure shows microsoft word tools used to create the wireframe.

Looking at the wireframes, note that not every single piece of SharePoint 2010 functionality is going to be included on this site. When creating wireframes for your SharePoint site, consider that not all of this functionality needs to be supported in your SharePoint branding. Also, it is important to remember all the different types of content that are supported in SharePoint 2010. Below figure shows the default SharePoint user interface (based on v4.master), with each of the major areas of functionality labeled.

The following table describes each of these major functional areas:

What is SharePoint 2010 Branding?

2010-12-06T20:11:00.000-08:00

brand as a "name, term, sign, symbol or design, or a combination of them intended to identify the goods and services of one seller or group of sellers and to differentiate them from those of other sellers.

The companies have chosen a marketing identity that enables the public to quickly and easily recognize them. This is branding. When referring to websites, branding usually involves the colors, fonts, logos, and supporting graphics that make up the general look and feel of the website.

The objectives that a excellent brand will achieve include:

1. Delivers the message clearly
2. Confirms your credibility
3. Connects your target prospects emotionally
4. Motivates the buyer
5. Concretes User Loyalty

Branding for SharePoint

Branding for SharePoint is similar to branding for any other sites, except that branding for SharePoint includes the master pages, page layouts, Cascading Style Sheets (CSS), jquery, Web Parts and eXtensible Stylesheet Language Transformations (XSLT).

Basically sharepoint 2010 will look like this:

Definition of Branding

The most common reason to brand a SharePoint site is to make it unique. Out of the box, SharePoint 2010 is not visually help you started. In fact, its look and feel is intentionally bland, as it is assumed that most companies are going to customize it. Indeed, making it “not look like SharePoint” is a basic request.

Themes

themes can be changes that are applied to the existing look and feel through the use of CSS. In SharePoint 2007, themes played a similar function, but behind the scenes, they worked completely differently than they do in SharePoint 2010.

In SharePoint 2010, themes are created with the Microsoft Office client software (2007 and above),using PowerPoint to create .THMX files that describe the 12 theme colors and two fonts available in the new SharePoint themes. Once created with Office, they can be loaded into SharePoint 2010 and applied to any site by site owners.

Along with the capability to create themes in the Office client, the Server version of SharePoint 2010 enables site owners to modify the themes — i.e., the colors and fonts — directly in the SharePoint Web user interface the changes can be viewed immediately.

further details about THEME you can go to below link:
http://erikswenson.blogspot.com/2010/01/sharepoint-2010-themes.html

Master Pages

I have discussed about master pages in same blog in title of "SharePoint 2010: Master Pages" on july 29, 2010 before brifly and this is my favorite part in sharepoint 2010. this time will comes with a few out-of-the-box master pages that can be used for website branding right away. The following list describes some of the more important out-of-the-box master pages:

v4.master — This is the default master page that is used for many of the site templates used by SharePoint 2010, and is the page shown earlier.

nightandday.master — This master page is accessible only in a SharePoint Server 2010 site that has the Publishing Feature enabled. Unlike v4.master (which is geared toward intranet sites), this master page is styled in a more simplistic way and is more appropriate for an Internet site. Because the underlying code for the master page is well organized, this can be a good place to look when you are first learning about master pages.

minimal.master — This master page is used only on pages that have their own navigation or need extra space (such as dedicated application pages or the search center). Unlike the concept of minimal master pages in SharePoint 2007, this master page is not intended to be the starting point for branding, as it lacks several common SharePoint controls.

Cascading Style Sheets

CSS is pervasive in SharePoint branding. Almost every aspect of SharePoint is styled by CSS. All the SharePoint controls that are loaded by a master page are styled by CSS, as well as many Web Parts — even SharePoint themes apply to specially commented CSS fi les in SharePoint 2010. Because of the importance of CSS in SharePoint, a sound understanding of it is crucial to becoming skilled at branding in SharePoint.

further details about CSS you can go to below link:
http://www.w3schools.com/css

Content Pages

there are three main types of content pages in SharePoint Server 2010:

1. Publishing pages (SharePoint Server 2010 only)
2. Web Part pages
3. Wiki pages

Each type of page has different options and a different intended use, so your functional requirements will dictate which page is right for each scenario.

SharePoint 2010: Master Pages

2010-07-29T10:33:00.000-07:00

Creating You own Master Page

Professional recommend when you do complete branding go for the starter master page (Formerly known as Minimal Master Pages). for further details you can go to below link.
http://startermasterpages.codeplex.com/

Basically starter master page will look like this

when you are trying to modify a master page the difficult part is Changing the Position of the Ribbon. To start you have to identify important div IDs, navigation and controls. Below are few IDs.

div IDs
1. #s4-ribbonrow
2. .s4-ribbonrowhidetitle
3. #s4-workspace
4. #s4-bodycontainer

navigation and controls

Changing how the Ribbon looks: Just like any Share Point 2010: Master Pages branding it takes time and patience. To style the ribbon. now another important thing is one java script witch handles the V4 version.

don't ever remove this code because it handles all the version information related to share point 2010.

Above information are most important when it come to creating a complete new master page. while I am writing this blog I am also pretty new to share point 2010.

Applying New Master Pages

You can also use the SharePoint user interface to apply a new master page. for this you have to apply two features are given below.

Navigate to the landing page of your newly created site collection

- Click on “Site Actions”

- Click on “Site Collection Features”

- Activate “SharePoint Server Publishing Infrastructure” and

- Click on “Site Actions”

- Click on “Manage site features”

- Activate “SharePoint Server Publishing”

it will allow you to add new master page

SharePoint 2007 CSS Reference Chart

2010-07-26T09:48:00.000-07:00

Share point CSS guide is about how to modify certain classes and IDs. It means what?
After re-factoring the master page you have to identify all the controls. these controls are inbuilt in share point. Actually using this guide line what we are going to do is restyle control areas through CSS classes and IDs. Below chart is a useful link that completely shows how to control styles of components like site actions, advance search, navigations top and left and other components.

CSS Reference Chart for SharePoint 2007

Note:

The default CSS files are located on the web server in the following directory:

Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES.

Additional styles are located in the Publishing feature:

Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\PublishingLayouts\en-us

SharePoint 2007 Theming

2010-07-25T08:34:00.000-07:00

Hi Guys.. I was working in a US project for last three months... this is all about Share point.... share point.... share point.... When it comes to UI what it matters is master paging, layout pagers and Theming. To complete these task I went through certain web sites and Blogs. I'm willing to share these with professionals who need it. Tomorrow I will be sharing these Informations.

Until that I like to share certain tips that you have to follow.
1) Master Page - Try to use minimum master page with all its place holders.
2) layout Pagers - Identify all types of information outputs and gather user requirements and create simple HTML layout pagers first. Then transfer these to .aspx files with required place holders.
3) Theming - This is the most difficult part and time consuming task in share point 2007. create your own Theme. After that define that Theme for the sites and modify theme.css for your best UI. Ignore other style sheets for basic level.