Difference between revisions of "Template:Display Editor Preview Section"
From dataZoa Wiki
| (10 intermediate revisions by one other user not shown) | |||
| Line 3: | Line 3: | ||
<br> | <br> | ||
<div class="imgGlyph24 imgNote"></div> Remember: | <div class="imgGlyph24 imgNote"></div> Remember: | ||
| − | * The preview attempts to keep up with every change you make, but will "batch" changes if necessary. | + | * The preview attempts to keep up with every change you make in the editor, but will "batch" changes if necessary. |
* You can always ensure the current state of the display by using the <b><i>Refresh Preview</i></b> button. | * You can always ensure the current state of the display by using the <b><i>Refresh Preview</i></b> button. | ||
* When you save a display, many of its settings, such as colors and fonts, become the default for any new displays. | * When you save a display, many of its settings, such as colors and fonts, become the default for any new displays. | ||
| + | * When you change the height or width of your display in the Preview Section, the <b><i>To Embed:</i></b> string in the [[Display Editor Name Section|name section]] gets changed accordingly, and you may want to update it in places it has already been used. | ||
<br> | <br> | ||
| − | <div class="imgGlyph24 imgWarning"></div> Never edit the same saved display in more than one browser window. There is only a single "temporary" display copy available for editing. | + | <div class="imgGlyph24 imgWarning"></div> Important: |
| + | * Never edit the same saved display in more than one browser window. There is only a single "temporary" display copy available for editing. | ||
<table class="GTableTextPic"> | <table class="GTableTextPic"> | ||
| Line 18: | Line 20: | ||
</table> | </table> | ||
| − | + | As appropriate to the type of display, the <b><i>Preview</i></b> section also lets you set: | |
| − | + | <br> | |
<table class="Gbb1"> | <table class="Gbb1"> | ||
| − | <tr><td> | + | <tr> |
| − | <tr><td> | + | <th class="Grot45 Gtal Gvab"><i>Feature</i> </th> |
| − | <tr><td> | + | <th class="Grot45 Gtal Gvab" style="width: 20em;">Description</th> |
| − | <tr><td> | + | <th class="Grot45"><div><span>Table</span></div></th> |
| + | <th class="Grot45"><div><span>LatestValues</span></div></th> | ||
| + | <th class="Grot45" ><div><span>Chart</span></div></th> | ||
| + | <th class="Grot45"><div><span>Datablock</span></div></th> | ||
| + | <th class="Grot45"><div><span>Widgtes</span></div></th> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Font-Family</td> | ||
| + | <td>CSS-style font-family used <br>throughout the display by default</td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Fontsize</td> | ||
| + | <td>CSS-style fontsize used <br>throughout the display by default</td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Background Color</td> | ||
| + | <td>Background color for display</td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Text Color</td> | ||
| + | <td>Text color for display</td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Row Colors</td> | ||
| + | <td>Overrides for individual <br>and/or alternating rows</td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Grid, Frame, and Axis Colors</td> | ||
| + | <td>Details vary by Chart Type</td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | <td class="imgCellYes"></td> | ||
| + | <td></td> | ||
| + | <td></td> | ||
| + | </tr> | ||
</table> | </table> | ||
| + | <br> | ||
Latest revision as of 10:09, 10 September 2018
The Preview section is common to all display editors. It sits at the bottom of the editor panel, showing how the display looks given the current settings in the editor before any changes are saved. The examples here are illustrated using the Chart editor.
- The preview attempts to keep up with every change you make in the editor, but will "batch" changes if necessary.
- You can always ensure the current state of the display by using the Refresh Preview button.
- When you save a display, many of its settings, such as colors and fonts, become the default for any new displays.
- When you change the height or width of your display in the Preview Section, the To Embed: string in the name section gets changed accordingly, and you may want to update it in places it has already been used.
- Never edit the same saved display in more than one browser window. There is only a single "temporary" display copy available for editing.
|
The Preview Section lets you specify the height, width, and overflow behavior for the display. |
|
As appropriate to the type of display, the Preview section also lets you set:
| Feature | Description | Table |
LatestValues |
Chart |
Datablock |
Widgtes |
|---|---|---|---|---|---|---|
| Font-Family | CSS-style font-family used throughout the display by default |
|||||
| Fontsize | CSS-style fontsize used throughout the display by default |
|||||
| Background Color | Background color for display | |||||
| Text Color | Text color for display | |||||
| Row Colors | Overrides for individual and/or alternating rows |
|||||
| Grid, Frame, and Axis Colors | Details vary by Chart Type |
