Sometimes, there's the need to include Sharepoint web parts in external web applications without showing elements derived from the master page (i.e. ribbon, navigation bars, title bar, etc.). The CSS snippet below is an easy way to hide unwanted elements by using CSS only, without changing the ASPX code.
1: Create a CSS file named (for example) zero.css in the Style Library as follows
<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>
/* 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>
2: link the CSS file in the desired master page by adding this line:
<link href="/Style%20Library/zero.css" rel="stylesheet" type="text/css" />
just above this line: <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
<link href="/Style%20Library/zero.css" rel="stylesheet" type="text/css" />
just above this line: <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
I suggest not to edit the original master page, but to make a copy and modify it.
I noticed slight differences in display, depending on the edition and version of Sharepoint. The code is substantially the same, but may require a minimum adjustment to the context.
I noticed slight differences in display, depending on the edition and version of Sharepoint. The code is substantially the same, but may require a minimum adjustment to the context.
No comments:
Post a Comment