All About SharePoint: SharePoint Branding Part 4

Changing Styles

You can customize the style of the pages by changing the style sheets. Styling is provided by the core files. You can overwrite default styles in your CSS. For example, if home page is loaded in the IE, press F12 to open the debugger. Press Ctrl+B to select element by click (This option is available under the Find menu). Click the element for which you want to change the style. Debugger shows you the file name where the style is located and the style itself. Copy the style to your custom CSS and apply new setting. For example, below you will change the color of the Suite Bar.

1. Load home page in IE. Press F12. Select Select element by click from the Find menu and select the Suite Bar.

Figure 12-9: Suite Bar

2. Note the style under the Style tab.

Figure 12-10: Styles

To change the color of the Suite Bar, copy following code to the custom CSS file (main.css), at the bottom. You can access css file from the mapped folder.

#suiteBarLeft {

background-color: #008ba9;

}

#suiteBarRight {

background-color: #008ba9;

}

Listing 12-6: Custom styles

Before applying new style, this is how Suite Bar looked:

Figure 12-11: Original Suite Bar Color

This is how updated Suite Bar looks (You won’t notice the color change if you are reading a printed book because the images are mono color):

Figure 12-12: New Suite Bar Color

Adding Snippets

A snippet is an HTML representation of a SharePoint component or control such as a navigation bar or a Web Part. Using the snippet gallery, you can quickly add SharePoint functionality to your pages. Using snippet gallery, you can do the following:

§ Choose a component from the gallery

§ Configure the properties of the component

§ Preview the appearance in the browser

§ Copy it anywhere in your page

Figure 12-13: Snippets (Ribbon)

1. To insert a snippet, browse to the website.

2. Go to Site Actions > Site settings > Design Manager.

3. Click Edit Master Pages on the left side.

4. Click on the default page to open it.

5. Click on the Snippets link in the upper-right corner.

6. Open Design tab to view all snippets. Once you click a snippet, the page re-loads and shows you a preview of that snippet, the properties for that snippet, and the HTML code snippet that you can copy and paste into your master page. The properties are grouped into different tabs. Expand each tab to see the properties contained within. You can set values for the properties. After you configure properties, choose Update to update the HTML snippet. The HTML snippet is automatically updated. Once you are done changing the properties’ values, you can copy the HTML and paste it on to your master page. Click Copy to Clipboard to copy the snippet to the clipboard.

Customizing Search Box

Now that you have seen how snippets work, let’s customize the Search Box in our site. In the HTML template, we had just used a text box and a button. Now, we need a functional search box that should return results from the site. To achieve this, we will add Search Box snippet to our master page.

1. To insert Search Box snippet, browse to the website.

2. Go to Site Actions > Site settings > Design Manager.

3. Click Edit Master Pages on the left side.

4. Click on the default (master page) to open it.

5. Click on the Snippets link in the upper-right corner.

6. Select Search Box snippet from the ribbon.

7. Since you will use custom style, you don’t have to change the properties. Click Copy to Clipboard button.

8. Go to mapped network drive and open master page in an editor.

9. Locate <div class=”search”> tag.

10. Copy the Search Box snippet between <div class=”search”> and </div> tags overwriting whatever is in between. Here is how the div tag looks before copying the snippet:

</div>

Listing 12-7: Search code HTML

After copying snippet, search div looks like this:

<div class="search">

<div data-name="SearchBox">
<div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style="">
<div componentid="ctl00_SmallSearchInputBox_csr" id="ctl00_SmallSearchInputBox_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_SmallSearchInputBox_csr_sboxdiv">
<input type="text" value="Search..." maxlength="2048"
accessKey="S" title="Search..." id="ctl00_SmallSearchInputBox_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U',
function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_SmallSearchInputBox_csr').search($get('
ctl00_SmallSearchInputBox_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="EnsureScriptFunc('Search.ClientControls.js',
'Srch.U', function() {var ctl = $find('ctl00_SmallSearchInputBox_csr');ctl.
activateDefaultQuerySuggestionBehavior();})" onfocus="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U',
function() {var ctl = $find('ctl00_SmallSearchInputBox_csr');ctl.hidePrompt();
ctl.setBorder(true);})" onblur="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_SmallSearchInputBox_csr');
if (ctl){ ctl.showPrompt(); ctl.setBorder(false);}})" class="ms-textSmall ms-srch-sb-prompt ms-helperText" /><a title="Search" class=
"ms-srch-sb-searchLink" id="ctl00_SmallSearchInputBox_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_SmallSearchInputBox_csr').search($get(
'ctl00_SmallSearchInputBox_csr_sbox').value);})" href="javascript: {}"><img src="/_catalogs/theme/Themed/E97CFE0A/searchresultui-61174269.themedpng?ctag=4" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><noscript><div id="ctl00_SmallSearchInputBox_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_SmallSearchInputBox"></div><div class="ms-clear"></div></div></div>

</div>

Listing 12-8: Search snippet

The code above looks jumbled up. The portions that are of your interest have been emboldened. Since the search box that we had used was just a place holder and did not add any value to the site, we will keep the search box created by the snippet above but that does not mean you cannot modify the look and feel of the search box. You can change the look and feel by customizing the styles. As explained earlier in the chapter, use F12 key to open IE debugger, select the elements you want changed, copy the styles to your custom CSS and modify them. To clarify the process, I will slightly modify the custom CSS for the search box. Since we are using the snippet generated by the SharePoint, we don’t need the text box and search button styling that we had in our CSS, therefore, we are going to remove those styles from our CSS.

11. Open main.css (from the mapped drive > social > css folder) in editor. Locate the following two lines and remove them since we don’t need them anymore but even if you keep them they won’t harm you since they are not being called any more.

.search_box{width:68%; float:left; background-color:#fdfdfd; border:1px solid #e5f0f3; padding:3% 1%; border-right:0; font-family: 'SegoeWPLight';}

.search_button{width:28%; float:left; background-color:#008ba9; border:none; color:#FFF;padding:3% 1%; text-transform:uppercase; font-family: 'SegoeWPLight'; cursor:pointer}

Listing 12-9: Search styling

The style that we are interested in is as following:

.search{width:40%; float:right; margin-top:15px}

Listing 12-10: Search box adjustment

Since we have removed the Search button and now we are using the default image (lens), either we need to increase the length of the search box or we need to slightly move it to the right to bring it closer to the right border. We will decrease the width from 40% to 25% and that will move the search box closer to the right border. Updated style looks as following:

.search{width:25%; float:right; margin-top:15px}

Listing 12-11: Updated search box adjustment

That is it. We have our search box and this is what we will keep on the site. If you want to experiment a bit more for your learning please continue reading. If you want to change the style of the search box, for example, background color, change square corners to rounded corners, etc, copy following style to your custom CSS just under the .search class.

#SearchBox .search, #SearchBox .ms-srch-sb-border, #SearchBox .ms-srch-sb-borderFocused {

background-color: #e5f0f3;

float: right;

height: auto;

width: auto;

padding: 0 0 0 2px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

margin-right:10px;

}

Listing 12-12: Stylize search box

This style will change the background of the search box to light sky blue and square corners to rounded corners. This is how the search box will look:

Figure 12-14: Stylish Search Box

If you want to add more style to the search box, for example, if you want to change the search image, add following styles to your custom css (main.css):

#SearchBox .ms-srch-sb input[type=text]{

background-image:url(../images/search_bg.png);

background-repeat:repeat-x;

height:20px;

padding-top:4px;

width:190px;

border:none;

float:left;

margin:2px 0 0px 0;

color:#d1d3d4;

padding-left:10px;

}

#SearchBox .ms-srch-sb-searchImg {

height:30px;

margin-left: -19px;

width: 28px;

border:none;

float:left;

}

.ms-srch-sb > .ms-srch-sb-searchLink {

background-image:url(../images/search_btn.png);

background-repeat:repeat-x;

height:30px;

margin-left: -19px;

width: 28px;

border:none;

background-color:transparent;

float:left;

cursor:pointer

}

Listing 12-13: More styles for the search box

In the above styles, we change the background color of the search box to bluish silver and add a gradient to it. We also change the image button to a more stylish button that has a bigger lens image and has stylish border. The images used in the above styles are in the images folder.