Dear all,

I am working on SharePoint 2010 - for the last 2 - 3 years. I have recently - came across a requirement - wherein I need to give a completely clean interface(completely new masterpage) for sharepoint 2010 project - subsite.

I have read many blogs(Heather and others) etc. wherein they had mentioned sharepoint will not render subsites - if we update a very clean asp.net masterpage etc.

few people said we can control that through css - few said we can do through this coding.

Can somebody guide to achieve my requirements?

A clean interface in a subsite.

Warm Regards,

Sathya

Hi

Here is the link to customize master page using SharePoint Designer-

https://support.office.com/en-in/article/Customize-a-master-page-to-brand-your-site-0a57b837-4c97-4af9-a088-fedf3dfd1dd5

http://sharepointpromag.com/sharepoint-development/sharepoint-branding-101-branding-master-pages

Hope it helps.

This should ideally be done using CSS 

This article shows you how to do it : 

http://social.technet.microsoft.com/wiki/contents/articles/31052.applying-custom-css-to-masterpage-in-sharepoint-2013.aspx

This is the best method to change your look and feel of Masterpage 

Please mark this reply as answer if it solved your issue or vote as helpful if it helped so that other forum members can benefit from it 

Regards,

Jiniv Thakkar - MCP - Pune - India 

• Proposed as answer by Jiniv Thakkar 21 hours 29 minutes ago

This should ideally be done using CSS 

This article shows you how to do it : 

http://social.technet.microsoft.com/wiki/contents/articles/31052.applying-custom-css-to-masterpage-in-sharepoint-2013.aspx

This is the best method to change your look and feel of Masterpage 

Please mark this reply as answer if it solved your issue or vote as helpful if it helped so that other forum members can benefit from it 

Regards,

Jiniv Thakkar - MCP - Pune - India 

• Proposed as answer by Jiniv Thakkar Tuesday, May 26, 2015 10:10 AM

Hi Sathya,

If you want a clean master page, I suggest you create a new master page base on the v4.master and add the following CSS code into the new master page.

<style type="text/css"> 
 /* Resizes to 0 the upper margin of the main area */ 
 .ms-pagetitleareaframe table { background: none; }
 /* Hides the left navigation area (quick launch bar) */
 #s4-leftpanel-content { display:none !important; } 
 /* Resizes to 0 the left margin */  
 .s4-ca { margin-left:0px !important; margin-right:0px !important; } 
 /* Hides title and breadcrumb bar */  
 .s4-title { display:none !important; } 
 /* Hides the top navigation links */     
 .s4-tn { display:none !important; } 
/* Hides the top navigation container bar */
.s4-notdlg { display:none !important; }
 /* Hides the search box */  
 #SRSB { display:none !important; } 
 /* Hides the help button */     
 .s4-help { visibility: hidden; } 
 /* Hides user name in the top right corner and the related menu */     
 .s4-trc-container-menu { visibility: hidden; } 
 /* Hides the ribbon */  
 .ms-cui-ribbonTopBars{ display:none; }  body #s4-ribbonrow { min-height: 0 !important; display:none !important; } 
 </style>

http://sharepoint-community.net/profiles/blogs/blank-master-page

Best Regards,

Dennis

Dear Dennis,

Many thanks for your tip.

I am now working now - on a subsite.

I created the CSS and put this in a _layouts/xx/xx/mobility.css

also in the subsite master page I had given a CSS path - as below.

<link href="/_layouts/xx/xx/mobility.css" rel="stylesheet"/>

I would like to disable the search window that is appearing in the page.

In the masterpage I found class="PlaceHolderSearchArea" for search button.

I had created the following code in mobility.css

#PlaceHolderSearchArea

{

display:none !important;

}

When I re-looked at the page after applying this. Still the page is showing the search button.

I do not know - where I am missing.

Any inputs are welcome.

Cheers

Sathya

Hi Sathya,

Please add the CSS style below into mobility.css.

#s4-searcharea{
  display:none !important;
}

Best Regards,

Dennis

Sathya,

Its recommended to always start with either startup.master or with a backup of existing master page.

1) Backup existing master page - Take a backup of your V4.master (for customizing site master page other than search site) or Search.master (for customizing search master page). Not make changes wherever necessary.

for instance - if you do not wish to display the site Title and Description, then just find the relevant container and hide it (do not delete anything)

2) Using Starter.master - You will get code for starter master pages from the internet with all required containers pre-defined. You can add to this code and build your master page.

IMPORTANT points -

• Always keep a back of existing master page and never overwrite it.
• Do not delete anything from master page. There are certain placeholders which are mandatory and if deleted, the code will throw error for missing placeholders.
• Make sure there are no 2 placeholders with same name, this will throw errors too.
• Try to keep all styling in a separate CSS file and refer in your master page.
• If anything needs to be not shown on site, hide the respective container, placeholder. Do not delete it.
• You can use JQuery, Javascript, CSS in code.
• Package your master page into a wsp and deploy, this will keep files consistent on all SP WFE servers.
• There are 2 ways of applying master pages - Site Master Page and System Master Page. Apply as required.
• Master pages can be applied to current site or even all subsites. Apply accordingly.