Retain Custom Branding For Office 365 Sharepoint Online Sub Sites (Non Publishing Sites).

?If you want to create sub sites that have the same custom design as a parent site from a template, you’ll find that non-publishing sites don’t give you that option through the browser. The master page is included in the template but an option to switch over to a different master page isn’t. The easiest workaround I’ve found is to:1/ Include elements like logo etc in the parent site master page design (using css and/or maybe a little html).
2/ Use Sharepoint Designer to designate which master page to use.

Master Your Master Page

Including collection wide elements like a logo in a master page are outside the scope of this article, and in truth, it’s pretty easy to insert a logo once you’ve built a sub site. Calling up the right master page is a bit more tricky. Basically what you need to do is make a small change to the code in each page file to call up the right master and then designate which master page that is in the master page library, using Sharepoint Designer.
Each page gives you the option to use either the “default.master” or the “custom.master”. You can associate any master page you want as the default and custom. That allows you to leave the admin pages with the standard Sharepoint look, but apply your customizations to the site pages only. Or you can use one consistent look for ALL pages. I like to designate my custom master page as the “custom” master page rather than the “default” because I think it’s clearer and sometimes customizations can interfere with the functionality of back end, admin pages, but it’s up to you.

If you want to use a custom master page:
Open the PARENT site in Sharepoint Designer
For each page you want to affect, change”default” in this line to “custom:”
<%@ Page Language=”C#”Inherits=”Microsoft.SharePoint.WebPartPages.WikiEditPage” MasterPageFile=”~masterurl/default.master” MainContentID=”PlaceHolderMain” %>

custom-master1

Now you can save the site as a template and each site created using the template will use the”custom” master for the pages you changed. One more step is needed to ensure SP grabs the right master page.
TIP» If you have a lot of pages, and don’t want to make this change in all of them, you can leave the master used as “default.master” and set your custom master as “default” in the below step.

Setting The Master Page

Once the site is created, open it in SPD.
Open the”Master Pages” folder.
Locate your custom.master and right click it to open a context menu.
Select”Set as custom master page”.

custom-master2

Your new sub site should now be using your custom master page.
Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Centering content area and fixing page width in Office 365 Sharepoint Online 2013 public site

center-contentOne of the stranger design choices in the layout of 2013 public sites, is the”narrow”, left aligned page content area in the Oslo template. Nothing makes a site look more unprofessional or unfinished than awkwardly aligned content areas. It creates a terrible first impression and even though Msft must be aware of the issue from the many complaints about it they’ve seen in the community forum, it still hasn’t been addressed.That’s amazing considering a couple of lines of css code would fix it. The cause appears to be simple: Microsoft allowed space for the right sidebar the Berlin template uses, but then forgot to correct that in Oslo which has no right sidebar. You can see in this demo example how it’s supposed to look »
To get your site looking like that by centering the content areaand fixing the strangely narrow width, add some css rules to your site’s stylesheet
Under “Site” in the ribbon when editing a page, open the stylesheet

At the top, add this, adjusting the pixels to suit:
.contentwrapper div {margin-left:auto !important;margin-right:auto !important;}
div#contentBox{min-width:885px;} *See note below
Page Layouts
The above should address the content areacontainer, but if you are using a page layout comprised of different sections, you may also need to target those sections to get a balanced look. You can get the relevant classes/id’s by looking at the page source code or using a browser developer tool. Here are some examples of the many classes in use:
div.fullPageLayout-inner{min-width:685px !important;}
Header/2 column layout: div.layout-col.twoRowTwoColumn-bottomLeft, div.layout-col.twoRowTwoColumn-bottomRight {width:50% !important}

Blog Pages
If you use the 365 blog, you may notice the right sidebar still overlaps the post content area after applying the fix above. That’s because, unfortunately, Msft still uses html tables for layouts in the blog pages, so a different fix is needed. To complicate things further, Chrome and other webkit browsers don’t treat tables the same way as other browsers…To target just the post content and the table it’s contained in without impacting other tables on the site in MOST major browsers, add this to the stylesheet:
ul.ms-blog-postList, .ms-blog-MainArea .ms-fullWidth table {min-width:750px !important;margin-right:20px !important;}
Adjust the width to suit of course.

Impact On Mobile Site Design
You’ll need to consider the impact of adding a”min-width” rule on your mobile design, if that’s important to you. Take a look at this article for some tips on how to improve mobile views in 365: Improve the mobile view for Office 365 Sharepoint Online public sites.

If you have a question about this or any other Office 365 topic, please visit my forum. I’m also available for consultations or development work!
And if you found this helpful, feel free to share it socially byclicking one of the icons up top!

Add Additional Levels To Office 365 Sharepoint 2013 Site Navigation

If you want to add more levels to the drop down or quick launch navigation in a Sharepoint 2013 site, you can do it by making a small change to the master page in use. This technique should work for any type of site (public/private) in any tenant.
Open the site in Sharepoint Designer
Click all Files » Catalogs » Master page
Master pages can’t be edited directly anymore so open the associated HTML MASTER PAGE FILE (which will usually have the same name eg. oslo.html).
Find “MaximumDynamicDisplayLevels=”2” in the grayed out code under “SPM:<Sharepoint:SPNavigationManager”
Change the “2” to how many levels you want.

031714_2010_addaddition1

Save the file, check it in and publish a major version (if checked out) or go to site settings » galleries » master pages and page layouts and publish it from there.
The Result:

031714_2008_addaddition2

Left Navigation
If using a left hand nav (or quick launch), follow the same process only of course with the appropriate master page – Seattle or Berlin.

041314_0433_addaddition1

Questions?
Ask away in my forum.

Changing the Office 365 Logo In Sharepoint Online 2013 Sites

022014_0452_changingthe1To brand the top bar navigation with your own logo and hide the Office 365 one, add this to a site stylesheet:.o365cs-nav-leftAlign {background:#000url(YOUR_LOGO_URL_HERE) 0 0 no-repeat !important;}.wf-o365-o365logo{display:none !important;}
Change thecolor to match the theme you’re using.
Change The Link
To change the link, add a div to your master page with the o365cs-nav-leftAlign class. Insert your desired link in the div. Then add a position to that class:

div.o365cs-nav-leftAlign {position:absolute;top:5px; background:#000url(YOUR_LOGO_URL_HERE) 0 0 no-repeat !important;}
Change Other Top Bar Links

Use the same technique to change links like the sites links, making the appropriate adjustments to account for the different location. If you want to simply hide or adjust the style of other links, use a browser inspector tool to identify the link’s id/class and then add css code to target it.
For example, to hide the “OneDrive” link, add this to a stylesheet:
#O365_MainLink_ShellDocuments{display:none !important;)

Adding Javascript To An Office 365 Sharepoint 2013 Public Web Page

101613_2057_addingjavas1Adding javascript to a 2013 public site page isn’t as straightforward as it is in most properly designed content management systems. The choices presented by the page editor are the “embed code” tool, the “edit html source” tool and buried away under web parts – the script editor web part. As far as I can tell here’s how all 3 work:The Embed Code Tool:This is the strangest of the Microsoft script insertion concoctions – it detects if your insertion starts with a at the start of your code, but it makes more sense to avoid it and just use the script editor web part to begin with.
The Edit HTML Source Tool:
Detects script code and strips it out – so not much use at all in this context.
The Script Editor Web Part:
The best and only logically designed built in option because it accepts ANY code. Find it under web parts » media and content.
This is really a confusing way of doing things because the "embed code" tool isn't rationally designed and is a prominent button in the ribbon while the script editor web part is buried in the list of available web parts with no clear indication it's there. A better design would be to eliminate the redundant "embed code" tool and just have the script editor web part (which lets you add ANY code) available in the ribbon. There's no need for both.
The "Roll Your Own" Option For More Advanced Users
Another possibly more convenient way to add javascript, is to put the javascript in a text file saved to an anonymously accessible library and then insert it into the page with a content editor web part. Doing it this way, you can edit the code directly using Windows Explorer or Sharepoint Designer and not have to open the clunky page editor. This method also makes it easier to reuse scripts you want to deploy on multiple pages, like Adsense ads or other script widgets.
Steps:
1/. Paste your javascript into notepad - with script tags, so it looks like this example:


2/. Save as a .txt file and upload to the Site Assets library. Or even easier, create the file directly in Sharepoint Designer.
3/. Insert a content editor web part on your desired page. In the "content link" box, enter the url of your text file.

101613_2048_addingjavas1

5/. Save/publish the page and now your javascript should run.

Apply Sharepoint 2013 public site design to team site / web part pages

This technique covers restyling your internal, admin and public wiki/web part pages to look exactly like your public site. It involves either changing the master page selected pages use or creating a new css file and adding a link to it in a new master page. I’m going to use the css that styles the public site but the basic process can also be used to apply any design you dream up to your team site pages. Here’s an example – you can see from the url it’s a web part page in the site pages library: http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx
There are several benefits to doing this including:

Branding consistency between internal/external sites
Replacing the “vanilla” Sharepoint styling
Allows you to seamlessly integrate web part and wiki pages in your public site and take advantage of their additional features

101313_2228_applysharep1

Caution:

Due to a bug, it seems changing to a custom master page wreaks havoc on any Sharepoint store apps you have installed. You will have to remove the app and add it again to fix the problem, so if you have content you don’t want to lose – be warned!

Steps:

There are 2 ways to do this. One way is easier but involves UK web design companies and allows you to pick and choose which pages use the public site styling. The other way is more complex and will affect all your admin pages but all you need is notepad. The first option is the safer of the 2 because there may be some undesirable side effects to changing the admin master page. Whichever you choose, be aware that SP master pages are pretty unforgiving of errors so you should always start by making a copy of the default version!

Option 1:

Create a page in the Site Pages library. If there is no site pages library in your tenant, you’ll have to create one with all the desired page content types active.
Open the site in Sharepoint Designer.
Click “All Files” »” _catalogs” » “master page”.
Right click the master page used in the public site (Oslo etc) and click “set as custom master page”.

untitled

Navigate to the Site Pages library, right click any page and click “Edit in advanced mode”.

 

 

At the top of the code you’ll see the master page reference.
Change it from: <%@ Page language=”C#” MasterPageFile =”~masterurl/default.master”
To: <%@ Page language=”C#” MasterPageFile=”~masterurl/custom.master”

Now that page will start using the same master page (and therefore styling) as the public site pages.

Option 2:

Remember this will monkey with all your admin pages so if something breaks, see option 1!

Grab the files:

Go to site settings » look and feel » master page to identify which “system master page” you’re using
Web designer galleries » master page gallery – download a copy of that master page (Oslo, Seattle etc).
The css file used on the public site is not as easy to locate-
Option 1 (easy): open your public site and using the web developer add on in Firefox, go to the edit css tool, copy the contents of the css file that looks like “oslo-236877554-themedcss” and paste into notepad.
Option 2: look in the source code of a public site page for all the “link rel=”stylesheet” references. The file you want will be something like oslo-236A6B32.themedcss. So the full path would be /_catalogs/theme/Themed/3A9B902/oslo-236A6B32.themedcss. When you find it, click it, copy the code and paste into notepad.
Save the css in notepad as a .css file and upload to the master page gallery.

Adjust the master page:

SP is picky about how you add a link to a css file – so open the master page in a text editor and search for Right below that line add:

So the name part would reference the name o

101313_2228_applysharep2

Adding Custom Styling To The Office 365 Sharepoint 2013 Public Website

071213_2035_addingcusto1 A few people have asked me recently why custom code added to the stylesheet in the public site editor isn’t working. For example, when they add code to make the logo bigger, nothing happens.If you look at the stylesheet you’ll see that MSFT has added “commenting tags” (/*) to the examples they provide. The purpose of those tags is to show notes or other information that browsers will ignore. They are helpful to developers for example to remind them what a piece of code is supposed to do.That’s all well and good, but the problem here is if users follow the examples given , their code is going to be “commented out” and won’t get rendered.
Here’s a code snippet example:
/* SITE TITLE
.ms-core-pageTitle a{
color:white;
font-size:40px;
font-family:Tahoma;
}
Browsers will ignore anything after the /* and I guess MSFT assumes users know that. The examples SHOULD be ignored but doing it this way seems to be causing confusion.
The bottom line is DON’T paste your code after a /* tag. In fact I’d delete everything in the stylesheet before adding your code. That way you can be sure whatever you add will get rendered by a browser. Or at least, add your code AT THE VERY TOP OF THE STYLESHEET!!

Change logo size – Office 365 Sharepoint 2013 public site

Your logo represents your brand and is arguably the most important single element on your site. Most competent web site platforms recognize that and provide tools to ensure your logo looks as good as it can. Because Office 365 isn’t really designed with public sites in mind, it only gives you one sizing option. If your logo doesn’t fit, there’s no editing tool to change that. To resize your logo – or any image – normally you could just add some custom css to the image. The containing element should then expand to accommodate the image. Due to poor coding practices in 365 though, only the width can be changed this way. MSFT has restricted the height of the containing element which may throw off your logo’s proportions.To override that , use the”min-height” attribute in your css (add this to your custom stylesheet – changing the dimensions to suit):.ms-siteicon-img, #DeltaSiteLogo{width:200px;min-height:150px !important}
OR try:
.ms-siteicon-img{min-height:150px} /*the logo image*/
div#siteIcon{height:150px !important}/*the containing element*/
The latter will also make the header area larger and resposition the tilte and nav, which may not be desirable. If so, try this:
.ms-siteicon-img{min-height:150px;z-index:100;position:relative;top:-50px !important}
That will enlarge the logo AND keep it layered above the header without repositioning the title/nav elements.

If the width is an issue try “min-width” too. This works in all browsers that support the min- attribute (so won’t work in IE6 and IE7)

Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Change your public site’s home page (2010/2013)

For some unknown reason, the ability to change a Sharepoint site’s home page is available in the site settings for team sites (Look and feel»Welcome), but hidden forpublic sites. If you don’t want to fire up Sharepoint Designer to do it, here’s an easier way using the ui:Appendthis to your public site’s domain:
2010:/_layouts/AreaWelcomePage.aspx
2013:/_layouts/15/AreaWelcomePage.aspx
So, in my case it would be:
365.webbrewers.com/_layouts/AreaWelcomePage.aspx

Once there, simply change the url to your desired page.

This seems to work for both 2010 and 2013 Small Business and Enterprise accounts.

UPDATE:Hmmm, it seems this has now been changed and both Ent and Sm Bus public site settings now include the ability to change the “Welcome” (ie home) page. Go to site settings»Look and feel»Welcome page.