Your Office 365 Website uses a default stylesheet named theme.css. When you change the color scheme of your website, the color changes are reflected within this file. You may customize the CSS in this file and apply it to your web site in several quick and easy steps.
With your web site in edit mode, click the Style Sheet button from the Design ribbon:
The Style Sheet dialog appears:
This first looked scary to me. I am not one of those blank CSS guys that just crank out styles from nowhere. And besides, which styles are being used? Have no fear - this is easier than it appears.
Click on the View default CSS link at the top of the dialog. Your browser will prompt whether to Open or Save the file:
If you want you can save off a copy but for my purposes I just clicked Open. If you are cool enough to have SharePoint Designer (SPD) installed, the theme.css file will open within SPD. Otherwise you may open it up using Notepad or any other design program you have (it is only text).
Note: Modifying specific text and background colors within a widget or header, as examples, overrides the styles defined in the theme.css regardless if default or custom CSS is being applied.
Catch more Office 365 tips and tricks in Steve's Office 365 Walkthough Guide.
Follow Steve on Twitter @stevethemanmann
If you found this useful, please help support my SharePoint and .NET user group (Philly SNUG) by clicking on the logo below.With your web site in edit mode, click the Style Sheet button from the Design ribbon:
The Style Sheet dialog appears:
This first looked scary to me. I am not one of those blank CSS guys that just crank out styles from nowhere. And besides, which styles are being used? Have no fear - this is easier than it appears.
Click on the View default CSS link at the top of the dialog. Your browser will prompt whether to Open or Save the file:
If you want you can save off a copy but for my purposes I just clicked Open. If you are cool enough to have SharePoint Designer (SPD) installed, the theme.css file will open within SPD. Otherwise you may open it up using Notepad or any other design program you have (it is only text).
You may make modifications here in the file, save a local copy, and then copy the contents to your clipboard.
Note: Modifying specific text and background colors within a widget or header, as examples, overrides the styles defined in the theme.css regardless if default or custom CSS is being applied.
Return to the Style Sheet dialog and check the Apply custom CSS checkbox. Paste the CSS contents into the box.
Click OK. Your web site is updated to use the customized CSS.
So overall you do need to spend time to figure out what styles you want to change and what you want to change them to (which may take longer than 30 seconds) but the overall process of updating the styles to custom CSS is a breeze. So far I am content with simply changing the Color scheme of the web site without having to dork around with the CSS since I am only changing colors anyway, but I will soon have my designer take a look and see what he thinks..stay tuned...
Catch more Office 365 tips and tricks in Steve's Office 365 Walkthough Guide.
Follow Steve on Twitter @stevethemanmann
No comments:
Post a Comment