Target:
What is the composed look?
How to create a custom composed look?
Details:
What is the composed look?
Imagine that you want to make some changes to spruce up your home that
can be done relatively quickly and easily. Your budget is limited, so you decide
to paint the walls with a brighter and more appealing color. In SharePoint
terms, this would be equivalent to applying a theme. Technically speaking,
themes can be thought of as changes that are applied to the existing look and
feel through the use of CSS.
Over the past few versions of SharePoint, themes have evolved more than
any other branding function.
In SharePoint 2007, themes were
stored on the file system of the SharePoint server and consisted of mostly XML,
CSS, and images that were applied to a master page. The bigger issue was that
although themes were considered to be one of the simplest approaches to
branding, creating custom ones was actually quite complicated and required
changes to files on the server, which required direct access to the file
system. SharePoint Server Administrators aren't usually too fond of making
changes to files on the file system.
SharePoint 2010 took a new
approach to themes and used the same mechanism used by Microsoft Office to
create .THMX files that enabled users to select from twelve colors and two
fonts. This could all be done through Office clients or through the SharePoint
UI, which made custom theme creation much easier than with SharePoint 2007.
When created, these files could be uploaded and applied to any site. This meant
that themes could be applied without making any changes to the file system, but
the downside here was that themes in SharePoint 2010 essentially just recolored
sites. They didn't provide a way to modify CSS or add images. Many users felt
this iteration of themes was almost too simplistic.
SharePoint 2013 introduces
another approach to themes that is noninvasive like SharePoint 2010 but enables
more flexibility to add background images and other customizations similar to
the types of customization typically made with SharePoint 2007 themes. This new
approach to themes is called composed looks.
A composed look consists of a color palette, fonts, background image,
and associated master page. When a user selects a composed look, all these associated
design elements are applied to the site. There are several composed looks
available to choose from out-of-the-box, but you can also customize these or
even create your own. When you choose a composed look, SharePoint applies the
styles and master page associated with the composed look, and with minimal
effort you have created a customized site. Out-of-the-box, you get 18 prebuilt
composed looks to choose from in SharePoint 2013.
How to create a custom composed look?
The cool thing about composed looks is you can provide a base master
page design, and users can change the colors, fonts, and background images
without knowing anything about CSS or master pages.
To begin
understanding composed looks, you should check out the composed looks gallery
by clicking Site Settings ➢ Web Designer Galleries ➢ Composed looks.
The
following shows the new item menu from the composed looks gallery.
On the left and the menu you see when you select a
composed look (Site Setting ➢ Look and Feel ➢ Change the Look)
The following list details
what each setting in the composed looks gallery represents and how it relates
to the Change the Look menu.
• Title
The title for the list item
that is created for each composed look.
• Name
The name or label that appears next to the look in the change the look
menu.
• Master
Page URL
A reference to the preferred master page that goes with the
composed look. In the Change the Look menu, this shows in the Site Layout
drop-down. This can be confusing terminology because Site Layout could be
confused with page layouts, which are a different concept.
• Theme
URL
Another confusing option because themes were the overarching name
for functionality that was similar to composed looks in SharePoint 2010. In the
composed looks gallery, Theme URL refers to an XML file that lists preferred
colors for the composed look. This is shown in the change the Look menu as colors.
• Image
URL
References the URL for a background image to be used in the
composed look. On the Change the Look menu, this is represented by the image
thumbnail in the top left of the screen.
• Font
Scheme URL
Refers to an XML file that lists preferred fonts for this composed
look. On the Change the Look menu, this is simply shown as Fonts.
• Display Order
This number represents the sort order from low to high that the composed look shows on the first page of the change the look menu with all the thumbnail previews.
Demo:
1- To create custom composed look you
should first create color and font xml files.
2- These files live in /_catalogs/
theme/15 navigate to this folder. You can see a long list of files that end
with the extensions .spfont and .spcolor; these represent all the default color
and font options for composed looks.
3- You need to make copies of fontscheme001.spfont
and Pallete001.spcolor. Name the copies BreakfastFonts.spfont and BreakfastColors.spcolor,
respectively.
4- Start by opening BreakfastColors.spcolor
in a text editing program.
Note: PreviewSlot1, PreviewSlot2, and PreviewSlot3 refer to the colors
drop-down that shows in the Change the Look menu.
5- To familiarize yourself with an
SPFont file, look at the BreakfastFonts.spfont file:
This
file has a little extra going on. On line two the <s:fontScheme> tag is
set up similarly to the <s:color> tag in the SPColor file in that it
defines some previewSlots referenced in the following list of fontSlots. Inside
of the fontSlots node, you see several fontSlot child nodes, each with a “name”
that defines the slot. Inside of each fontSlot node you see an <s:latin> node
that configures the actual fonts that will be used for this slot plus several
nodes that tell SharePoint what fonts to use if the default language is set to
a foreign language that doesn’t use Latin type faces. Focusing on the latin node,
you can see that it defines the following properties:
Typeface: The name of the font that
shows in the change the look menu.
EOTSRC: Points to the URL for an
.EOT font file.
WOFFSRC: Points to the URL for a
.WOFF font file.
TTFSRC: Points to the URL for a
.TTF font file.
SVGSRC: Points to the URL for an
.SVG font file.
Largeimgsrc: Points to the URL for an
image that represents the font in the Change the Look menu. This image shows
the user a sample of what the font will look like for the first previewSlot.
Smallimgsrc: Points to the URL for an
image that represents the secondary font in the Change the Look menu. This
image shows the user a sample of what the font will look like for the second previewSlot.
6- Navigate to Site Settings ➢ Web Designer Galleries ➢ Composed Looks.
7- Click new item at the top of this
page to create a new composed look.
8- Enter the following options for the
composed look:
a.
Title : Breakfast
b.
Name : Breakfast Theme
c.
Master Page URL :
/_catalogs/masterpage/oslo.master
d.
Theme URL : /_catalogs/theme/15/BreakfastColors.spcolor
e.
Image URL : /_layouts/15/images/image_bg117.jpg
f.
Font Scheme URL : /_catalogs/theme/15/BreakfastFonts.spfont
g. Display
Order : 5
9- Click Save.
Note:
Custom master pages will not show up as options in the Change the
Look menu unless they have a corresponding .preview file with a matching
filename.
Composed look
preview files are based on a unique file structure that defines default colors,
fonts, preview-specific CSS and HTML markup, as well as special tokens that
will inject helpful values. The HTML and CSS in previews represent a simpler
version of the master page branding that they represent. The CSS in previews
should be based on percentage sizes to allow for scaling between two different
preview sizes that SharePoint uses in the Change the Look menu.
Advantages:
1- The cool thing about composed looks
is you can provide a base master page design, and users can change the colors,
fonts, and background images without knowing anything about CSS or master
pages.
2- Change the look and feel of a site
without a lot of work.
Reference: SHAREPOINT®2013 BRANDING and USER INTERFACE DESIGN Book.
8 comments
I really like your post good blog on site,Thanks for your sharing.
Replyหนังออนไลน์
I am inspired with your post writing style & how continuously you describe this topic. After reading your post on sharepoint training for beginners, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
ReplyI am inspired with your post writing style & how continuously you describe this topic. top 10 micronutrients company in india
Replyworld777 official
Replybest property to buy in jaipur
class 12 tuition classes in gurgaon
kurti skirt set
black printed sarees
azure firewall
azure blueprints
azure resource group
azure application gateway
azure express route
Thank you for sharing such an informative post.
ReplyI am Cindy jones. I am Completing my B.pharm and M.Pharm for USA university. Tadalafil can be traded under the variety Vidalista 40. It can be used to relax and improve blood flow to certain parts of the body. Tadalista 20 is a generic Cialis that contains the same active components as the Cialis brand name Cialis.
Cryptocurrency App Development Company is a subset of digital currency designed to serve as an exchange mechanism for secure online transactions via cryptography. Bitcoin is the world's first decentralized record currency. It has been a huge success, with a good response from the global community. It has prepared the path for the emergence of new cryptocurrencies. These digital currencies are also known as Bitcoin forks.
ReplyA Dedicated Server is a physical server that's assigned to a single organization.
ReplyOptimize your operations with our comprehensive Linux server management services. From setup to maintenance, trust us for reliable solutions.
ReplyPost a Comment