List of Colors with custom Pager Style #2
This page uses a Hashtag List to show all standardized color names supported by web browsers.
Each page show 7 colors; pagers are added automatically.
The Table is styled using Bootstrap 3 default theme classes.
Color |
Name |
Hex |
Red |
Green |
Blue |
|
Pink |
#FFC0CB |
255 |
192 |
203 |
|
LightPink |
#FFB6C1 |
255 |
182 |
193 |
|
HotPink |
#FF69B4 |
255 |
105 |
180 |
|
DeepPink |
#FF1493 |
255 |
20 |
147 |
|
PaleVioletRed |
#DB7093 |
219 |
112 |
147 |
|
MediumVioletRed |
#C71585 |
199 |
21 |
133 |
|
LightSalmon |
#FFA07A |
255 |
160 |
122 |
Processed this Hashtag Markup:
<# start list for colors;
show 7 rows per page;
#>
<# start header #>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Color</th>
<th>Name</th>
<th>Hex</th>
<th class="text-right">Red</th>
<th class="text-right">Green</th>
<th class="text-right">Blue</th>
</tr>
</thead>
<# end header #>
<# start row #>
<tr>
<td style="background-color:<# hex #>"> </td>
<td><# name #></td>
<td class="monospace"><# hex #></td>
<td class="text-right"><# r #></td>
<td class="text-right"><# g #></td>
<td class="text-right"><# b #></td>
</tr>
<# end row #>
<# start footer #>
</table>
<# end footer #>
<# end list #>
<style>
.hashtag-pager a:link,
.hashtag-pager a:visited {
color: #0063E3;
display: block;
float: left;
padding: 3px 6px;
text-decoration: none;
}
.hashtag-pager a:hover { border:solid 1px #666666; }
.hashtag-pager .hashtag-pager-previous-off,
.hashtag-pager .hashtag-pager-next-off { border:hidden 1px; padding:3px 6px; }
.hashtag-pager .hashtag-pager-next a,
.hashtag-pager .hashtag-pager-previous a { border:hidden 1px; padding:3px 6px; }
.hashtag-pager .hashtag-pager-next a:link,
.hashtag-pager .hashtag-pager-previous a:link,
.hashtag-pager .hashtag-pager-next a:visited,
.hashtag-pager .hashtag-pager-previous a:visited { border:hidden 1px; padding:3px 6px; }
.hashtag-pager .hashtag-pager-next a:hover,
.hashtag-pager .hashtag-pager-previous a:hover { border:hidden 1px; }
.hashtag-pager .hashtag-pager-active { background:transparent; color:#FF0084; padding:4px 7px; }
</style>