mNo edit summary |
mNo edit summary Tag: Source edit |
||
(10 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{css nav}} |
||
⚫ | |||
+ | {{tocright}} |
||
⚫ | |||
+ | |||
+ | The default hydradark CSS for bullets in unnumbered lists is as follows: |
||
<syntaxhighlight lang=css> |
<syntaxhighlight lang=css> |
||
Line 7: | Line 11: | ||
} |
} |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
+ | |||
+ | The above gives you <span style="color: #00528c;">'''blue'''</span> bullets: |
||
+ | |||
+ | <span style="color: #00528c; font-size:120%; ">'''{{*}}'''</span> Example |
||
Closer inspection of that dataURL reveals the color code embedded within that string: |
Closer inspection of that dataURL reveals the color code embedded within that string: |
||
− | <div style="overflow-wrap: break-word; word-wrap:break-word; background: #282828; border: #505050 solid 1px; padding: 1em; line-height:1.3em; font-family: monospace,'Courier'; |
+ | <div style="overflow-wrap: break-word; word-wrap:break-word; background: #282828; border: #505050 solid 1px; padding: 1em; line-height:1.3em; font-family: monospace,'Courier';"> |
+ | ul {<br> |
||
+ | list-style-type: disc;<br> |
||
⚫ | list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22<span style="color:pink">'''%23'''</span><span style="color:red">'''00528c'''</span><span style="color:pink">'''%22'''</span>%2F%3E%0A%3C%2Fsvg%3E%0A);<br> |
||
+ | } |
||
+ | </div> |
||
− | To change the color of your bullets, you only need to substitute the hex-code of the color you would prefer. |
+ | To change the color of your bullets, you only need to substitute the hex-code of the color you would prefer. See the examples below. |
+ | == Examples == |
||
⚫ | |||
+ | === White bullets === |
||
+ | <div style="overflow-wrap: break-word; word-wrap:break-word; background: #282828; border: #505050 solid 1px; padding: 1em; line-height:1.3em; font-family: monospace,'Courier';"> |
||
+ | ul {<br> |
||
+ | list-style-type: disc;<br> |
||
+ | list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22<span style="color:pink">'''%23'''</span><span style="color:red">'''FFFFFF'''</span><span style="color:pink">'''%22'''</span>%2F%3E%0A%3C%2Fsvg%3E%0A);<br> |
||
+ | } |
||
+ | </div> |
||
− | + | The above gives you <span style="color: #FFFFFF;">'''white'''</span> bullets: |
|
+ | <span style="color: #FFFFFF; font-size:120%; ">'''{{*}}'''</span> Example |
||
⚫ | |||
+ | <hr> |
||
+ | |||
+ | === Orange bullets === |
||
+ | <div style="overflow-wrap: break-word; word-wrap:break-word; background: #282828; border: #505050 solid 1px; padding: 1em; line-height:1.3em; font-family: monospace,'Courier';"> |
||
+ | ul {<br> |
||
+ | list-style-type: disc;<br> |
||
+ | list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22<span style="color:pink">'''%23'''</span><span style="color:red">'''F37F20'''</span><span style="color:pink">'''%22'''</span>%2F%3E%0A%3C%2Fsvg%3E%0A);<br> |
||
+ | } |
||
+ | </div> |
||
+ | |||
+ | The above gives you <span style="color: #F37F20;">'''orange'''</span> bullets: |
||
+ | |||
+ | <span style="color: #F37F20; font-size:120%; ">'''{{*}}'''</span> Example |
||
+ | |||
+ | == Notes == |
||
⚫ | |||
[[Category:Advanced help]] |
[[Category:Advanced help]] |
||
+ | |||
+ | [[fr:Modifier la couleur des puces]] |
||
+ | [[tr:Mermilerin rengini değiştirme]] |
Latest revision as of 23:56, 23 January 2022
|
The default bullets in an unnumbered list are blue (#00528c in the hydradark skin). This is governed by the ul selector.
The default hydradark CSS for bullets in unnumbered lists is as follows:
ul {
list-style-type: disc;
list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%2300528c%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
The above gives you blue bullets:
• Example
Closer inspection of that dataURL reveals the color code embedded within that string:
ul {
list-style-type: disc;
list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%2300528c%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
To change the color of your bullets, you only need to substitute the hex-code of the color you would prefer. See the examples below.
Examples
White bullets
ul {
list-style-type: disc;
list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%23FFFFFF%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
The above gives you white bullets:
• Example
Orange bullets
ul {
list-style-type: disc;
list-style-image: 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%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%23F37F20%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
The above gives you orange bullets:
• Example
Notes
- The basic hydra CSS uses an image file, but the same CSS can be used to specify a different colored bullet.