Editing header and footer widgets

Written by Paul Vecchiato

Last published at: July 22nd, 2020

The content area of your site is made up of a series of widgets including the player, playlist and media list. Widgets are used to add content to your site.

To edit a widget:

  1. Select SITES from the top menu
  2. Click Design next to the site you want to customise to display design tools in a new browser tab
  3. Hover your mouse over the widget you want to edit
  4. Click EDIT to display edit options specific to that widget display. The widgets available depend on the type of site you have created.

Editing the header widget

The header widget is located at the top of your site. You can add a Logo, title, custom background image, links  and edit the height of the header region.

Header Settings

The Header Settings tab  is located on the right side of the site panel. To go to header settings:

  1. Hover your mouse over the top right corner of the header to view the EDIT link

Click EDIT to display settings

  1. Select or de-select Show Logo to hide or show site logo area
  2. Select or de-select Show Image to hide or show the image in the header
  3. Select or de-select Show Divider to hide or show the divider in the header space.

Inserting additional links

  1. Hover over the Additional links link in the panel on the left side of the page to display EDIT

  2. Click EDIT to reveal the Additional links menu on the right hand side of the page

  3. Enter the name of the link (this is the text that will be displayed)
  4. Enter the link address
  5. Click Add to add the link to the Header and display the link in the header and the Links tab in the Menu.

You can add multiple links and display them with dividers by selecting Show Dividers.

Link text colours for Default and Hovering options can be changed by selecting a colour swatch under Colours in the Menu

Changing the height of the header

  1. Enter a new height (in pixels) in the Height field
  2. Click Save.

Editing the Logo Image

  1. Hover your mouse over the Logo widget in the Header
  2. Click EDIT to display Image settings on right hand side
  3. Click Choose image to display your browser
  4. Locate your file and click Open
  5. Enter Alt text for the image
  6. Enter a link in the Src text box to link to the logo
  7. Enter a Title to be displayed on hovering over the logo.
Viostream will accept and scale the image accordingly. You can also change the location and size of the logo or header link by dragging the dotted box on top and you can also change the size by dragging the little triangle.

Supported file formats are .jpg, ,jpeg, .png and .gif

 

Editing the footer widget

  1. Hover your mouse over the Footer
  2. Click EDIT to display footer settings on right hand side
  3. Set footer height and padding by scrolling the sliding bar under Height and Padding tabs under Settings
  4. Highlight the footer text by clicking right and left arrows under Text Align.
Footer text is centre-aligned by default.

Editing the footer link

  1. Hover your mouse over the Footer
  2. Click EDIT to display link Settings
  3. Enter the label for your link in the Text field
  4. Locate the URL you want
  5. Paste the link into the Link field
  6. Select the Open in new window option so the target site opens in a new window when clicked
  7. Click Add.

When you have added a new new footer link, the details are displayed under the Links heading. To remove the link/s, click on Remove to the right of the link.

Editing the footer text

  1. Hover your mouse over Footer text inside the footer area
  2. Click EDIT to display footer Text settings on right hand side
  3. Enter footer text in the footer text box and format it using buttons on text settings formatting bar - Bold, Italic, Underline,Hyperlink, Bullet list, Numbered List.

Removing formatting

  1. Select the Remove Formatting button on the right of the formatting bar
  2. Move the mouse cursor to bottom corner of the text settings formatting bar below the Remove Formatting button
  3. Click when the check mark symbol appears to Save formatted footer text.