This functionality is available to registered users and above.

 

Here you can define the appearance of QDL.

• Font/Colors
  • Click this button to open a window where you can select the font, the foreground and background colors, and an optional waterwark image.
  • To select a watermark image, it first has to be uploaded, using the Upload File functionality. Here are some sample images that have already been uploaded:
    • clouds.jpg

    • wheat.gif

    • curtains.jpg

• Icons
  • The icons used by QDL (such as the Disclosure Widgets) are selectable — not individually, but in whole sets of them — so you simply select which set you want. Some sets look better on a dark background, while others are better for a light background.
  • You can even develop your own versions of these icons, and upload them so that you and other people can use them. To do this,
    • Download the icons shown in an existing set, by selecting that set from the pop-up, and then clicking the zip icon ().
    • Click the Manifest button to see a list of all of the icons, and where in the interface they are used.
    • Edit the icons that you downloaded.
    • Re-zip the edited icons, and click the Upload button to put them back up on QDL. The icons will be extracted from the zip and put in a folder named after you.
    • To use your icons, select the folder named after you in the pop-up.
    • Note that you only get to do one icon set under your own name, so if you want to do more, you'll have to get friends to upload the other sets under their names.
• Layout
  • The "layout" defines the position of elements in the QDL interface, which is what most people call a "navbar", and which frequently is located on the left-hand side of the screen. This is the QDL default, but you can also go with a top navbar.
  • You can even define your own navbar (or menu system if you also want to do the CSS to make that work). The layouts are authored using the HTML editor that you use for everything else in QDL. Additional CSS definitions have to be done separately. To create a new layout:
    • Navigate to your Sandbox.
    • Click the Action Menu icon (), and select the New Inside option ().
    • Give the layout a title, and click Submit.
    • Click the Action Menu icon (), and next to the Metadata option (), click edit.
    • In the Data Type section, select SKN, and click Submit.
    • Click the Action Menu icon (), and select the Edit Full option ().
    • This opens the full screen editor, where you can create the HTML elements defining the layout. At the top of the screen are images that you can drag into place to set the position of QDL features within your layout. (See Layout Breadcrumbs for more information on these features.)
    • Note that skins can have links to folders in QDL, and those links can be designated to automatically produce fly-outs with links to their sub-folders. (See Left Nav Bar w/ HoverNav for an example.)
      • This happens for list items with the following attribute:
        • onMouseOver="MenuFlyOut(this)"
      • The fly-outs are automatically updated every 24 hours, but if you want to force a refresh, simply re-submit the dialog.
    • Two of these features are mandatory — the QDL item, and the Logout item. If these are not in the layout when you submit it, they will be added at the end (whether that is actually useful or not). So you might as well just position them where you want them before submitting.
    • When you're done, click Submit.
    • Go to your dialog, click the Layout button, and select the layout that you just created.
    • In the event that something doesn't work as expected, and the new interface is difficult to use, you can log out, and when you log back in, select the reset layout option. This will not delete that layout that you created, but it will select the default layout for you. Then you can edit your custom layout to fix the problems, and re-select it in the dialog.
      • If you can't find the Logout button, you can just close the browser and re-launch it, which will clear the previous session and require logging in again, at which time you can opt to reset the layout.
    • If you want other people to be able to use the layout that you created, you have to assign at least read rights to the layout, or they won't be able to see it to select it. If you assign editor rights to other people, they'll be able to make changes to it. (See Rights for more info.)
• Style Sheet
  • If your layout requires CSS to work properly, that has to be defined in a separate post, and then selected using the Style Sheet button.
  • To create a CSS file:
    • Navigate to your Sandbox.
    • Click the Action Menu icon (), and select the New Inside option ().
    • Give the style a title, and click Submit.
    • Click the Action Menu icon (), and next to the Metadata option (), click edit.
    • In the Data Type section, select CSS, and click Submit.
    • Click the Action Menu icon (), and select one of the Edit options ().
    • This opens the full screen editor, where you can create the style elements that you need.
    • Click Submit.
    • Go to your dialog, and select the CSS post that you just defined.
    • As with layouts, if you want other people to be able to use your CSS file, you have to grant them at least read rights.
  • Note that only people who have selected your style sheet will get these styles at response time. So you don't get to define custom styles, and then use those styles in posts to get fancy effects — other people reading your posts, who haven't selected your CSS in their dialog, won't get those effects.
  • Also note that for the layout to be previewed properly (as they are in the Sample Layouts folder), please include an HTML comment at the beginning of the layout, with the statement "include number", where "number" is the ID of the post containing the CSS. (View the text of the layouts below — some of them use this.)

 

Here are all of the images that designate QDL features in a layout, and a description of the functionality (or a link to the documentation on that feature):

 

Layout Breadcrumbs

 

Here are sample layouts, including the default:

 

Sample Layouts