{"id":1559,"date":"2012-02-01T06:06:34","date_gmt":"2012-02-01T06:06:34","guid":{"rendered":"http:\/\/www.obieta.com\/?p=1559"},"modified":"2012-02-01T06:06:34","modified_gmt":"2012-02-01T06:06:34","slug":"designing-sharepoint-sites-tutorial","status":"publish","type":"post","link":"https:\/\/obieta.com\/?p=1559","title":{"rendered":"Designing Sharepoint Sites Tutorial"},"content":{"rendered":"<p>We\u2019re always excited when we release a new free SharePoint theme for you guys, so here it is: Tendance! The theme features a modern, simple and light design. We like to keep it simple and elegant. This work is licensed\u00a0<a title=\"Creative Commons \u2014 Attribution-ShareAlike\" href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creative Commons Attribution-Share Alike 3.0 License<\/a>. You may modify the theme as you wish at your own risk. However, it is forbidden to sell or redistribute the theme without TopSharePoint.com permission.<\/p>\n<p>Please link to this article if you would like to spread the word.<\/p>\n<p>Features:<br \/>&#8211; Two-columns<br \/>&#8211; Fixed-width<br \/>&#8211; CSS based<br \/>&#8211; One master page and two page layouts provided<br \/>&#8211; Slider powered by\u00a0<a title=\"hSlides jQuery Plugin\" href=\"http:\/\/www.jesuscarrera.info\/demos\/hslides\/\" target=\"_blank\" rel=\"noopener noreferrer\">hSlides<\/a> on the homepage<br \/>&#8211; Top and left dynamic navigation<br \/>&#8211; Ideal for 1024\u00d7768 screen resolution<br \/>&#8211; Suitable for small SharePoint 2010 Publishing Sites<\/p>\n<p><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-0a.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"470\" height=\"336\" \/><br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-0b.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"470\" height=\"370\" \/><\/p>\n<p><strong>Instructions<\/strong><\/p>\n<p>To enable Tendance theme for SharePoint 2010 Publishing Site follow these simple steps.<\/p>\n<p>Download the\u00a0<a href=\"http:\/\/www.topsharepoint.com\/freethemes\/Tendance.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Tendance.zip<\/a> file and extract the files.<br \/>After unzipping the file you will see one folder called Tendance with three folders under it:<\/p>\n<p><strong>MasterPages<\/strong> folder contains two masterpages. Main master page<em>Tendance.master<\/em>, the general master page used across the site and the search master page\u00a0<em>Tendance-search.master<\/em>. Import\u00a0<em>Tendance.master<\/em> into \u201cMaster Page\u201d site objects in SharePoint Designer. I will talk about\u00a0<em>Tendance-search.master<\/em>later.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-1.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"441\" height=\"224\" \/><\/p>\n<p><strong>Page Layouts<\/strong> folder contains two custom page layouts created for this theme. Both page layouts allows you to display the left navigation and other custom functions.\u00a0<em>Tendance-Home.aspx<\/em> will be used for the homepage and\u00a0<em>Tendance.aspx<\/em>for the rest of the site. Import these custom page layouts into \u201cPage Layouts\u201d site objects in SharePoint Designer.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-2.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"443\" height=\"285\" \/><\/p>\n<p>And finally, the third folder called\u00a0<strong>Tendance<\/strong> contains a\u00a0<em>css<\/em> folder,\u00a0<em>images<\/em> folder and\u00a0<em>html<\/em> folder.<br \/>Place the\u00a0<em>Tendance<\/em> folder under your site root. Make sure Network and Network Service accounts have read permissions on this folder.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-3.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"308\" height=\"299\" \/><br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-4.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"242\" height=\"105\" \/><\/p>\n<p>Once all the files are put into place, it is time to set the\u00a0<strong><em>Tendance.master<\/em><\/strong> as the default master page.<\/p>\n<p>Go to your site homepage and click on Site Actions &gt;&gt; Site Settings.<br \/>Under \u201cLook and Feel\u201d click on \u201cMaster page\u201d and under Site Master Page select<em>Tendance.master<\/em> and click OK.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-5.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"278\" height=\"135\" \/><br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-6.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"392\" height=\"141\" \/><\/p>\n<p>Go back to the Site Settings and click on \u201cPage layouts and site templates\u201d. Make sure you have the \u201c(Article Page) Tendance-Home\u201d and \u201c(Article Page) Tendance\u201d on the right side pane for Page Layouts.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-7.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"470\" height=\"178\" \/><\/p>\n<p>Go to your site and edit all the pages to inherit the custom page layout \u201cTendance\u201d.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-8.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"470\" height=\"232\" \/><\/p>\n<p>Now, we need to take care of the homepage.<\/p>\n<p>Go to the homepage &gt;&gt; Site Action &gt;&gt; Edit Page &gt;&gt; Page tab &gt;&gt; Page Layout &gt;&gt; Select Tendance-Home page layout.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-8a.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"370\" height=\"250\" \/><\/p>\n<p>Next, click on \u201cAdd a Web Part\u201d &gt;&gt; under Categories select \u201cMedia and Content\u201d &gt;&gt; under Web Parts &gt;&gt; Page Viewer &gt;&gt; Click Add button.<br \/><img loading=\"lazy\" title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-8b.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"415\" height=\"302\" \/><\/p>\n<p>Edit the newly added Page Viewer web part and type this path in the Link textbox\u00a0<em>\/Tendance\/html\/Tendance.htm<\/em>. Add 530 (pixels) for the Height and 1020 (pixels) for the Width. Set Chrome Type to None and click OK. Next, make sure you see the Page Viewer web part populated with the custom slider and Publish the page.<br \/><img title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-8c.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"470\" \/><\/p>\n<p>And finally let\u2019s take care of the search page.<\/p>\n<p>We need to change the search results page first. On the homepage go to Site Actions &gt;&gt; Site Settings and under \u201cSite Collection Administration\u201d click on \u201cSearch settings\u201d. Under \u201cSite Collection Search Results Page\u201d change the default setting to \u201c\/Search\/results.aspx\u201d and click OK.<br \/><img title=\"Tendance \u2013 Free SharePoint 2010 Theme\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Synesthesia-10.jpg\" alt=\"\" width=\"470\" \/><\/p>\n<p>Go to SharePoint Designer and Open Site (http:\/\/yourdomain.com\/Search). Under \u201cSite Objects\u201d click on Master Pages and import\u00a0<strong><em>Tendance-search.master<\/em><\/strong> from Tendance package.<br \/><img loading=\"lazy\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-9.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"411\" height=\"366\" \/><\/p>\n<p>Right-click on the\u00a0<strong><em>Tendance-search.master<\/em><\/strong> and pick \u201cSet As Custom Master Page\u201d.<br \/><img loading=\"lazy\" src=\"http:\/\/www.topsharepoint.com\/wp-content\/uploads\/Tendance-10.jpg\" alt=\"Tendance \u2013 Free SharePoint 2010 Theme\" width=\"470\" height=\"354\" \/><\/p>\n<p>And, that\u2019s all folks! Enjoy the theme and if you like it (or not) leave us a comment. It does help us to improve the next themes.<\/p>\n<p><strong>Download Tendance Theme<\/strong><br \/><a href=\"http:\/\/www.topsharepoint.com\/freethemes\/Tendance.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Tendance.zip<\/a><\/p>\n<p>Credits:<br \/><a href=\"http:\/\/www.topsharepoint.com\/tendance-free-sharepoint-2010-theme\">http:\/\/www.topsharepoint.com\/tendance-free-sharepoint-2010-theme<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re always excited when we release a new free SharePoint theme for you guys, so here it is: Tendance! The theme features a modern, simple and light design. We like to keep it simple and elegant. This work is licensed\u00a0Creative Commons Attribution-Share Alike 3.0 License. You may modify the theme as you wish at your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,8],"tags":[],"_links":{"self":[{"href":"https:\/\/obieta.com\/index.php?rest_route=\/wp\/v2\/posts\/1559"}],"collection":[{"href":"https:\/\/obieta.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/obieta.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/obieta.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obieta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1559"}],"version-history":[{"count":0,"href":"https:\/\/obieta.com\/index.php?rest_route=\/wp\/v2\/posts\/1559\/revisions"}],"wp:attachment":[{"href":"https:\/\/obieta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/obieta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/obieta.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}