Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 6.8

...

To create the site banner placement:

  1. Open your browser, and log in to the Frosmo Control Panel.
  2. At the top of the page, click Change, and select the site for which you want to create the site banner. If you have only one site, it is selected automatically.
  3. Select In the Control Panel, select Modifications > Placements.
  4. Click Create placement.
  5. Define the following settings:

    • Name: Enter "Site Banner - All Pages".
    • Target element: Select CSS selector, and enter "body" as the selector name.
    • Display method: Select Before content.

    The target element and display method together place the modification as the first piece of content within the body element.

    Creating the site banner placementImage Modified

  6. Click Save.

You have created the site banner placement. For more information about placement settings and how to manage placements, see Creating placementsand editing a placement.

Creating the site banner modification

To create the site banner modification:

  1. In the Frosmo Control Panel, select Modifications > Overview.
  2. Click Create modification.
  3. Enter "Site Banner" as the modification name, select Basic Personalization as the modification type, and deselect Enable comparison group.

    Creating the site banner modificationImage Removed

  4. Click Create modification.
  5. Create the modification content:

  6. Select Content.
  7. Enter the following modification content for variation 1

    case, and click Create. You could also select another case, but since this modification needs only the one variation, Personalization is the natural choice here.

    Creating the site banner modificationImage Added

    The Basic settings view opens.

  8. Select the placement for the modification:
    1. In the Placement section, click Select placement.

      Selecting the placement for the site banner modificationImage Added

    2. Select the placement you created for the site banner.

      Selecting the placement for the site banner modificationImage Added

    3. Click Save.
  9. Define the content for the modification:
    1. In the Content section, click the variation name.

      Defining the content for the site banner modificationImage Added

    2. In the variation settings, make sure the selected content type is Custom content, which is the default setting.
    3. In the Content field, enter the following placeholder content. You will develop the content further in your local file system.

      Code Block
      languagexml
      themeRDark
      <div>TODO</div>
      
      <style>/* TODO */</style>


    4. Click Activate for variation 1.
    5. Click Save all.

    Creating the placeholder content for the site banner modificationImage Removed

    Define the display options for the modification:

    1. Select Display options.
    2. In the Placement field, select the placement you created above.
    3. Under Audience, select Test mode. For more information about test mode, see Test mode.Save.
    4. In the Content section, click the quick menu button for the variation, and select Activate.

      Defining the content for the site banner modificationImage Added

    5. If you want to disable the comparison group for the modification, click the quick menu button for the group, and select Deactivate.
  10. Enable test mode for the modification:
    1. In the Advanced settings section, click Define settings.

      Enabling test mode for the site banner modificationImage Added

    2. In the Audience section, enable Test mode.

      Enabling test mode for the site banner modificationImage Added

    3. Click Save.

    Defining the display options for the site banner modificationImage Removed

  11. Click Activate for the modification.

    Activating the site banner modificationImage Removed

    Copy :
    1. At the bottom of the Basic settings view, click Activate.
    2. To confirm, click Activate.
  12. Click Close.
  13. In the modifications list, copy the modification ID, as you'll need it later with FProxy.

    Site banner modification IDImage RemovedSite banner modification IDImage Added

    Info

    The ID of your modification will differ from the one in the above figure.


  14. On your site, preview the modification in its unfinished state by activating test mode. (If test mode is deactivated, you will not see the modification.) You can activate test mode either through the URL or from the Frosmo Debugger. For more information, see Test mode and Frosmo Debugger.

    Hot-reloaded changes in the site banner modification

You have created the site banner modification. For more information about modification settings and how to manage modifications, see Creating modificationsand editing a modification.

Initializing a local directory for storing the site banner content

...

  1. Download the modification content from the Frosmo back end:
    1. In your terminal, go to the sites directory.
    2. Download the content for the site banner modification:

      Code Block
      languagebash
      themeRDark
      fproxy download <site_directory> <modification_id>


  2. Edit the downloaded modification content:
    1. Open the site banner_rev1_<modification_id>.html file in your source code editor, replace the existing placeholder HTML content with the following code, and save the file. Do not change the style element.

      Code Block
      languagexml
      themeRDark
      <div class="frosmo">
          <p>My Banner</p>
      </div>
      

      You can see the changes automatically updated to the page.

      Hot-reloaded changes in the site banner modification

    2. Open the site banner_rev1_<modification_id>.0.css file in your source code editor, replace the existing placeholder CSS content with the following code, and save the file.

      Code Block
      languagecss
      themeRDark
      div.frosmo {
          background: #ffa415;
          text-align: center;
      }
      
      div.frosmo > p {
          color: #ffffff;
          display: inline-block;
          font-family: "Source Sans Pro", sans-serif;
          font-size: 20px;
          line-height: normal;
          margin: 20px;
          text-transform: uppercase;
      }
      

      You can again see the changes automatically updated to the page.

      Hot-reloaded changes in the site banner modification

    3. Feel free to further edit the content and see how your changes get hot-reloaded to the page.
  3. After you're done editing the content, upload the content back to the Frosmo back end:

    1. In your terminal, go to the sites directory.
    2. Upload the content for the site banner modification:

      Code Block
      languagebash
      themeRDark
      fproxy upload <site_directory> <modification_id>


    If you now open the modification settings in the Frosmo Control Panel, you can see your local changes saved to the variation 1 content.

    Final uploaded content for the site banner modificationImage RemovedFinal uploaded content for the site banner modificationImage Added

  4. Stop the FProxy server:
    1. In the Frosmo Debugger, select FProxy, and click Disable.

      Disabling the FProxy server in the Frosmo Debugger

    2. In your terminal, run the following command:

      Code Block
      languagebash
      themeRDark
      fproxy server stop


You have finished the site banner modification, and you've completed this example. For more information about how to deactivate, remove, and otherwise manage the modification, see Creating Working with modifications and Test mode.