I’m no expert at this but I did pretty well this weekend (I think). I set up my Office 365 public site using the Oslo Master Page but decided I needed more control over the branding… So I:
- Created an HTML page template in Dreamweaver
- Extracted the in-line styles and put them in a CSS file
- Loaded the template into a folder with sub folders containing ‘images’ and ‘css’ in the master page section of my site using Design Manager
- Used the Design Manager to create a new master page
- Downloaded the HTML version of the new master page (stupid, I know, but it took me a while to realise I needed to do this!)
Then, after a bit of messing around with the ‘Div’s’ and removing the <Body> tag from my original HTML template, I got a working Master Page with the branding I wanted in the Header and Footer and the Content Placeholder in the middle! Brilliant! I celebrated! (This may seem like a small step to some of you guys – but, for me, this was like scaling Mt Everest)
So, I can now create pages with my own chrome (although I haven’t tackled creating a Composed Look yet!) and, if I click ‘Edit Page’, the cursor appears nicely in the Content Placeholder section of my page and I can insert Web Parts and Apps and begin building my site. (although I haven’t done anything about navigation yet!)
So here’s my problem. When I click ‘Edit Page’ the cursor sits in a blue frame labelled ‘Page Content’ which is narrower than my template. Editing the source I can create a table the correct width and lay my stuff out so it overlays this edit frame – but what is this frame and where does it come from?
Also, the generated HTML contains comments saying I can layout other sections of the page using the Code Snippet Generator. I think I understand this but I’m not sure.
Can anyone who is expert in this area give me any pointers or advice on how I proceed?
Many thanks
OK. Three weeks on (I’ve been away from the Office) and a LOT of reading, and I finally get it! So, I need to create Page Layouts – I now understand that..
…I also understand that, to do this in a structured way, I need to be able to create Content Types for those page layouts so I can apply formatting through additional CSS files and maintian certain common fields across the site. But, since this is the PUBLIC site of Office 365 I’m working on, then ‘Content Types’ is not available on the ‘Web Designer Galleries’ Menu. So I need to use SharePoint Designer 2013 to create the Content Types and then use Design Manager and Code Snippets to create the page layouts from which I build my custom web site…
…which is what Mohammad told me – Thank you.
Why is this so difficult? It seems like Microsoft doesn’t want me to do this. It will be really difficult to sell Office 365 to some of my clients if the only web site designs are those available in the existing Themes.
