Should You Modify The Master Page Or Use Alternate Css For Branding Sharepoint?
The Problem: Finding the Right Balance for Branding
When embarking on a SharePoint branding project, site owners face a choice between two main technical approaches: modifying the master page or using alternate CSS. Both allow customization of fonts, colors, logos and layouts to align with an organization’s visual identity. However, each approach has trade-offs to consider in terms of ease of maintenance, branding consistency and development effort.
Master pages control the structure and common elements across multiple SharePoint sites. By altering a master page, site-wide global changes can be made efficiently. However, these changes also cascade down to all sites inheriting that master page with little control. Excessive master page modifications can cause upgrade headaches and compatibility issues down the road.
Alternate CSS overrides the default SharePoint CSS rules to change styles in a more targeted way. This surgical approach avoids site-wide changes, but can also become complex to manage over time as more adjustments are added. Furthermore, not all SharePoint styling can be addressed through CSS alone.
So when embarking on SharePoint branding, how do site owners balance when to modify master pages versus use alternate CSS? The optimal approach depends on the type of design changes needed. By understanding the strengths of each option, customizations can be handled in an effective way to meet branding needs.
When to Modify the Master Page
Master pages are the primary technical means of making site-wide structural changes to the layouts and components of SharePoint sites. For major revisions like adding new top navigation bars, changing column layouts, or inserting custom components, master pages allow these new elements to be defined once then propagate everywhere.
For example, to add a new top navigation bar to all pages, the master page can be edited to insert additional HTML and ASP.NET markup, such as:
<!--SPM:Custom top nav-->
<div id="customNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Now, assuming all sites under https://contoso.sharepoint.com inherit from this changed master page, they will automatically gain this new top navigation bar on all pages. Other major structural changes like alternative column layouts, embedded web parts, or custom components can be added in a similar fashion.
In addition to layout, master pages also provide convenient central control points for setting key style elements like fonts, colors, and logos. By declaring new CSS rules or overriding defaults in the master page, the fonts and colors can be changed easily across all sites inheriting that master page. Adding a logo is as easy as inserting a new image web part on the master page, which then propagates sitewide.
Granted, fonts and colors can also be managed through alternate CSS files. However, specifying them directly in the master page allows for more consistency compared to using CSS overrides that could be added and removed over time. Master page declarations reduce ambiguity through explicit assignments of core style elements.
In summary, master pages are best suited for:
- Structural layout changes like new navigation bars, columns, and components
- Adding common components like logos and footers
- Explicitly setting key fonts, colors, and images for branding
By handling these major branding elements directly in the master page, site-wide consistency can be achieved while avoiding redundant work or contradicting CSS styling rules.
When to Use Alternate CSS Instead
Although master pages provide extensive branding control, their site-wide reach also limits surgical precision. For minor style adjustments to specific elements, alternate CSS overrides enable precise targeting without mass disruption.
For example, an organization might dictate all SharePoint sites now use Open Sans as the default body font. Changing the master page to enforce this would work, but requires updating a critical file that might have wide effects. Instead, an alternate CSS file can override the body font with better precision and less risk:
/* Custom font */
body {
font-family: 'Open Sans', sans-serif;
}
By leaving the master page alone and overriding only the needed font attribute, side effects are minimized. If the font needs adjustment later, changing this one CSS rule will cascade the update after the next page refresh.
Similar precision CSS overrides can refine color schemes, adjust padding/margins, hide elements, and customize many other styles without altering master pages. Common branding tasks suited for alternate CSS include:
- Changing fonts
- Overriding colors
- Hiding unwanted elements
- Tweaking padding and margins
- Applying background images
- Adding custom branding classes
Alternate CSS can be defined in global _layouts CSS files, added via embedded web part script editors, or loaded through other means. This flexibility complements master page consistency for areas needing explicit control.
However, CSS cannot fix all branding needs alone. Some structural and logic changes still require master page edits. For example, adding a new top navigation bar relies on markup changes rather than pure CSS styling. Understanding these limitations helps focus CSS overrides on suitable visual customizations.
In general, alternate CSS excels at incremental refinements when consistency is already established via master pages. CSS minimizes side effects compared to changing master pages directly. Surgical-level precision bands sites together through styling without jeopardizing structure.
Best Practices for Branding Consistency
When planning a SharePoint branding project, visually map out the customizations needed before deciding where to implement changes technologically. Think through what needs global consistency versus targeted tweaking.
In general, follow these high-level guidelines:
- Use master pages for structural changes and common elements
- Use alternate CSS for targeted styling adjustments
- Abstract all common attributes into variables for consistency
By styling master pages using centralized XML snippets and reusable embedded fonts/images, branding properties concentrate in consistent locations. Reserve CSS overrides for exceptions or temporary stylistic rules.
Streamline management by limiting the number of actively used master pages. Consistently name alternate CSS files and embed standard comment headers indicating purpose. Follow naming conventions like including “branding” in master page names and prefacing style sheet names with “custom”.
By distinguishing shared structural customizations from specialized styling rules, changes stay aligned with their intended scope. Focused master page and CSS efforts combine forces for efficient, reliable branding.
In Summary
SharePoint provides flexible options for tailored branding via master pages and CSS, but deciding when to use each requires understanding their strengths.
Master pages enable broad structural changes like new navigations, layouts, and common styling across all sites inheriting them. However, these far-reaching effects also limit surgical control.
Alternate CSS overrides specific styles without mass disruption, perfect for incremental tweaks. Yet CSS cannot modify key structural elements on its own.
The ideal branding approach utilizes both tools where appropriate:
- Use master pages to establish structural foundations and core styling
- Use alternate CSS to refine styles with precision
Combined intelligently, master pages and CSS provide powerfully consistent SharePoint branding customized at both macro and micro levels.
