Skip to content

Instantly share code, notes, and snippets.

@kevinvess

kevinvess/bullet-color-example.html

Last active December 22, 2015 20:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinvess/6528045 to your computer and use it in GitHub Desktop.
Save kevinvess/6528045 to your computer and use it in GitHub Desktop.
Download ZIP
This javascript/jquery snippet will allow you to dynamically change the bullet color of all unordered lists in a given content block while keeping the original text color set by the CSS. This is particularly useful when dealing with a CMS that will output the content block and the design calls for the bullet color to be different than the text c…
Raw
bullet-color-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list bullet color change demo</title>
<style>
body {
color: #666;
}
</style>
</head>
<body>
<div class="content">
<ul>
<li>Only the bullet color changes.</li>
<li>This text color should still inherit the color set by the styles</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
bullet-color-script.js
jQuery(window).load(function(){
var bulletColor = '#3399FF';
$('.content ul').not('nav ul').each(function() {
var li = $(this).find('> li');
var liColor = $(this).css('color');
li.wrapInner('<span />');
li.find('span').css('color', liColor);
li.css('color', bulletColor);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment