V Slots
A SO-DIMM, SODIMM, or small outline dual in-line memory module, is a type of computer memory built using integrated circuits.SO-DIMMs are a smaller alternative to a DIMM, being roughly half the size of regular DIMMs. Our V-Slot is made with 6061 T-5 Aluminium Extrusion and has a Shiny, Super Smooth, Black Anodised Finished. From $2.64 – $2.91 a piece. $ 29.10 – $ 2,640.00.
-->Use this reference to define the color palette or font scheme that is used in a SharePoint site.
Color palettes
A color palette is the combination of colors that are used in a SharePoint site. The color palette for a SharePoint site is defined in a color palette file. Color slots are also used by the master page preview file to generate thumbnail and preview images of a site. The following describes the structure of the color palette file and the master page preview file:
Color palette file (.spcolor)
Color palette files are used in the Change the look wizard, which enables users to change the look and feel of their site by using the SharePoint themes user interface. By default, 32 color palette files are installed with SharePoint. You can also create additional color palette files. The following example shows the format of a color palette file.
In a color palette file, the following placeholders are replaced:
InvertedSetting is a Boolean value. true if the color palette is generally light text on a dark background. false if the color palette is generally dark text on a light background.
Slot1 is the annotation name of the color slot to use as the first block of the palette icon in the color palette picker of the theming experience.
Slot2 is the annotation name of the color slot to use as the second block of the palette icon in the color palette picker of the theming experience.
Slot3 is the annotation name of the color slot to use as the third block of the palette icon in the color palette picker of the theming experience.
ColorSlot is the annotation name of the color slot that you are defining (for example, SiteTitle).
Color is the hexadecimal value of the color to use for the specified color slot. This may be in 6 digits (RRGGBB) or 8 digits (AARRGGBB). If the hexadecimal value is 8 digits, the first two digits represent the opacity level (00-FF, which maps to 0-255). If the hexadecimal value is 6 digits, the default opacity is 100% or FF.
The color palette files are located in the Theme Gallery of the root site, in the site collection in the 15 folder (http:// SiteCollectionName/_catalogs/theme/15/). To access the Theme Gallery from the SharePoint user interface, on the Site Settings page, under Web Designer Galleries, select Themes, and then select 15.
Master page preview file (.preview)
Master page preview files are used to generate thumbnail images and preview images when you use the Change the look wizard. A master page must have a corresponding preview file to be used in the Change the look wizard. A preview file is a specially formatted file that has sections for the default color palette, default font scheme, tokenized CSS, and tokenized HTML. It uses string tokens to get the value of color slots, font names, and localized UI strings. The following example shows color slots being used in the master page preview file.
For more information, see How to: Create a master page preview file in SharePoint
Tip:You can use the SharePoint color palette tool to help you create SharePoint designs. You can download the SharePoint color palette tool from the Microsoft Download Center.
Color slot mapping
Table 1 describes the color slots that are available and where color slots are used in a SharePoint site.
Note
When discussing navigation items,pressed applies to when a user clicks or touches a navigation item.Selected applies to when a user is navigated to the page.> The following summarizes a normal flow of actions and the color slot that applies to the navigation item link at each step:> The base text of a navigation item link: HeaderNavigationText> A user hovers the cursor over the navigation item link: HeaderNavigationHoverText> A user clicks, touches, or chooses the navigation item link: HeaderNavigationPressedText> The user is navigated to the chosen page. The color slot that applies to the navigation item for the page the user is now on: HeaderNavigationSelectedText
New Winning Slot Machines Videos
Table 1. Color slots
Annotation Name | Where the Color Is Used in the UI | Token Name |
---|---|---|
BodyText | Normal body text. | [T_THEME_COLOR_BODYTEXT] |
SubtleBodyText | Body text that must be lighter than normal. An example is metadata text. | [T_THEME_COLOR_SUBTLEBODYTEXT] |
StrongBodyText | Body text color for text that must stand out from normal body text. | [T_THEME_COLOR_STRONGBODYTEXT] |
DisabledText | Disabled text. For example, unavailable items in menus. | [T_THEME_COLOR_DISABLEDTEXT] |
SiteTitle | The text color of the page title. | [T_THEME_COLOR_SITETITLE] |
WebPartHeading | Text color for web part headings. | [T_THEME_COLOR_WEBPARTHEADING] |
ErrorText | The main error color that is used for error text, borders, and backgrounds, as needed. | [T_THEME_COLOR_ERRORTEXT] |
AccentText | Text color for accented body text. | [T_THEME_COLOR_ACCENTTEXT] |
SearchURL | Text color for the URL found in search results. Also used to highlight new items or successful status notifications. | [T_THEME_COLOR_SEARCHURL] |
Hyperlink | Text color for hyperlinks. | [T_THEME_COLOR_HYPERLINK] |
HyperlinkFollowed | Text color for followed hyperlinks. | [T_THEME_COLOR_HYPERLINKFOLLOWED] |
HyperlinkActive | Hyperlink color when pressed. | [T_THEME_COLOR_HYPERLINKACTIVE] |
CommandLinks | Large command links that must be a bit lighter than body text because of their size. | [T_THEME_COLOR_COMMANDLINKS] |
CommandLinksSecondary | Command link color for links that are smaller, and therefore have a stronger color to stand out. | [T_THEME_COLOR_COMMANDLINKSSECONDARY] |
CommandLinksHover | Command link color on hover. | [T_THEME_COLOR_COMMANDLINKSHOVER] |
CommandLinksPressed | Command link color when pressed. | [T_THEME_COLOR_COMMANDLINKSPRESSED] |
CommandLinksDisabled | Command link color when command link is disabled. | [T_THEME_COLOR_COMMANDLINKSDISABLED] |
BackgroundOverlay | The main background color that is visible between the optional background image and the page content. | [T_THEME_COLOR_BACKGROUNDOVERLAY] |
DisabledBackground | Background for disabled elements such as browser controls, for example, input box or select box (except buttons). | [T_THEME_COLOR_DISABLEDBACKGROUND] |
PageBackground | The background color of the page. Appears behind the optional background image. | [T_THEME_COLOR_PAGEBACKGROUND] |
HeaderBackground | The background color for the header area of the page. | [T_THEME_COLOR_HEADERBACKGROUND] |
FooterBackground | The background color for the footer area of the page. | [T_THEME_COLOR_FOOTERBACKGROUND] |
SelectionBackground | The background color for selected list items and drop-down menu items. | [T_THEME_COLOR_SELECTIONBACKGROUND] |
HoverBackground | The background color for list items and drop-down menu items on hover. | [T_THEME_COLOR_HOVERBACKGROUND] |
RowAccent | The accented left border on selected list items. | [T_THEME_COLOR_ROWACCENT] |
StrongLines | Borders for browser controls on hover. | [T_THEME_COLOR_STRONGLINES] |
Lines | Borders for browser controls. | [T_THEME_COLOR_LINES] |
SubtleLines | Subtle border color. For example, gridlines for inline editing. | [T_THEME_COLOR_SUBTLELINES] |
DisabledLines | Border color for disabled browser controls such as input boxes and select boxes. | [T_THEME_COLOR_DISABLEDLINES] |
AccentLines | Focused border color for selected browser controls. | [T_THEME_COLOR_ACCENTLINES] |
DialogBorder | Dialog box border color. | [T_THEME_COLOR_DIALOGBORDER] |
Navigation | Text color for horizontal and vertical navigation items. | [T_THEME_COLOR_NAVIGATION] |
NavigationAccent | Text color for a selected horizontal navigation item. | [T_THEME_COLOR_NAVIGATIONACCENT] |
NavigationHover | Navigation text color on hover. Applies to top navigation, and to Quick Launch in horizontal mode. | [T_THEME_COLOR_NAVIGATIONHOVER] |
NavigationPressed | Text color of navigation item when pressed. Applies to top navigation, and to Quick Launch in horizontal mode. | [T_THEME_COLOR_NAVIGATIONPRESSED] |
NavigationHoverBackground | Background color of Quick Launch items in vertical mode on hover over the navigation item. | [T_THEME_COLOR_NAVIGATIONHOVERBACKGROUND] |
NavigationSelectedBackground | Background color of Quick Launch items in vertical mode after the navigation item is selected. | [T_THEME_COLOR_NAVIGATIONSELECTEDBACKGROUND] |
EmphasisText | The text color that appears on top of emphasis background. | [T_THEME_COLOR_EMPHASISTEXT] |
EmphasisBackground | The accented background color that appears directly behind emphasis text. | [T_THEME_COLOR_EMPHASISBACKGROUND] |
EmphasisHoverBackground | Background color on hover, for elements that are using emphasis background. | [T_THEME_COLOR_EMPHASISHOVERBACKGROUND] |
EmphasisBorder | Border color for elements that are using emphasis background. | [T_THEME_COLOR_EMPHASISBORDER] |
EmphasisHoverBorder | Border color on hover for elements that are using emphasis background. | [T_THEME_COLOR_EMPHASISHOVERBORDER] |
SubtleEmphasisText | Text that appears on top of subtle emphasis background. | [T_THEME_COLOR_SUBTLEEMPHASISTEXT] |
SubtleEmphasisCommandLinks | Command link color for links that appear on top of subtle emphasis background. | [T_THEME_COLOR_SUBTLEEMPHASISCOMMANDLINKS] |
SubtleEmphasisBackground | Background that appears directly behind subtle emphasis text. | [T_THEME_COLOR_SUBTLEEMPHASISBACKGROUND] |
TopBarText | Text and glyph color for the welcome menu, quick access toolbar icons, and closed ribbon tabs. | [T_THEME_COLOR_TOPBARTEXT] |
TopBarBackground | The background color for the top bar, which is seen below and to the right of the suite navigation. | [T_THEME_COLOR_TOPBARBACKGROUND] |
TopBarHoverText | Text and glyph color on hover for the welcome menu, quick access toolbar icons, and closed ribbon tabs. | [T_THEME_COLOR_TOPBARHOVERTEXT] |
TopBarPressedText | Text and glyph color for when the welcome menu, quick access toolbar icons, or closed ribbon tabs are pressed. | [T_THEME_COLOR_TOPBARPRESSEDTEXT] |
HeaderText | The base text color for anything in the header area. | [T_THEME_COLOR_HEADERTEXT] |
HeaderSubtleText | Helper text for the search box when in the header area. | [T_THEME_COLOR_HEADERSUBTLETEXT] |
HeaderDisableText | Text for the search box, if the search box is disabled when in the header area. | [T_THEME_COLOR_HEADERDISABLETEXT] |
HeaderNavigationText | Base text color for navigation links in the header area. | [T_THEME_COLOR_HEADERNAVIGATIONTEXT] |
HeaderNavigationHoverText | Text color for navigation links in the header area when you hover over the link. | [T_THEME_COLOR_HEADERNAVIGATIONHOVERTEXT] |
HeaderNavigationPressedText | Text color for navigation links in the header area when you press the link. | [T_THEME_COLOR_HEADERNAVIGATIONPRESSEDTEXT] |
HeaderNavigationSelectedText | Text color for navigation links in the header area after the link is selected. | [T_THEME_COLOR_HEADERNAVIGATIONSELECTEDTEXT] |
HeaderLines | Search box lines when the search box is in the header area. | [T_THEME_COLOR_HEADERLINES] |
HeaderStrongLines | Search box lines on hover when the search box is in the header area. | [T_THEME_COLOR_HEADERSTRONGLINES] |
HeaderAccentLines | Search box lines on focus when the search box is in the header area. | [T_THEME_COLOR_HEADERACCENTLINES] |
HeaderSublteLines | Subtle lines found inside the header area. Not used in default CSS. | [T_THEME_COLOR_HEADERSUBTLELINES] |
HeaderDisabledLines | Search box lines if the search box is disabled when it's in the header area. | [T_THEME_COLOR_HEADERDISABLEDLINES] |
HeaderDisabledBackground | Search box background if the search box is disabled when it's in the header area. | [T_THEME_COLOR_HEADERDISABLEDBACKGROUND] |
HeaderFlyoutBorder | Border for drop-down menus when originating from the header area. | [T_THEME_COLOR_HEADERFLYOUTBORDER] |
HeaderSiteTitle | Text color for the site title when in the header area. | [T_THEME_COLOR_HEADERSITETITLE] |
SuiteBarBackground | Background color for the suite navigation. | [T_THEME_COLOR_SUITEBARBACKGROUND] |
SuiteBarHoverBackground | Background color on hover for the suite navigation. | [T_THEME_COLOR_SUITEBARHOVERBACKGROUND] |
SuiteBarText | Text and glyph color for the suite navigation items. | [T_THEME_COLOR_SUITEBARTEXT] |
SuiteBarDisabledText | Text and glyph color for disabled suite items. Not used in default CSS. | [T_THEME_COLOR_SUITEBARDISABLEDTEXT] |
ButtonText | Text color for buttons. | [T_THEME_COLOR_BUTTONTEXT] |
ButtonDisabledText | Text color for disabled buttons. | [T_THEME_COLOR_BUTTONDISABLEDTEXT] |
ButtonBackground | Background color for buttons. | [T_THEME_COLOR_BUTTONBACKGROUND] |
ButtonHoverBackground | Background color for buttons on hover. | [T_THEME_COLOR_BUTTONHOVERBACKGROUND] |
ButtonPressedBackground | Background color for buttons while pressed. | [T_THEME_COLOR_BUTTONPRESSEDBACKGROUND] |
ButtonDisabledBackground | Background color for disabled buttons. | [T_THEME_COLOR_BUTTONDISABLEDBACKGROUND] |
ButtonBorder | Border color for buttons. | [T_THEME_COLOR_BUTTONBORDER] |
ButtonHoverBorder | Border color for buttons on hover. | [T_THEME_COLOR_BUTTONHOVERBORDER] |
ButtonPressedBorder | Border color for buttons while pressed. | [T_THEME_COLOR_BUTTONPRESSEDBORDER] |
ButtonDisabledBorder | Border color for buttons that are disabled. | [T_THEME_COLOR_BUTTONDISABLEDBORDER] |
ButtonGlyph | Glyph color for a glyph that appears in a button. | [T_THEME_COLOR_BUTTONGLYPH] |
ButtonGlyphActive | Glyph color on hover, for a glyph that appears in a button. | [T_THEME_COLOR_BUTTONGLYPHACTIVE] |
ButtonGlyphDisabled | Glyph color for a disabled button. | [T_THEME_COLOR_BUTTONGLYPHDISABLED] |
TileText | The text that appears on top of the tile background overlay. | [T_THEME_COLOR_TILETEXT] |
TileBackgroundOverlay | The background overlay color for tiles. | [T_THEME_COLOR_TILEBACKGROUNDOVERLAY] |
ContentAccent1 | The first accent color that a user can select from the Rich Text Editor color picker. | [T_THEME_COLOR_CONTENTACCENT1] |
ContentAccent2 | The second accent color that a user can select from the Rich Text Editor color picker. | [T_THEME_COLOR_CONTENTACCENT2] |
ContentAccent3 | The third accent color that a user can select from the Rich Text Editor color picker. | [T_THEME_COLOR_CONTENTACCENT3] |
ContentAccent4 | The fourth accent color that a user can select from the Rich Text Editor color picker. | [T_THEME_COLOR_CONTENTACCENT4] |
ContentAccent5 | The fifth accent color that a user can select from the Rich Text Editor color picker. | [T_THEME_COLOR_CONTENTACCENT5] |
ContentAccent6 | The sixth accent color that a user can select from the Rich Text Editor color picker. | [T_THEME_COLOR_CONTENTACCENT6] |
Font schemes
Fonts are defined in the font scheme (.spfont file) and the master page preview (.preview file) for a given SharePoint site. The font scheme defines the fonts that are used in four areas: title, navigation, heading, and body. Seven font schemes are included in SharePoint. You can create additional font schemes. The font scheme files are located in the 15 subfolder of the Theme Gallery of the root site of the site collection (http:// SiteCollectionName/_catalogs/theme/15/). To access the Theme Gallery from the SharePoint user interface, on the Site Settings page, under Web Designer Galleries, select Themes, and then select 15.
The following example describes the format for an .spfont file.
In an .spfont file, the following placeholders are replaced:
FontSchemeName is the name of the font scheme.
Slot1 is the name of the font slot that you want to use as the first block of the font icon in the font scheme picker in the Change the look wizard.
Slot2 is the name of the font slot that you want to use as the second block of the font icon in the font scheme picker in the Change the look wizard.
FontSlotName is the name of the font slot that you are defining (for example, title).
LatinScriptFont is the font to use for Latin scripts. This font is also the fallback font. That is, this is the font that is used for a language that does not have a script that is explicitly set in the font scheme.
Note
You must provide additional information to use web fonts in your font scheme. For more information, see the Web fonts section in this article.
EAScriptFont is the font to use for East Asia scripts. The <s:ea> element is not currently used by SharePoint. But, the <s:ea> element is still required in the font scheme.
CSFont is the font to use for complex scripts. The <s:cs> element is not currently used by SharePoint. But, the <s:cs> element is still required in the font scheme.
Language is the language script.
ScriptFont is the font to use for the specified language script.
The following example shows a portion of an .spfont file.
SharePoint includes support for web fonts. You must provide additional information to use web fonts in your font scheme. For more information, see the Web fonts section in this article.
Web-safe fonts
Web-safe fonts are a set of fonts that are widely used and available on most devices by default. To specify a web-safe font in the font scheme, include the name of the font in the typeface attribute of the font slot. The following example shows a web-safe font used in a font scheme.
Web fonts
Web fonts are fonts that are available on the Internet. When a user views a site that uses web fonts, the web browser downloads the necessary font files along with the rest of the page. To specify a web font, you must provide the URL to your web font files in four font formats (for support across browsers), and a small and large thumbnail image to use to render the font names in the font scheme picker.
The following example describes the information that is required to use a web font in an <s:latin> element.
In this example of using a web font, the following placeholders would be replaced:
FontName is the name of the web font.
EotFile is the relative URL to the Embedded Open Type font file.
WoffFile is the relative URL to the Web Open Font Format font file.
TtfFile is the relative URL to the TrueType font file.
SvgFile is the relative URL to the Scalable Vector Graphics font file.
LargeImgFile is the relative URL to the large thumbnail image that you want to use in the font scheme picker.
SmallImgFile is the relative URL to the small thumbnail image that you want to use in the font scheme picker.
V Slots
Note
The paths to the files have to be the full URL (i.e. https://tenant.sharepoint.com/sites/sitename/_catalogs/theme/15/fontfile.wof)The LargeImgFile and SmallImgFile attributes have to be present in the Latin tag even if given empty values.
Watch Slot Players Play Slots
Font slots
Table 1 describes the available font slots and where they are used in a page.
Table 1. Font slots
Font Slot Name | Description |
---|---|
title | Used for the page title. |
navigation | Used for the horizontal and vertical navigation elements on the page. |
large-heading | Used for the H1 heading. |
heading | Used for H2 and H3 headings, web part titles, dialog box titles, and callout titles. |
small-heading | Used for H4 headings. |
large-body | Used for large body text (15 pixels and 19 pixels). |
body | The base font that is used everywhere else on the page. |