watch 01:25
Jurassic World: Dominion Dominates Fandom Wikis - The Loop
Do you like this video?
Play Sound
|
By default, the sort arrows on sortable tables are black for Hydra wikis, and white for HydraDark wikis. If you use a dark background color for table headers on Hydra, or a light one on HydraDark wikis, the sort arrows can be difficult to see. Use the following code to switch arrow colors.
Contents
Switch to white arrows
/* White sort arrows on sortable tables */
table.jquery-tablesorter th.headerSort {
background-image: url(/skins/HydraDark/images/dark/sort_both.png?8a792) !important;
}
table.jquery-tablesorter th.headerSortUp {
background-image: url(/skins/HydraDark/images/dark/sort_up.png?a6fb9) !important;
}
table.jquery-tablesorter th.headerSortDown {
background-image: url(/skins/HydraDark/images/dark/sort_down.png?5514d) !important;
}
Switch to black arrows
/* Black sort arrows on sortable tables */
table.jquery-tablesorter th.headerSort {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%209%22%20height%3D%229%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M14.5%205l-4%204-4-4zM14.5%204l-4-4-4%204z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}
table.jquery-tablesorter th.headerSortUp {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%204%22%20height%3D%224%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6.5%204l4-4%204%204z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}
table.jquery-tablesorter th.headerSortDown {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%204%22%20height%3D%224%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M14.5%200l-4%204-4-4z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}
Table headers with backgrounds or gradients
If your table headers are styled with background images or colour gradients, the same selectors should include that styling. For example (this example uses white arrows):
.skin-hydradark table.jquery-tablesorter th.headerSort {
background-attachment: scroll;
background-image: url(/skins/HydraDark/images/dark/sort_both.png?8a792), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
background-repeat: no-repeat, repeat;
background-position: center right, center center;
padding-right: 21px;
}
.skin-hydradark table.jquery-tablesorter th.headerSortUp {
background-attachment: scroll;
background-image: url(/skins/HydraDark/images/dark/sort_up.png?a6fb9), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
background-repeat: no-repeat, repeat;
background-position: center right, center center;
padding-right: 21px;
}
.skin-hydradark table.jquery-tablesorter th.headerSortDown {
background-attachment: scroll;
background-image: url(/skins/HydraDark/images/dark/sort_down.png?5514d), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
background-repeat: no-repeat, repeat;
background-position: center right, center center;
padding-right: 21px;
}