Changes: Changing the color of bullets

Revision as of 11:23, 7 February 2020

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.

@@ Line 1: / Line 1: @@
+{{css nav}}
-The default bullets in a numbered list are <span style="color: #00528c;">blue</span> (<tt>#00528c</tt> in the hydradark skin). This is governed by the <tt>ul</tt> selector. The default hydradark css for bullets in unnumbered lists is as follows:
+{{tocright}}
+The default bullets in an unnumbered list are <span style="color: #00528c;">'''blue'''</span> (<tt>#00528c</tt> in the hydradark skin). This is governed by the <tt>ul</tt> selector.
+The default hydradark CSS for bullets in unnumbered lists is as follows:
-<pre>
+<syntaxhighlight lang=css>
 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);
 }
+</syntaxhighlight>
-</pre>
+The above gives you <span style="color: #00528c;">'''blue'''</span> bullets:
-Closer inspection of that dataurl reveals the color code embedded within that string:
+&nbsp;<span style="color: #00528c; font-size:120%; ">'''{{*}}'''</span> Example
-: <tt>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%23</tt>'''00528c'''<tt>%22%2F%3E%0A%3C%2Fsvg%3E%0A</tt>
+Closer inspection of that dataURL reveals the color code embedded within that string:
-To change the color of your bullets, you only need to substitute the hex-code of the color you would prefer. For example:
+<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';">
-: <tt>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%23</tt>'''F37F20'''<tt>%22%2F%3E%0A%3C%2Fsvg%3E%0A</tt>
+ul {<br>
+&nbsp;&nbsp;&nbsp; list-style-type: disc;<br>
+&nbsp;&nbsp;&nbsp; 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. See the examples below.
-will give you an <span style="color: #F37F20;">orange</span> bullet.
+== Examples ==
-The basic hydra css uses an image file, but the same css can be used to specify a different colored bullet.
+=== 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>
+&nbsp;&nbsp;&nbsp; list-style-type: disc;<br>
+&nbsp;&nbsp;&nbsp; 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:
+&nbsp;<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>
+&nbsp;&nbsp;&nbsp; list-style-type: disc;<br>
+&nbsp;&nbsp;&nbsp; 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:
+&nbsp;<span style="color: #F37F20; font-size:120%; ">'''{{*}}'''</span> Example
+== Notes ==
+* The basic hydra css uses an image file, but the same css can be used to specify a different colored bullet.
 [[Category:Advanced help]]
+[[fr:Modifier la couleur des puces]]
+[[tr:Mermilerin rengini değiştirme]]