Global Vs Page-Specific Techniques For Customizing Sharepoint Css
The Problem With SharePoint’s Default Look
SharePoint’s out-of-the-box user interface can feel generic and dated to many users. The default styling uses a lot of grays and blues that don’t necessarily match most companies’ branding. There is often a desire for custom branding through cascading style sheets (CSS) to match internal site aesthetics with a company’s logo, color palette, fonts, and more.
Generic and Outdated Aesthetics
By default, SharePoint uses a slate gray color scheme accented with blues for its suite bar, title bars, and links. The default system fonts lack personality. While accessible and usable, the overall look tends to feel very generic and basic, especially to users accustomed to modern web design trends favoring vibrant colors and custom font combinations.
Mismatched Branding
For companies that have invested in branding guides, logo use standards, custom color palettes, and designated fonts as part of their corporate identity, SharePoint’s default styling can feel visually disjointed. The blues and grays don’t necessarily reflect most color palettes. And system fonts like Segoe and Verdana definitely don’t match custom font stacks companies may employ in their other touchpoints like websites and publications.
Global vs Page-Specific CSS Techniques
When customizing SharePoint with CSS, there are two main implementation techniques: global CSS applied universally through master pages, and page-specific CSS targeting individual pages or page elements. Each approach has its own pros and cons.
Applying CSS Globally
Global CSS techniques modify the main master pages used in a SharePoint site. By adding CSS files, links, and embedded styles to the master page, the CSS will cascade down and apply to all pages that use that master page. This enables broad, universal styling changes.
Adding Custom CSS Files to Master Pages
One common global technique is to upload a custom CSS file, like theme.css, to the Master Page Gallery or Site Assets Library. You can then reference this file in the of the master page. For example:
<head> ... <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
Any styles defined in theme.css will now apply site-wide on pages using the master page. To apply the same styling across all sites, the CSS file can also be referenced in alternate CSS URL field in SharePoint Designer’s Master Page settings.
Example Global CSS Code
As an example, the following global CSS code could be added to theme.css to customize the primary site fonts and colors:
body {
font-family: 'Roboto', sans-serif;
color: #414141;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
color: #0079bf;
}
a {
color: #0079bf;
}
a:hover {
color: #414141;
}
This would change the body text to the Roboto Google Font in a dark gray, while applying the Montserrat Google Font in a blue shade to all headings site-wide. Hyperlink colors would also be updated.
Using Page-Specific CSS
Page-specific CSS techniques apply styling directly to individual pages and page elements rather than site-wide. This lets you target specific pages and web parts for more precise custom styling.
Adding CSS in Web Part Properties
Many SharePoint web parts allow entering custom CSS markup through their properties pane in Edit Mode. For example, applying the following CSS code in a Content Editor web part would style just that web part instance green:
<style type="text/css">
body {
background-color: #9DDD91;
font-family: 'Arial';
}
</style>
This enables selectively modifying a particular web part without affecting global styling.
Example Page-Specific CSS
As another example, using the Script Editor web part, CSS could be embedded to style an individual page specifically:
<style type="text/css">
#pageTitle {
font-size: 32px;
font-weight: bold;
color: #286692;
}
.welcomeMessage {
font-style: italic;
padding: 12px;
background: #F1F1F1;
}
</style>
This page-specific CSS targets elements with IDs and classes rather than apply changes universally. This allows tailoring styling to individual pages as needed outside the global CSS.
Pros and Cons vs Global Techniques
The main downside to page-specific CSS is the lack of reusability. Styles aren’t shared across other pages leading to redundant CSS. There are also limits in selectively overriding certain global styles.
However, the techniques provide precision control for special pages. Embedded Script Editors also keep the CSS nicely bundled with the target page rather than relying on outside CSS files. Overall page-specific CSS works best for small one-off style customizations.
Common CSS Selectors for Branding SharePoint
When applying custom branding CSS in SharePoint, there are a variety of page elements that can be targeted and styled to match company aesthetics. These include major site sections as well as specific content such as headers, text, tables, and calendars.
Targeting Major Page Elements
Some areas commonly styled to control overall site branding include:
- Suite Bar Navigation
- Quick Launch Navigation
- Page Content Sections
Customizing the Suite Bar
Thesuite bar contains the main site navigation and runs across the top of SharePoint pages. Its background color and link colors can be customized site-wide for unified branding:
#suiteBar {
background-color: #BD1D2C !important;
}
#suiteBar a {
color: white !important;
}
#suiteBar a:hover {
background-color: #FFFFFF;
color: #BD1D2C !important;
}
Styling the Quick Launch Menu
Similar styling can be applied to the quick launch navigation section running down the left side of most pages:
#sideNavBox {
background-color: #414141;
}
.ms-core-navigation a {
color: #FFFFFF !important;
}
.ms-core-navigation a:hover{
background-color: #00A1F1;
}
Examples for Main Content Areas
Main body content sections can also be targeted for uniform branding across all pages:
#contentBox {
background-color: #F2F2F2;
}
#pageTitle {
color: #1F497D;
padding: .5em;
}
Changing Specific Content Types
Beyond those major page sections, more precise CSS can brand specific content types like:
- Headings
- Body Text
- Tables
- Calendars
Headers, Text, Tables, Calendars
For example, custom headers, text, tables, and calendars can be styled:
h1, h2, h3 {
font-family: 'Open Sans';
}
p {
line-height: 1.4em;
}
table {
background: #FEFFDB;
border: 1px solid #D4D4D4;
}
.ms-acal-title {
background-color: #1F497D;
color: #FEFFDB;
}
.ms-acal-day {
border: 1px solid #D4D4D4;
}
These selectors will cascade down and brand those specific elements site-wide with custom styling.
Debugging and Important Considerations
When implementing custom SharePoint CSS, there are challenges around debugging, browser variances, and managing changes over time. Being aware of these considerations upfront enables addressing any issues down the road.
Browser Testing
Browser testing custom CSS is crucial before rolling out to end users. Rendering issues and inconsistencies often arise between Chrome, Firefox, Safari, IE, and Edge. It’s also necessary to test responsiveness on mobile browsers.
Issues Caused by Page Caching
Browser caching can also plague testing new CSS and surface false bugs. Hard refreshes after CSS changes are important. Disabled caching in Developer Tools helps circumvent issues of old styles sticking around.
Debugging Spacing and Alignment
Custom layouts also demand close inspection for quirks in spacing or alignment. Sections flowing onto extra pages due to new margins or padding can easily sneak through. Debugging cross-browser compatibility maximizes quality.
Managing Changes Over Time
Over a long enough timeline – upgrades, migrated servers or redesigns – even carefully customized SharePoint CSS can begin to display unintended side effects. Planning for this evolution is key.
Global Customizations Causing Issues
Future software upgrades can sometimes unexpectedly override custom CSS when applied globally. Entire custom designs can break. Reverting back to SharePoint defaults can also wipe out branding efforts if CSS files, code snippets or links are deleted.
Process For Iterating on Designs
Creating removable CSS overrides through reserved CSS classes minimizes risk: E.g. use .customTitle {} instead of simply #title {}. Commented code and detailed notes also help inheritance. With ongoing maintenance and communication between IT and business teams, branded custom CSS can remain resilient over time.
Key Takeaways and Benefits
Customizing SharePoint’s default aesthetic using CSS enables matching branded company and site designs for a more seamless user experience. Both global and page-specific techniques provide useful control points.
Global CSS Scales, Page-Specific Targets Details
Applying CSS through master pages broadly propagates sitewide style changes for uniformity, while embedded page CSS tweaks one-off sections. Mixing both approaches helps balance widespread branding with as-needed flexibility.
Custom CSS Lets You Match Company Branding
Tailoring color schemes, typography, layouts and more to existing marketing guidelines through custom CSS rules bridges visual gaps in SharePoint’s out-the-box UI.
Examples Enable Quick Progress and Iteration
Whether using master pages or individual script editors, real code samples (like those outlined above) make good starting points for rapid prototypes. They jumpstart builds to iteratively fine tune until styling reflects brand standards.
