A story on branding SharePoint. Where do you start and what is at your disposal if you do not know much about it. Read the full story and access all the helpful links on the blog: http://en.share-gate.com/blog/learn-sharepoint-branding

1. LEARN
BRANDING
FOR
SHAREPOINT

2. IS THAT
WHAT YOU
WANT DO…

3. MEH,
I WAS TOLD
IT WOULD
BE
EASY.
HOW DO I
START?

4. LET ME
SHOW
YOU HOW

5. YES, SHAREPOINT IS A WEB
PLATFORM (HTML, CSS, JS)
BUT IT IS SO VAST AND HAS SO
MANY FEATURES THAT
BRANDING ISN’T THAT SIMPLE

6. YIKES!

7. BUT IT
CAN BEACCOMPLISHED

8. BEFORE YOU BEGIN,
YOU SHOULD UNDERSTAND
THE SHAREPOINT BASICS
SO THAT YOU MAY START
YOUR JOURNEY ON THE RIGHT
PATH

9. THE INTERFACE

10. THE QUICK LAUNCH

11. GLOBAL NAVIGATION

12. SUITE BAR

13. THE PAGE

14. THESE ARE A FEW
SHAREPOINT
CONTROLS ON THE
DEFAULT
« MASTER PAGE »

15. AND YOU CAN
OVERRIDE
THE CSS

16. OR CHOOSE
THE LOOK

17. THESE ARE
EASY WAYS TO
CHANGE HOW
SHAREPOINT LOOKS
WITHOUT TOO
MUCH EFFORT

18. wooah
but how
do you
change the
CSS?

19. WELL YOU CAN START WITH
BROWSER DEVELOPER TOOLS
(F12 in most browsers)

20. THESE WILL HELP YOU
IDENTIFY CSS USED AND TEST
SOME OF YOUR CHANGES

21. ok…
I don’t know
this CSS
business how
can I make
those looks you
talked about?

22. THERE IS THE COLOR PALETTE TOOL…
THOUGH SOME ASSEMBLY MAY BE
REQUIRED

23. BUT I STRONGLY
RECOMMEND YOU
START LEARNING
HTML AND CSS

24. HOWEVER, NO MATTER WHAT
YOU DO, YOU’LL EVENTUALLY
HAVE TO LEARN ABOUT
« MASTER PAGES »

25. THE MASTER PAGE
IS THE FILE WHERE
YOU WILL WRITE
THE STRUCTURE OF
YOUR SHAREPOINT
DESIGN.

26. WHERE WILL
OBJECTS BE AND
HOW WILL THEY
LOOK LIKE?
!
ALONG WITH
WHAT CSS FILES OR
JAVASCRIPT FILES
TO CALL.

27. IT IS THE « MASTER » FILE AND
IS ALWAYS CALLED FIRST WHEN
A PAGE IS LOADED.
!
A WAY TO STANDARDIZE THE
LOOK AND FEEL OF YOUR
SHAREPOINT WITH ONE FILE.

28. REMEMBER THIS?

29. IT’S USING THE DEFAULT
SHAREPOINT MASTER PAGE.
!
IT DECIDED WHERE THINGS ARE
AND WHICH CSS TO CALL TO
MAKE IT LOOK LIKE THIS

30. IF YOU CHOOSE TO CHANGE
THE LOOK WITHOUT
RESTRUCTURING IT.
!
THEN ALL YOU NEED TO DO
IS EDIT THAT MASTER PAGE.
AND LINK YOUR NEW CSS
FILE.

31. IDEALLY, IF YOU ARE
STARTING A NEW
DESIGN.
!
YOU’LL START A
MASTER PAGE FROM
SCRATCH

32. BUT IF YOU ARE NEW
TO SHAREPOINT, YET
COMFORTABLE WITH
HTML.
!
YOU CAN CONVERT
YOUR HTML INTO A
MASTER PAGE

33. THE DESIGN
MANAGER

34. AND THE SNIPPETS
GALLERY WILL HELP
YOU TURN IT INTO A
COOL MASTER PAGE

35. BY GIVING YOU THE CODE TO
ADD THOSE SHAREPOINT
CONTROLS LIKE:
!
- NAVIGATION
- SUITE BAR
- PAGE CONTENT ZONE
- AND MORE…
!
TO ADD IN YOUR MASTER PAGE

36. IN THE END YOU CAN
DO WHATEVER YOU
WANT.
!
AS LONG AS YOU ADD
THE NECESSARY
SHAREPOINT
CONTROLS

39. I CAN’T
BELIEVE IT’S
SHAREPOINT

40. WAIT
you can also
change how
content is
displayed
there’s more…

42. TURNING AN IMAGE LIBRARY
INTO A SLIDER OR A LIST INTO
ANIMATED TILES

43. NOT
IMPRESSED?
(shout out to my dog)

44. WHAT IF I
TOLD YOU
THOSE
DESIGNS
WERE
REUSABLE
WITH ANY
TYPE OF
CONTENT

46. IT USES
SEARCH & DISPLAY
TEMPLATES

47. DISPLAY TEMPLATES ARE
REUSABLE DESIGNS AND
THEY ARE EVERYWHERE

48. THEY USE THE SEARCH
« MANAGED PROPERTIES »
WITH REGULAR HTML, CSS
AND JS TO SHOW YOUR
CONTENT THE WAY YOU
WANT

49. The « container »
!
!
Best way to
reference custom
files (JavaScript,
CSS, etc…)
CONTROL
TEMPLATE

50. ITEM
TEMPLATE
Controls what
happens to each
item rendered
through the query
!
!
Use Managed
Properties to show
the content you
want where you
want using HTML

51. WOW
PRETTY
COOL!

52. I KNOW…
IT’S A LOT OF
INFORMATION

53. YAH… AND « EASY » RIGHT?

54. …

55. NO
IT’S GOING TO TAKE
A LOT OF WORK AND
DEFINITELY
PATIENCE

56. DON’T WORRY
CHECK OUT
THERE IS TONS
OF HELPFUL
CONTENT

57. OH! YOU WANT
TO DOWNLOAD
THE SLIDES?
DOWNLOAD —>

58. 

@bniaulin
share-gate.com/blog
by Benjamin Niaulin,
a SharePoint GEEK