Versions Compared

Old Version 2

changes.mady.by.user BrightSign TechDocs

Saved on

compared with

New Version 3

changes.mady.by.user BrightSign TechDocs

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Open the generated .html file using an HTML editing application (e.g. Dreamweaver). If you don't have such an application, use a plain text editor (e.g. Notepad, Textedit).
  2. Edit the body element in the CSS section to include a desired font family. Photoshop will not include fonts from the saved template by default.
  3. Create a CSS id named #template and include the properties and values as shown in the screenshot below. Ensure the following:
    1. The position is absolute.
    2. The width and height properties are 100%.
    3. The background-image property matches the name of the background image saved as part of the page files by Photoshop.
  4. Navigate to the <body> portion of the HTML. Notice that the HTML body consists of a number of <div> templates that correspond to the slices created in Photoshop.
     

  5. (Optional) If you want the background image of the template to be customizable in BrightPlates, you will need to add the following to the <body> tag: 

    Code Block
    data-template-background="background.jpg"
  6. In the <div> tags that correspond to editable images, enter data-block-type="image" in the tag.
  7. In the <div> tags that correspond to editable videos, enter data-block-type="video" in the tag.
  8. In the <div> tags that correspond to dynamic data, enter data-block-type="mrss" in the tag. Because BrightPlates always uses Live Media feeds, you will need to specify the block type as "mrss" even if the feed only contains text.
  9. For each item in a dynamic data <div>, do the following:

    1. Create a <div> ag for the item formatted as follows. The other <div> elements created in steps b through e will be placed within the boundaries of this <div> element. 

      Code Block
      <div data-block-item="mrss">
</div>

    2. If the item contains an image, create a <div> tag formatted as follows:

      Code Block
      <div data-item-media="image" class="itemImage" />
      Note
      titleNote

      Video via MRSS is not supported in BrightPlates templates.

       

    3. Create a <div> tag for the title formatted as follows: 

      Code Block
      <div data-item-type="title" class="itemTitle" />

    4. Create a <div> tag for the description formatted as follows: 

      Code Block
      <div data-item-type="description" class="itemDescription" />

    5. Below the <div> tag for the description, you can add any number of custom data fields by adding additional <div> tags. The data-item-type of the <div> should equal the name of the custom field in the BSN Live Media Feed (created using the Add Custom Field button in the WebUI). For example, a custom field named "Caloriecount" in the Live Media Feed would correspond to the following: 

      Code Block
      <div data-item-type="caloriecount" class="itemCaloriecount" />

...