This article will address the following:

  1. Page Settings Overview and Capability
  2. Page Settings Window

Page Settings Overview and Capability

Summary: Page Settings allows users to configure the display and behavior options for the page. Within Page Settings, there are four tabs. This article will address each tab. Page Settings only affects the specific page users are working on, not all of the sites within the site collection. Page settings would need to be duplicated for multiple pages in a collection.

Page Settings Window

Summary: There are four tabs within Page Settings. The main driving force between display style will belong to the General Tab. The main driving force between performance is the Side Menu Tab. Some tabs and their respective options are dependent on the selected canvas type. For instance, you will see that if a Fixed-Width Canvas type is selected, then there will be a Layout Settings Tab within Page Settings.

The General Tab is primarily responsible for page display and page structure. The tab enables users to customize the style of their page as well as the overall structure. Some options within the General Tab are exclusive to certain types of canvases. The ones listed below are for Responsive Canvases. The ones for Fixed-Width Canvases possess their own section towards the bottom.  

Title
Assign a title to the page you are creating/editing. 

  • The title does not change the name of the page seen within your SharePoint site collection. It changes the name that appears on the tab of your browser.
  • You can see the name labeled in front of "LiveTiles Design" within your search history collection.

Background Color
Set a background color to the page. 

  • When you have a background image, you will not be able to see the Background Color. 
  • For more information on web transparency, refer to the article. 

Background Image
Set a background image to the page. Page Settings retrieves images from SharePoint. 

  • As noted earlier, You will not be able to see any background color as long as there is a set background image. 
  • The recommended background image size for Web is typically a resolution of 1250x800, which translates to either 72 or 96 dpi. It is important to select the proper resolution because certain images do not produce the best quality. Some images are stretched out or even duplicated to fit the page. Others will pixelate. 

Background Image Style
Users can set a Background Image Style from selecting one of the options via drop-down menu.

  • The option "Tile" fits and expands the top left portion of the image on to the entire background page. 
  • There are key differences between the rest of the options: Stretch, Fill, Fit, and Center. Stretch and Fill may seem very similar, but the main difference is that the initial one stretches the image to fit its content to the frame of the site, whereas the latter proportionally fills the site frame with the image content. While Stretch may stray from its original image aspect ratio, Fill does its best to maintain it. Center focuses and zooms into the center of the image, cutting off some of the surrounding edges of the image. Fit maintains it's true aspect ratio and makes sure that the entirety of the image is within the frame of the site page. 

3D Style:
This allows you to set the 3D style tiles on the page.

  • Rectangle type tiles (Circle Tile, Delve Tile, etc) will have a 3D effect.
  • The 3D style color is based on the tile color.

Font Family
Set the font on all tiles on the page.

  • Tiles can still be set independent of the page font family by using the Override Page Font option in the tile settings.

Vertical Page Padding
Change the vertical padding of your site page. Unlike the Fixed Horizontal Padding, Vertical Page Padding is not a toggle-option.

Upgrade Insecure Requests MetaTag
Adds a meta tag in the html header which tries to upgrade content from http to https and if it can't it drops that content. Removing the checkbox makes it so it can display http based content. 

  • Enable if custom scripting links with outside images and scripts. Have it on as an extra layer of safety. 

Enable Wireframe mode
This option allows you to enable Wireframe mode. This allows users to toggle on/off a sketch prototype based style of page. This option allows you to turn on the option for the end users to toggle Wireframe on/off from the end user page. This option is only available if Wireframe mode is enabled. For more information, consider the article that discusses Wireframe mode in further details.

Fixed-Width Canvas Options:

  • Page Padding These four options (Left, Right, Up, Down) applies padding to all the rows on the page.
  • Page Margin Style This option allows you to set the margin style of the page. The options included are Centered and margin. NOTE: This option is only available option on the Fixed Width Canvas.
  • Width This allows you to set the width of the page. NOTE: This option is only available on the Fixed Width Canvas.
  • Height This allows you to set the height of the page. NOTE: This option is only available on the Fixed Width Canvas.

Responsive Canvas Options:

  • Maximum Page Width Set the maximum page width.
  • Minimum Page Width Allows you to set the minimum page width.
  • Fixed Horizontal Padding On responsive canvas types, set the horizontal padding. When this option is toggled on, you will see that you now manual control of the horizontal padding (left and right). Users enter in numeric values to set the horizontal padding in units of pixels. This option helps to avoid scrollbars on smaller devices. When this option is toggled off, users can manually configure the horizontal padding.

The Custom Code Tab allows for more flexible page customization by allowing the implementation of custom code. The options are primarily responsible for generating and customizing Document Heads and Footers. 

Custom Code in Document Head
This section allows you to place custom code into the head of the page. Code that is allowed includes html, css and javascript. To use css and javascript, you will need to use style and script tags respectively.

Custom Code in Document Footer
This section allows you to place custom code into the footer of the page. Code that is allowed includes html, CSS and JavaScript. To use CSS and JavaScript, you will need to use style and script tags respectively.

Custom CSS Classes
This section allows you to add multiple Custom CSS classes to the product, allowing you to be able to add custom CSS classes to the page.

The Side Menu Tab allows users to create and customize the side menu bar for the page. Options within this tab enables users to customize the display, performance and behavior options for their page. 

Enable Side Menu
Tick this to enable the side menu. While this is not ticked the rest of the options below will not be visible.

Link Source
This chooses the source of the link. Options include the global menu and the quick launch menu.

Link Target
This chooses whether the link opened in the side menu will open up in a new window, in a modal window or load in place of the page.

Colors
Sets the Background Color, Hover Color, Collapsed Color, Shadow Line Color, Back Button Color and Heading Color. 

Override Page Font
This option allows you to override the font style set for the canvas. NOTE: Font family will not show up if this isn't selected.

Font Family
This allows you to choose the font type that you would like to apply to the side menu. If a Font Family is not chosen, the font will be in the style that was chosen within The General Tab of Page Settings.

Font Size
Choose the size of the font for the side menu.

Font Color
Allows you to choose the color of the font for the side menu.

Font Style
Select whether the font is bold and/or italic for the side menu.

Font Weight
Select the font weight for the side menu. 

Width
Sets the width of the side menu when opened. 

Collapsed Width
Sets the width of the side menu when collapsed.

  • If the width of the side menu when collapsed is enlarged, it does not push your background image, instead it just layers on top of it. 
  • It is important to set the collapsed side menu width with accordance to how the rest of the page is designed. If you have a background image that you want to show off, having a large collapsed side menu width would potentially cover it up.

Open On Load
This option can be turned on or off. When turned on, the side menu will already be opened when the page is loaded. When it is turned off, the side menu will remain collapsed until a user opens it. 

The About Tab informs users of the current version. 

Version
Shows the current version your installation is on.

The Layout Tab is only available on the fixed width canvas.

Snap to Grid
This allows you to choose whether the tiles snap to grid when placed on the page.

Snap to Other Tiles
his allows you to choose whether the tiles snap to each other when placed on the page.

Did this answer your question?