Home

Customizing the look of the Header area and adding social media links

%3CLINGO-SUB%20id%3D%22lingo-sub-1097266%22%20slang%3D%22en-US%22%3ECustomizing%20the%20look%20of%20the%20Header%20area%20and%20adding%20social%20media%20links%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1097266%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHoping%20someone%20can%20point%20me%20in%20the%20right%20direction.%26nbsp%3B%20I'm%20new%20to%20UI%20in%20SharePoint.%3C%2FP%3E%3CP%3EThe%20site%20is%20a%20SharePoint%20Online%20%3CSTRONG%3ETeam%20Site%3C%2FSTRONG%3E.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20need%20to%20make%20the%20top%20section%20of%20the%20various%20pages%20look%20more%20inviting.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECurrently%20on%20the%20site%20pages%2C%20lists%20%26amp%3B%20doc%20libraries%20-%20the%20Global%20Nav%20shows%20above%20the%20logo%2C%20which%20is%20not%20what%20we.%26nbsp%3B%20Plus%20the%20background%20is%20white.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'd%20like%20to%20make%20it%20look%20more%20like%20the%20header%20section%20(blue%20section%20above%20the%20pictures)%20in%20following%20example.%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%3CSPAN%3EWhere%20the%20logo%2C%20title%20%22The%20Landing%22%20and%20then%20the%20Global%20top%20nav%20links%20are%20all%20in%20line%20as%20shown%20below.%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3EThen%20change%20the%20background%20color%20like%20they%20did%20-%20shown%20in%20blue%20below.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%2C%20is%20it%20possible%20to%20change%20the%20font%20and%20size%20of%20the%20Navigation%20Text%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164295iF55A016AD19D1D81%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%2C%20if%20possible%2C%20I'd%20like%20to%20add%20in%20this%20same%20header%20area%20to%20the%20right%20of%20the%20Global%20Nav%20Menu%20Links%2C%20the%20following%20social%20media%20buttons%2Flinks%20which%20should%20take%20the%20user%20out%20to%20the%20appropriate%20site%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164296i983517D66AA16E33%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_1.png%22%20title%3D%22clipboard_image_1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20I%20accomplish%20this%3F%26nbsp%3B%20If%20so%2C%20what%20do%20I%20need%20to%20use%3F%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1097266%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHeader%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1097299%22%20slang%3D%22en-US%22%3ERe%3A%20Customizing%20the%20look%20of%20the%20Header%20area%20and%20adding%20social%20media%20links%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1097299%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F299860%22%20target%3D%22_blank%22%3E%40Lennyg2125%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHave%20a%20look%20at%20the%20%3CA%20href%3D%22https%3A%2F%2Flookbook.microsoft.com%2F%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3ESharePoint%20look%20book.%3C%2FA%3E%3C%2FP%3E%3CP%3EThere%20is%20lots%20of%20examples%20there%20about%20the%20customization%20of%20the%20UI.%20You%20may%20also%20find%20Laura%20Rogers%20YouTube%20video%20helpful.%3C%2FP%3E%3CP%3E%3CFONT%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dgg7YoWu7P1A%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dgg7YoWu7P1A%3C%2FA%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%3ECheers%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%3ERob%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1100069%22%20slang%3D%22en-US%22%3ERe%3A%20Customizing%20the%20look%20of%20the%20Header%20area%20and%20adding%20social%20media%20links%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1100069%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4869%22%20target%3D%22_blank%22%3E%40Rob%20Gallagher%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20the%20response%2C%20the%20look%20book%20is%20great%2C%20thanks%20for%20sending%2C%20but%20our%20site%20already%20exists%20so%20creating%20from%20one%20of%20these%20templates%20won't%20work%20unfortunately.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20was%20looking%20at%20perhaps%20using%20a%20CEWP%20and%20modifying%20that%20way%2C%20but%20not%20sure%20if%20this%20is%20the%20best%20option%20I%20have%20or%20not%20to%20accomplish%20this.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi,

 

Hoping someone can point me in the right direction.  I'm new to UI in SharePoint.

The site is a SharePoint Online Team Site.  

 

I need to make the top section of the various pages look more inviting.

 

Currently on the site pages, lists & doc libraries - the Global Nav shows above the logo, which is not what we want.  Plus the background is white.

 

I'd like to make it look more like the header section (blue section above the pictures) in following example.    Where the logo, title "The Landing" and then the Global top nav links are all in line as shown below.  Then change the background color like they did - shown in blue below.

 

Also, is it possible to change the font and size of the Navigation Text?

 

clipboard_image_0.png

 

Also, if possible, I'd like to add in this same header area to the right of the Global Nav Menu Links, the following social media buttons/links which should take the user out to the appropriate site:

clipboard_image_1.png

 

Can I accomplish this?  If so, what do I need to use?  

Thanks!

2 Replies
Highlighted

Hi @Lennyg2125 

Have a look at the SharePoint look book.

There is lots of examples there about the customization of the UI. You may also find Laura Rogers YouTube video helpful.

https://www.youtube.com/watch?v=gg7YoWu7P1A

Cheers

Rob

Highlighted

Hi @Rob Gallagher 

 

Thanks for the response, the look book is great, thanks for sending, but our site already exists so creating from one of these templates won't work unfortunately.

 

I was looking at perhaps using a CEWP and modifying that way, but not sure if this is the best option I have or not to accomplish this.