Liner Entry HTML Templates / Code Blocks

These code blocks can be useful in the following workflows:

• In Classified Full Line Entry

• Booking Wizard Option 2 (Compose a classified ad)

• Booking Wizard Option 1 (Template-based Classified ad) if using an HTML Template and need to edit in the text editor window.

In any of the above workflows, you will find this rubber stamp icon (). Click the icon and a window will pop up containing the code blocks that can be utilized for the ad.

Code blocks can be generic and made available for any category tree and category or they can be assigned only to a specific category. For example, I have a code block for some dot leaders. This might be useful in some legal notices, but maybe not in, say, an obits category.

Here is another example where I have an entire ad template with some pre-set styling and all I will need to do is replace the Headlne, Sub-Head and Text labels with the actual ad text by typing over or pasting over the dummy text.

In the examples above I used a naming convention with "A" and "S" at the beginning. Anything I started with an A is meant to be added onto an ad I already built using an HTML Template. Anything that starts with an S includes a style sheet, and I use that when I use booking wizard Option (#2) to Compose a Classified Ad, so that I don't have to start from scratch in building the ad. It includes my preferred font, type size, justification, hyphenation, etc in a css style tag.

To set these items up so that end users can then use them, navigate to Setup -> Classified Setup -> Liner Entry HTML Templates/Code Blocks.

Click on the "Create New" button at the top

1. Enter a description

2. Optionally, select a category tree to limit use to only in this category tree

3. Optionally, select a category to further limit to a category in a specific tree.

4. Click on the <> (Source code ) button in the top row to open the source code window to paste in a template that was created elsewhere. OR start typing in the the Text editor window and make use of the various buttons for desired fonts, borders, justification, etc.

When finished, save your code block.

For additional info and a use case, check out this video.

Also, here are some samples to get you started.

This is the source code to the dot leaders example above:

<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: flex; align-items: baseline;">
<div>Item 1</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-bottom: 1px dotted #aaa; flex-grow: 1; margin: 0 5px;">&nbsp;</div>
<div>123</div>
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: flex; align-items: baseline;">
<div>Item 2</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-bottom: 1px dotted #aaa; flex-grow: 1; margin: 0 5px;">&nbsp;</div>
<div>456</div>
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: flex; align-items: baseline;">
<div>Item 3</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-bottom: 1px dotted #aaa; flex-grow: 1; margin: 0 5px;">&nbsp;</div>
<div>123</div>
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: flex; align-items: baseline;">
<div>Item 4</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-bottom: 1px dotted #aaa; flex-grow: 1; margin: 0 5px;">&nbsp;</div>
<div>456</div>
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: flex; align-items: baseline;">
<div>Item 5</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-bottom: 1px dotted #aaa; flex-grow: 1; margin: 0 5px;">&nbsp;</div>
<div>123</div>
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: flex; align-items: baseline;">
<div>Item 6</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-bottom: 1px dotted #aaa; flex-grow: 1; margin: 0 5px;">&nbsp;</div>
<div>456</div>
</div>

This is the source code to the style example above:

<style>
    .newspaper {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    text-align:justify;
    line-height: 125%;
    padding:0;
    }
    .borderbox {
    border-style: solid;
    border-color: #000;
    border-width: 2px;
    padding:0;
    }
    h2 {
    text-transform: uppercase;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    font-size: 12pt;
    text-align: left;
    line-height: 125%;
    margin: 0px 0px 0px;
    padding:2;
    }
    h3 {
    font-weight: bold;
    background-color: #ddd;
    color: #000;
    font-size: 9pt;
    text-align: left;
    line-height: 150%;
    margin: 0px 0px 3px;
    padding: 0px;
    }
    img[src*="placeholder-image.jpg"] {
    display: none;
    }
    .hideIfNoContent[data-content=""] {
    display: none;
    }
</style>
<div class="newspaper borderbox">
<h2>HEADLINE</h2>
<h3>SUB-HEADING</h3>
Ad Text</div>