none
SharePoint Online branding RRS feed

  • Question

  • Hi All,  I am tasked to brand SharePoint Online site. Well, I have a little exposure to SharePoint branding. These are the primary requirements:

    • Using the company’s colors and not SharePoint colors.
    • Master page should be more vibrant and should have carousel or some sliding image gallery.
    • Navigation should be simple.
    • Page layouts should have some similar color code as master page but simpler with company information, history etc.
    • [Optional] Responsive Site.   

    I have seen a content and videos:

    Q: Can I use Design Manager and make own custom master pages / Master pages on SharePoint Online??

    Q:  Q: What other tools I can use to brand SharePoint Online? 

    Q: Any free template that I can use? I tried 
    Avicia but it did not work as master pages were not with custom master pages. 

    Q: Any good third party that I can use?? 
    http://bindtuning.com/cms/sharepoint/office-365-v2013/ 
    Any affordable that is available in market?  

    Any help would be highly appreciated!! 

    Thank you. 


    Sandy


    • Edited by Sandy 791 Monday, December 5, 2016 11:37 AM fomatting
    Monday, December 5, 2016 11:36 AM

Answers

  • Hi

    some remarks

    -don't cusotmize existing master page - create your own new master page

    - don't customize existing css files -  create your own css files and reffer to them in master page

    Why? ( becasue it is possible in a future SP online upgrade , default master pages and css files will be overwrited by MS )

    -Yes you can use Sharepoint Designer - free and easy to use

    - You cand use templates - what you will find for free , it will be not enough to your needs -Specofoc and deepd creative branding solutions are not for free


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by Sandy 791 Wednesday, June 7, 2017 3:34 AM
    Monday, December 5, 2016 1:32 PM

All replies

  • Hi,

    on SharePoint online is a best practice don't modify the master page, for this topic "branding" you can work and set an alternative css, and integrate other custom UI across custom actions, jslink and csom.

    Here there is a good article how you can start:

    http://en.share-gate.com/blog/where-and-how-to-start-branding-sharepoint

    Regarding your sliding image gallery you can create a SharePoint provider hosted app and add it in the page like an app part otherwise you can create a content search web part and working with the display templates (javascript), like third alternative you can find some app already developed into the SharePoint Store.

    Kind regards


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon

    Monday, December 5, 2016 12:01 PM
  • Thanks Giuliano for your valuable inputs.

    Do we have any good source in TechNet or blog about branding specifically for SharePoint online? 

    Thanks!


    Sandy

    Monday, December 5, 2016 1:21 PM
  • Hi

    some remarks

    -don't cusotmize existing master page - create your own new master page

    - don't customize existing css files -  create your own css files and reffer to them in master page

    Why? ( becasue it is possible in a future SP online upgrade , default master pages and css files will be overwrited by MS )

    -Yes you can use Sharepoint Designer - free and easy to use

    - You cand use templates - what you will find for free , it will be not enough to your needs -Specofoc and deepd creative branding solutions are not for free


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by Sandy 791 Wednesday, June 7, 2017 3:34 AM
    Monday, December 5, 2016 1:32 PM
  •    

    Hi Romeo, Giuliano De Luca and others,


    Thanks for your valuable inputs. As I mentioned earlier, I don’t have much experience in SharePoint branding and my organization asked me to use SharePoint Online Contoso template as shown below and customize to organization’s theme and colors. Organization does not want to spend on the branding at this moment.



    Options I tired: 

    a) However, its NOT POSSIBLE to "Save as Template" for publishing sites according to this Microsoft article

    b) Tried to use Design Manager and it gave this error:



    and after new minutes it gave this error: 




    Error generating solution files in temporary directory


    Q: How I could move the this Contoso site to my own site site collection? 

    SharePoint team has advocating to use SharePoint Add-ins for branding and it’s definitely require more time with additional knowledge in learning client side scripting.   

    In short, I have to somehow copy and modify the Contoso theme to change theme to company’s images and colors.

    Q: Can I use SharePoint Designer to copy and modify the Contoso master page and related page layouts??

    Q: What is other quick branding option that I can use? I found some links.

    Thanks and wishing everyone merry Christmas and fantastic new year!

    Sandy




    • Edited by Sandy 791 Monday, December 26, 2016 2:11 PM updated
    Sunday, December 25, 2016 12:02 PM
  • Hi,

    It should be fine to reuse other sites’ look/design by design package.

    https://msdn.microsoft.com/en-us/library/office/jj862342.aspx?f=255&MSPPError=-2147217396

    For the error, try to check if it’s caused by customization, here is one similar thread for your reference.

    https://social.technet.microsoft.com/Forums/office/en-US/80050fbc-ae59-4e29-95ba-881d67b051e4/sharepoint-2013-error-exporting-design-package?forum=sharepointgeneral

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, December 27, 2016 5:53 AM
  • Lee, 

    Thanks for your pointer. 

    the second link (https://social.technet.microsoft.com/Forums/office/en-US/80050fbc-ae59-4e29-95ba-881d67b051e4/sharepoint-2013-error-exporting-design-package?forum=sharepointgeneral) is actually SharePoint On-Premises environment.

    What am I looking for is for SharePoint Online and I wont have access to ULS logs in SharePoint Online. 

    I am thinking copying the Contoso Masterpages and ite related page layouts MANUALLY to another site collection. 
    Is this approach fine?

    Please let me know. 

    Thanks!   


    Sandy

    Tuesday, December 27, 2016 10:56 PM
  • You can also extract template out of it using the PnP Provisioning template and then use the template when provisioning the new site.

    https://github.com/SharePoint/PnP-PowerShell/blob/master/Documentation/GetPnPProvisioningTemplate.md

    https://github.com/SharePoint/PnP-PowerShell/blob/master/Documentation/ApplyPnPProvisioningTemplate.md

    Note - Install the PnP cmdlets first to use it.


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Wednesday, December 28, 2016 12:35 AM
  • Hi,

    Have you did any customization for your Contoso demo site?

    Could you try with a New one without any customization to export the design package?

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, December 28, 2016 1:41 AM
  • Hi Lee and Rajesh, 

    Thanks for your pointers. 
    @Lee 

    There was no customization. Its sample SharePoint Online that Microsoft has created. I tried a couple of options to export design package but all in vain.

    I tried a blog and followed the steps: 

    1.  Create  new Private site collection >> Used "Publishing Template" 
    2. Downloaded a free HTML5 and CSS3 template from Internet.
    3. Used SharePoint Designer 2013 >> All Files >> _catalogs >> MasterPages >> New Folder named "Hero" for that HTML5 template from Internet  >> Copied all css, js, images etc. 
    4. Next, SharePoint Online >> Design Manager >> click edit master pages and click “Convert an HTML file to a SharePoint master page” >> Publish a Major Version
    5. Site Settings >> Selected my new Master page. 
    6. This is my new master page: 



    7. I am getting some minor CSS issues for this master page. 
    8. But at the bottom of I am still getting default Publshing page as shown: 

    How to get rid of this default content

    Wishing everyone a very happy and prosperous new year 2017!!! :)

     


    Sandy

    Saturday, December 31, 2016 2:08 PM
  • Hi,

    The content is auto fill by page layout, open exist seattle.html, find below code snippet and insert to proper position of your master page. Then you should design your page layout for page content.

    <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderMain" BlockElement="true" IsMainContent="true" runat="server">-->
                            <a id="mainContent" name="mainContent" tabindex="-1">
                            </a>
                            <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black;">
                This area will be filled in by content you create in your page layouts.
    		
                            </div>
                            <!--SPM:</asp:ContentPlaceHolder>-->
                            <!--SPM:</SharePoint:AjaxDelta>-->
    

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, January 3, 2017 3:12 AM