Wednesday 19 June 2013

Composed Looks in SP2013 and the SPCOLOR file

The reason for this post is to explain some of the SPCOLOR attributes and their purpose - where they are used and what for.  A colleague and myself put this together (so thanks to Olly for the majority of this work) and I'm sure some people may be able to add more details to some of the explanations below.

While Composed Looks in SharePoint 2013 have opened up a whole new way to design SharePoint it comes with some serious limitations.  Heather Solomon's blog on "When to use a SharePoint 29013 Composed Look" is an excellent starter to understand some of these limitations and explains things much better than I could. 

Microsoft have also put out some pretty decent articles on Composed Looks (http://msdn.microsoft.com/en-us/library/jj927175(v=office.15).aspx is a good starting point) but the main article has one bit missing IMHO: there are no updates to the SPWeb Master Page properties (MasterUrl and CustomMasterUrl). 

So here is the file: please feel free to cut and paste into something more readable and use as a starting point for your own exploration.

<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <!--========================================================================
        Notes
    ============================================================================
    When setting colour codes, use HEX values. Opacity can be added on to these values. An example of this would be: E5FFFFFF.
    The first 2 ('E5'FFFFFF) characters of that code are the opacity, resulting in a transparent white.
    -->
    <!--========================================================================
        Text Colour Styles
    =========================================================================-->
    <s:color name="BodyText" value="444444" /> <!-- Normal body text. -->
    <s:color name="SubtleBodyText" value="777777" /> <!-- Body text that must be lighter than normal. An example is metadata text. -->
    <s:color name="StrongBodyText" value="262626" /> <!-- Body text color for text that must stand out from normal body text. -->
    <s:color name="DisabledText" value="B1B1B1" /> <!-- Disabled text. For example, unavailable items in menus. -->
    <s:color name="SiteTitle" value="262626" /> <!-- The text color of the page title. -->
    <s:color name="WebPartHeading" value="444444" /> <!-- Text color for Web Part headings. -->
    <s:color name="ErrorText" value="FF0000" /> <!-- The main error color that is used for error text, borders, and backgrounds, as needed. -->
    <s:color name="AccentText" value="f44c0a" /> <!-- Text color for accented body text. -->
    <s:color name="SearchURL" value="358700" /> <!-- Text color for the URL found in search results. Also used to highlight new items or successful status notifications. -->
    <!--========================================================================
        Hyper Link Styles
    =========================================================================-->
    <s:color name="Hyperlink" value="f44c0a" /> <!-- Text color for hyperlinks. -->                            
    <s:color name="Hyperlinkfollowed" value="4F6DBB" /> <!-- Text color for followed hyperlinks. -->
    <s:color name="HyperlinkActive" value="1789C1" /> <!-- Hyperlink color when pressed. -->
    <!--========================================================================
        Command Links
    =========================================================================-->
    <s:color name="CommandLinks" value="666666" /> <!-- Large command links that must be a bit lighter than body text because of their size. -->
    <s:color name="CommandLinksSecondary" value="262626" /> <!-- Command link color for links that are smaller, and therefore have a stronger color to stand out. -->
    <s:color name="CommandLinksHover" value="f44c0a" /> <!-- Command link color on hover and color of "Add an App" and "New subsite" icons -->
    <s:color name="CommandLinksPressed" value="1789C1" /> <!-- Command link color when pressed. -->
    <s:color name="CommandLinksDisabled" value="B1B1B1" /> <!-- Command link color when command link is disabled. -->
    <!--========================================================================
        Background Styles
    =========================================================================-->
    <s:color name="BackgroundOverlay" value="E5FFFFFF" /> <!-- The main background color that is visible between the optional background image and the page content. -->
    <s:color name="DisabledBackground" value="FDFDFD" /> <!-- Background for disabled elements such as browser controls, for example, input box or select box (except buttons). -->
    <s:color name="PageBackground" value="FFFFFF" /> <!-- The background color of the page. Appears behind the optional background image. -->
    <s:color name="HeaderBackground" value="D9F8F8F8" /> <!-- The background color for the header area of the page. -->
    <s:color name="FooterBackground" value="CBEFEFEF" /> <!-- The background color for the footer area of the page. -->
    <s:color name="SelectionBackground" value="7F95D3F1" /> <!-- The background color for selected list items and drop-down menu items. -->
    <s:color name="HoverBackground" value="65CDE9F7" /> <!-- The background color for list items and drop-down menu items on hover. -->
   
    <!--========================================================================
        Border Styles
    =========================================================================-->  
    <s:color name="RowAccent" value="f44c0a" /> <!-- The accented left border on selected list items. -->
    <s:color name="StrongLines" value="78C8EE" /> <!-- Borders for browser controls on hover. -->
    <s:color name="Lines" value="ABABAB" /> <!-- Borders for browser controls. -->
    <s:color name="SubtleLines" value="E5E5E5" /> <!-- Subtle border color. For example, gridlines for inline editing. -->
    <s:color name="DisabledLines" value="E1E1E1" /> <!-- Border color for disabled browser controls such as input boxes and select boxes. -->
    <s:color name="AccentLines" value="3BAFE7" /> <!-- Focused border color for selected browser controls. -->
    <s:color name="DialogBorder" value="E5E5E5" /> <!-- Dialog box border color. -->
   
    <!--========================================================================
        Navigation Styles
    =========================================================================-->
    <s:color name="Navigation" value="666666" /> <!-- Text color for horizontal and vertical navigation items. -->
    <s:color name="NavigationAccent" value="f44c0a" /> <!-- Text color for a selected horizontal navigation item. -->
    <s:color name="NavigationHover" value="f44c0a" /> <!-- Navigation text color on hover. Applies to top navigation, and to Quick Launch in horizontal mode. -->
    <s:color name="NavigationPressed" value="1789C1" /> <!-- Text color of navigation item when pressed. Applies to top navigation, and to Quick Launch in horizontal mode. -->
    <s:color name="NavigationHoverBackground" value="65CDE9F7" /> <!-- Background color of Quick Launch items in vertical mode on hover over the navigation item. -->
    <s:color name="NavigationSelectedBackground" value="C6EFEFEF" /> <!-- Background color of Quick Launch items in vertical mode after the navigation item is selected. -->
    <!--========================================================================
        Emphasis Styles
    =========================================================================-->   
    <s:color name="EmphasisText" value="FFFFFF" /> <!-- The text color that appears on top of emphasis background. -->
    <s:color name="EmphasisBackground" value="f44c0a" /> <!-- The accented background color that appears directly behind emphasis text and the "Site Content" icons -->
    <s:color name="EmphasisHoverBackground" value="1789C1" /> <!-- Background color on hover, for elements that are using emphasis background. -->
    <s:color name="EmphasisBorder" value="1789C1" /> <!-- Border color for elements that are using emphasis background. -->
    <s:color name="EmphasisHoverBorder" value="1375A5" /> <!-- Border color on hover for elements that are using emphasis background. -->

    <!--========================================================================
        Hyper Link Styles
    =========================================================================-->  
    <s:color name="SubtleEmphasisText" value="666666" /> <!-- Text that appears on top of subtle emphasis background. -->
    <s:color name="SubtleEmphasisCommandLinks" value="262626" /> <!-- Command link color for links that appear on top of subtle emphasis background. -->
    <s:color name="SubtleEmphasisBackground" value="C6EFEFEF" /> <!-- Background that appears directly behind subtle emphasis text. -->
   
    <!--========================================================================
        Top Bar Styles
    =========================================================================-->    
    <s:color name="TopBarText" value="333333" /> <!-- Text and glyph color for the welcome menu, quick access toolbar icons, and closed ribbon tabs. -->
    <s:color name="TopBarBackground" value="CBEFEFEF" /> <!-- The background color for the top bar, which is seen below and to the right of the suite navigation. -->
    <s:color name="TopBarHoverText" value="333333" /> <!-- Text and glyph color on hover for the welcome menu, quick access toolbar icons, and closed ribbon tabs. -->
    <s:color name="TopBarPressedText" value="333333" /> <!-- Text and glyph color for when the welcome menu, quick access toolbar icons, or closed ribbon tabs are pressed. -->
    <!--========================================================================
        Header Styles
    =========================================================================-->    
    <s:color name="HeaderText" value="444444" /> <!-- The base text color for anything in the header area. -->
    <s:color name="HeaderSubtleText" value="777777" /> <!-- Helper text for the search box when in the header area. -->
    <s:color name="HeaderDisableText" value="B1B1B1" /> <!-- Text for the search box, if the search box is disabled when in the header area. -->
    <s:color name="HeaderNavigationText" value="666666" /> <!-- Base text color for navigation links in the header area. -->
    <s:color name="HeaderNavigationHoverText" value="f44c0a" /> <!-- Text color for navigation links in the header area when you hover over the link. -->
    <s:color name="HeaderNavigationPressedText" value="1789C1" /> <!-- Text color for navigation links in the header area when you press the link. -->
    <s:color name="HeaderNavigationSelectedText" value="f44c0a" /> <!-- Text color for navigation links in the header area after the link is selected. -->
    <s:color name="HeaderLines" value="ABABAB" /> <!-- Search box lines when the search box is in the header area. -->
    <s:color name="HeaderStrongLines" value="78C8EE" /> <!-- Search box lines on hover when the search box is in the header area. -->
    <s:color name="HeaderAccentLines" value="3BAFE7" /> <!-- Search box lines on focus when the search box is in the header area. -->
    <s:color name="HeaderSubtleLines" value="C6C6C6" /> <!-- Subtle lines found inside the header area. Not used in default CSS. -->
    <s:color name="HeaderDisabledLines" value="E1E1E1" /> <!-- Search box lines if the search box is disabled when it's in the header area. -->
    <s:color name="HeaderDisabledBackground" value="FDFDFD" /> <!-- Search box background if the search box is disabled when it's in the header area. -->
    <s:color name="HeaderFlyoutBorder" value="D1D1D1" /> <!-- Border for drop-down menus when originating from the header area. -->
    <s:color name="HeaderSiteTitle" value="262626" /> <!-- Text color for the site title when in the header area. -->

     <!--========================================================================
        Suite Styles
    =========================================================================-->    
    <s:color name="SuiteBarBackground" value="f44c0a" /> <!-- Background color for the suite navigation. -->
    <s:color name="SuiteBarHoverBackground" value="63BFEC" /> <!-- Background color on hover for the suite navigation. -->
    <s:color name="SuiteBarText" value="FFFFFF" /> <!-- Text and glyph color for the suite navigation items. -->
    <s:color name="SuiteBarDisabledText" value="D3D3D3" /> <!-- Text and glyph color for disabled suite items. Not used in default CSS. -->
 
    <!--========================================================================
        Button Styles
    =========================================================================-->     
    <s:color name="ButtonText" value="444444" /> <!-- Text color for buttons. -->
    <s:color name="ButtonDisabledText" value="B1B1B1" /> <!-- Text color for disabled buttons. -->
    <s:color name="ButtonBackground" value="FDFDFD" /> <!-- Background color for buttons. -->
    <s:color name="ButtonHoverBackground" value="D9EFFA" /> <!-- Background color for buttons on hover. -->
    <s:color name="ButtonPressedBackground" value="9ED7F2" /> <!-- Background color for buttons while pressed. -->
    <s:color name="ButtonDisabledBackground" value="FDFDFD" /> <!-- Background color for disabled buttons. -->
    <s:color name="ButtonBorder" value="ABABAB" /> <!-- Border color for buttons. -->
    <s:color name="ButtonHoverBorder" value="9ED7F2" /> <!-- Border color for buttons on hover. -->
    <s:color name="ButtonPressedBorder" value="63BFEC" /> <!-- Border color for buttons while pressed. -->
    <s:color name="ButtonDisabledBorder" value="E1E1E1" /> <!-- Border color for buttons that are disabled. -->
    <s:color name="ButtonGlyph" value="666666" /> <!-- Glyph color for a glyph that appears in a button. -->
    <s:color name="ButtonGlyphActive" value="444444" /> <!-- Glyph color on hover, for a glyph that appears in a button. -->
    <s:color name="ButtonGlyphDisabled" value="B1B1B1" /> <!-- Glyph color for a disabled button. -->
    <!--========================================================================
        Title Styles
    =========================================================================-->     
    <s:color name="TileText" value="FFFFFF" /> <!-- The text that appears on top of the tile background overlay. -->
    <s:color name="TileBackgroundOverlay" value="99000000" /> <!-- The background overlay color for tiles. -->
    <!--========================================================================
        Rich Text Editor Accents
    =========================================================================--> 
    <s:color name="ContentAccent1" value="f44c0a" /> <!-- The first accent color that a user can select from the Rich Text Editor color picker. -->
    <s:color name="ContentAccent2" value="FF0097" /> <!-- The second accent color that a user can select from the Rich Text Editor color picker. -->
    <s:color name="ContentAccent3" value="996600" /> <!-- The third accent color that a user can select from the Rich Text Editor color picker. -->
    <s:color name="ContentAccent4" value="F09609" /> <!-- The fourth accent color that a user can select from the Rich Text Editor color picker. -->
    <s:color name="ContentAccent5" value="A200FF" /> <!-- The fifth accent color that a user can select from the Rich Text Editor color picker. -->
    <s:color name="ContentAccent6" value="00ABA9" /> <!-- The sixth accent color that a user can select from the Rich Text Editor color picker. -->
</s:colorPalette>

4 comments:

  1. Awesome, thanks for sharing!

    ReplyDelete
  2. i got more ideas about responsive design. i am also doing and creating evergreen responsive which is take more quality your things are made some idea. keep share more about technical article.
    School Logo Design UK

    ReplyDelete
  3. thanks for shared wonderful information of giving best information.its more useful and more helpful. great doing keep sharing
    best GMAT coaching classes in chennai

    ReplyDelete
  4. Composed Looks in SharePoint 2013 elevate branding versatility. Needed Minimum Space These pre-designed combinations of colors, fonts, and backgrounds provide a consistent and appealing visual identity.

    ReplyDelete