File list hyperlink color

Dashboard
1

Noob question:
Using code from natcl for file listing
File upload and delete in Dashboard · GitHub
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

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

To no avail.

Here is the template:

 <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!

2

This might help HTML Styles CSS

3

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

[{"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

<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

<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>
4

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

5

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