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 class="search">
<input type="text" class="search_box" />
<input type="button" class="search_button"
value="Search" />
</div>
|
Listing 12-7: Search code
HTML
After copying snippet, search div looks like this:
<div class="search">
<div
data-name="SearchBox">
<!--CS: Start Search Box Snippet--><!--SPM:<%@Register
Tagprefix="SharePoint"
Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:DelegateControl
runat="server"
ControlId="SmallSearchInputBox">--><!--PS: Start of
READ-ONLY PREVIEW (do not modify)--><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><!--PE:
End of READ-ONLY
PREVIEW--><!--ME:</SharePoint:DelegateControl>--><!--CE:
End Search Box Snippet-->
</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.
Figure 12-15:
More styles for the
search box
I have commented out the above styles in the main.css. If
you want to use them, just uncomment the code and feel free to add your own
customizations.
