# File list hyperlink color

**URL:** <https://discourse.nodered.org/t/file-list-hyperlink-color/54190>\
**Category:** Dashboard\
**Created:** [24 November 2021 00:17 UTC](https://discourse.nodered.org/t/file-list-hyperlink-color/54190 "2021-11-24T00:17:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ekovaks](https://avatars.discourse-cdn.com/v4/letter/e/ea666f/32.png) [@ekovaks](https://discourse.nodered.org/u/ekovaks)\
**Post date:** [24 November 2021 00:17 UTC](https://discourse.nodered.org/t/file-list-hyperlink-color/54190/1 "2021-11-24T00:17:50Z")

</div>

Noob question:  
Using code from natcl for file listing  
[File upload and delete in Dashboard · GitHub](https://gist.github.com/natcl/5805a1141b1212d2c55c1781b9dbd15b)  
but my question is a basic one for using a template and coloring of hyperlinks. I want to change the hyperlink color from blue (it is too contrasting with the background to see). I've tried all sorts of combinations of

```auto
        a:link, a:visited, a:hover, a:active
        {
           color: #000000;
           text-decoration: none;
         }

```

To no avail.

Here is the template:

```auto
 <table width="100%">
    <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>
    {{#payload}}
        <tr>
            <td><a color:#1C1C1C; text-decoration: none; href="/download?filename={{name}}" target="blank">{{fname}}</a></td>
            <td>{{stat.size}}</td>
            <td>{{stat.created}}</td>
            <td>{{stat.changed}}</td>
        </tr>
    {{/payload}}
</table>

```

just need the href filename to come up as white or grey (or any other color than blue).  
Thanks!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [24 November 2021 10:42 UTC](https://discourse.nodered.org/t/file-list-hyperlink-color/54190/2 "2021-11-24T10:42:38Z")

</div>

This might help [HTML Styles CSS](https://www.w3schools.com/html/html_css.asp)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [25 November 2021 12:20 UTC](https://discourse.nodered.org/t/file-list-hyperlink-color/54190/3 "2021-11-25T12:20:00Z")

</div>

I am guessing that you are then using the ui-template to display the table as you give no indication. This would work if you outputted the template to msg.template. Or you could do it all in the ui-template and angular ng-repeat.  
Here is an example of both

```auto
[{"id":"21087e9d.fa4dca","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"stat\":{\"size\":23,\"created\":23,\"changed\":27},\"name\":\"tom\",\"fname\":\"tom\"}]","payloadType":"json","x":150,"y":680,"wires":[["358562c3.50dcce","7253e457.537274"]]},{"id":"358562c3.50dcce","type":"template","z":"c791cbc0.84f648","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\na:link {\n color: red;\n}\n\n/* visited link */\na:visited {\n color: green;\n}\n\n/* mouse over link */\na:hover {\n color: hotpink;\n}\n\n/* selected link */\na:active {\n color: \n</style>\n<table width=\"100%\">\n <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>\n {{#payload}}\n <tr>\n <td><a href=\"/download?filename={{name}}\" target=\"blank\">{{fname}}</a></td>\n <td>{{stat.size}}</td>\n <td>{{stat.created}}</td>\n <td>{{stat.changed}}</td>\n </tr>\n {{/payload}}\n</table>","output":"str","x":360,"y":680,"wires":[["a7450355.49e15"]]},{"id":"7253e457.537274","type":"ui_template","z":"c791cbc0.84f648","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<style>\na:link {\n color: red;\n}\n\n/* visited link */\na:visited {\n color: green;\n}\n\n/* mouse over link */\na:hover {\n color: hotpink;\n}\n\n/* selected link */\na:active {\n color: \n</style>\n<table width=\"100%\">\n <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>\n <tr ng-repeat=\"rows in msg.payload\">\n <td><a href=\"/download?filename={{rows.name}}\" target=\"blank\">{{rows.fname}}</a></td>\n <td>{{rows.stat.size}}</td>\n <td>{{rows.stat.created}}</td>\n <td>{{rows.stat.changed}}</td>\n </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":330,"y":740,"wires":[[]]},{"id":"a7450355.49e15","type":"ui_template","z":"c791cbc0.84f648","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":540,"y":680,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

standard mustache templete outputted to `msg.template`

```auto
<style>
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: 
</style>
<table width="100%">
    <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>
    {{#payload}}
        <tr>
            <td><a href="/download?filename={{name}}" target="blank">{{fname}}</a></td>
            <td>{{stat.size}}</td>
            <td>{{stat.created}}</td>
            <td>{{stat.changed}}</td>
        </tr>
    {{/payload}}
</table>

```

ui-template using ng-repeat

```auto
<style>
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: 
</style>
<table width="100%">
    <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>
        <tr ng-repeat="rows in msg.payload">
            <td><a href="/download?filename={{rows.name}}" target="blank">{{rows.fname}}</a></td>
            <td>{{rows.stat.size}}</td>
            <td>{{rows.stat.created}}</td>
            <td>{{rows.stat.changed}}</td>
        </tr>
</table>

```

---

<div class="post-metadata">

**Author:** ![ekovaks](https://avatars.discourse-cdn.com/v4/letter/e/ea666f/32.png) [@ekovaks](https://discourse.nodered.org/u/ekovaks)\
**Post date:** [25 November 2021 20:55 UTC](https://discourse.nodered.org/t/file-list-hyperlink-color/54190/4 "2021-11-25T20:55:55Z")

</div>

> [@E1cid](#):
>
> ```auto
> [{"id":"21087e9d.fa4dca","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"stat\":{\"size\":23,\"created\":23,\"changed\":27},\"name\":\"tom\",\"fname\":\"tom\"}]","payloadType":"json","x":150,"y":680,"wires":[["358562c3.50dcce","7253e457.537274"]]},{"id":"358562c3.50dcce","type":"template","z":"c791cbc0.84f648","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\na:link {\n color: red;\n}\n\n/* visited link */\na:visited {\n color: green;\n}\n\n/* mouse over link */\na:hover {\n color: hotpink;\n}\n\n/* selected link */\na:active {\n color: \n</style>\n<table width=\"100%\">\n <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>\n {{#payload}}\n <tr>\n <td><a href=\"/download?filename={{name}}\" target=\"blank\">{{fname}}</a></td>\n <td>{{stat.size}}</td>\n <td>{{stat.created}}</td>\n <td>{{stat.changed}}</td>\n </tr>\n {{/payload}}\n</table>","output":"str","x":360,"y":680,"wires":[["a7450355.49e15"]]},{"id":"7253e457.537274","type":"ui_template","z":"c791cbc0.84f648","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<style>\na:link {\n color: red;\n}\n\n/* visited link */\na:visited {\n color: green;\n}\n\n/* mouse over link */\na:hover {\n color: hotpink;\n}\n\n/* selected link */\na:active {\n color: \n</style>\n<table width=\"100%\">\n <tr><th>File Name</th><th>Size</th><th>Created</th><th>Changed</th></tr>\n <tr ng-repeat=\"rows in msg.payload\">\n <td><a href=\"/download?filename={{rows.name}}\" target=\"blank\">{{rows.fname}}</a></td>\n <td>{{rows.stat.size}}</td>\n <td>{{rows.stat.created}}</td>\n <td>{{rows.stat.changed}}</td>\n </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":330,"y":740,"wires":[[]]},{"id":"a7450355.49e15","type":"ui_template","z":"c791cbc0.84f648","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":540,"y":680,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
> 
> ```

100%. Perfect. Thank you so much. It now seems simple.  
Cheers.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 December 2021 20:56 UTC](https://discourse.nodered.org/t/file-list-hyperlink-color/54190/5 "2021-12-25T20:56:41Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.