{"id":179,"date":"2011-12-20T08:31:08","date_gmt":"2011-12-20T08:31:08","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=179"},"modified":"2011-12-20T08:34:32","modified_gmt":"2011-12-20T08:34:32","slug":"how-to-change-the-bullet-size-and-color-css","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/how-to-change-the-bullet-size-and-color-css\/","title":{"rendered":"How to change the bullet size and color with CSS"},"content":{"rendered":"

\"\"<\/a>The following code snippet help you change the bullet size and color of your unordered lists.
\nWe are using simple CSS code to do that<\/p>\n

1. Create your bullet list image via Adobe Photoshop or you can use another image editor to do that (e.g Pixelmator).
\nSave the image as a transparent png image file. Upload the png file to your website, put that inside the images folder for convenience
\n2. Add the following to style.css or custom.css<\/p>\n

 ul { list-style-image: url('images\/dot.png'); list-style-type: none; }<\/pre>\n","protected":false},"excerpt":{"rendered":"
The following code snippet help you change the bullet size and color of your unordered lists. We are using simple CSS code to do that 1. Create your bullet list image via Adobe Photoshop or you can use another image editor to do that (e.g Pixelmator). Save the image as a transparent png image file. […]<\/p>\n","protected":false},"author":1,"featured_media":180,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54,5],"tags":[55,70,6,7],"class_list":["post-179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippet","category-wordpress","tag-code-snippet-2","tag-css","tag-wordpress-2","tag-wp"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/csslogo.png?fit=200%2C180&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-2T","jetpack-related-posts":[{"id":290,"url":"https:\/\/pixert.com\/blog\/override-css-property-right-to-left\/","url_meta":{"origin":179,"position":0},"title":"Override CSS property right to left","author":"Pixel Insert \/ Pixert","date":"March 4, 2013","format":false,"excerpt":"\u00a0 This case is an example on how to override CSS property right to left We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left Recently, I installed Floating AdSense plugin for WordPress. It's very helpful to\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":289,"url":"https:\/\/pixert.com\/blog\/full-screen-background-on-wp-login-page\/","url_meta":{"origin":179,"position":1},"title":"Full Screen Background on WP Login Page","author":"Pixel Insert \/ Pixert","date":"March 5, 2013","format":false,"excerpt":"The following function add full screen background on WP Login page 1. Open functions.php in your theme directory 2. Add this function to functions.php [text] \/\/ LOGIN - full background function my_login_style() { ?>