Ideas

Add document type icons for links to external documents inside of a Text Block element and Link element.

The Document element allows you to upload a document to your site and the element on the site inherits a nice icon specific to the type of document (pdf, doc, xls, etc). This works great for documents hosted and stored directly on the site.

For documents that are stored on an external site, it would be nice to be able to specify a CSS tag or something that could add the same document type icon to the link. An example would be in a Text Block that has a bulleted list of links to external documents. I'd like to have a small icon next to each link that gives the user a visual feedback that those links are for documents that can be downloaded. Maybe just a simple CSS tag that can be entered into the link properties to indicate what kind of icon to add.

It could also be useful for the Link element when linking to an external document to have an appropriate document type icon added in addition to, or instead of, just an arrow.

  • Scott Slater
  • Sep 25 2020
Frequency Daily
Which sport(s) does this apply to: Not Sport Specific
Organization type Association/Club
  • Attach files
  • Scott Slater commented
    29 Sep 10:52pm

    I was able to create a useable solution using the following CSS in the head code of the page.

    <style>

    .link-pdf {

    background-image: url(/app_images/docIconPdf.svg?1599244175);

    }

    .link-doc {

    background-image: url(/app_images/docIconWord.svg?1599244175);

    }

    .link-xls {

    background-image: url(/app_images/docIconExcel.svg?1599244175);

    }

    .link-pdf, .link-doc, .link-xls {

    background-size: 16px 16px;

    background-repeat: no-repeat;

    min-height: 16px;

    padding-left: 22px;

    padding-top: 0;

    line-height: 1.2;

    }

    </style>

    You can then add "link-pdf", "link-doc", or "link-xls" as the style on the Advanced tab of the link properties. This works for links included inside a Text Block. The style uses the XS size icon to match the default line height.