Themes & Composed Looks for SP2013 and O365€¦ · Accessible content is available upon...

Preview:

Citation preview

Accessible content is available upon request.

Themes & Composed Looks for SP2013 and O365

D’arce Hess SPSNYC 2015

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Text/Icon/Pic

Text/Icon/Pic

Text/Pic

@darcehess

https://www.linkedin.com/in/darcehess

Darce.Hess@avepoint.com

D’arce Hess

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Questions

Introduction Components Tools

Deployment References

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

INTRODUCTION

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Where we came from

SharePoint 2010

Themes

• Allowed users to

change basic colors.

• No way to “theme”

custom styles.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

18 Provided OOTB

Can be modified, but

Best Practice to make a

copy

SharePoint 2013/O365 Themes

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

COMPONENTS

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Parts of a Composed Look

Master

PageCSS

Color

PaletteFont

Background

Image

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Master Pages

The Seattle Master Page contains a left

navigation

The Olso Master Page does not contain a

left navigation

Seattle.master

Olso.master

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Custom CSS (Alternate CSS)

Adjust any custom CSS to allow

for theming using .spcolor

naming convention.

Microsoft Reference:https://msdn.microsoft.com/en-us/library/office/jj945889.aspx

For Custom CSS to be

themable, file must be stored in

“Themable” folder in the Style

Library

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Custom CSS (Alternate CSS)

Apply Alternate

CSS through

Master Page

settings.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Color Palette

XML file that SharePoint reads to

apply HEX colors to various items

in SharePoint

/sites/yoursite/_catalogs/theme/15/palette015.spcolor

Where it is located:

Microsoft Reference:https://msdn.microsoft.com/en-us/library/office/jj945889.aspx

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Font

/sites/yoursite/_catalogs/theme/15/fontscheme001.spfont

Where it is located:

XML file that SharePoint reads

to apply font changes to

various items in SharePoint.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Background Image

Following formats are accepted:

• .jpg

• .bmp

• .png

• .gif

File size restriction on the image is

150KB, so be sure to optimize your

img ahead of time.

Save img in Site Assets

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Background Image

Color Palette

Font

Master Page

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

TOOLS

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

SharePoint Color Palette Tool

Download: CLICK HERE

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

DEMO

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

DEPLOYMENT

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Create .spcolor

file

Create .spfont

file

Choose Master

Page

Gather

Background Img

Load Custom

CSS file

Create

Composed Look

Composed Looks

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Navigate to /yoursite/_catalogs/design/AllItems.aspx New Item

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Fill out the required

fields and press

“Save” button when

finished.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Navigate to Site Settings and choose “Change

the Look”

Choose your custom Composed Look

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Choose

“try it out”

to load a

preview file

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

If you like the

preview, choose

“Yes, keep it”.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

Voila!

Your theme has

been applied.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

DEMO

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

PowershellManual

Deployment

“Add-in”

Model/CSOM

Third-Party

Solution

Multiple Site Collection Deployment

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

REFERENCES

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

References

SharePoint Color Palette Tool https://www.microsoft.com/en-

us/download/details.aspx?id=38182

Scott Hiller’s Provisioning Documentation https://github.com/ScotHillier/SPSBoston2015

Microsoft spcolor file reference https://msdn.microsoft.com/en-

us/library/office/jj945889.aspx

References

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

QUESTION & ANSWER

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

© AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a

retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

THANK YOUEVENT SPONSORS

We appreciated you supporting the New

York SharePoint Community!

• Diamond, Platinum, Gold, & Silver have

tables scattered throughout

• Please visit them and inquire about

their products & services

• To be eligible for prizes make sure to

get your bingo card stamped by ALL

sponsor