Different word, different colour {CSS}

Shibby-Shabs · 11-07-2011, 01:07 PM

When I looked at the source you're tags showed like this:

HTML Code:

<span class="tags">

          <i> <a href="http://www.adamwingie.com/tagged/tag">tag</a></i>

       

          <i> <a href="http://www.adamwingie.com/tagged/tagging">tagging</a></i>

       

          <i> <a href="http://www.adamwingie.com/tagged/tag">tag</a></i>

       

          <i> <a href="http://www.adamwingie.com/tagged/test">test</a></i>

       </span>

This doesn't work because that is in one class, it would need to be like:

HTML Code:

<span class='tags'><!-- Tag 1 --></span>
<span class='tags'><!-- Tag 2 --></span>
<span class='tags'><!-- Tag 3 --></span>

Edit: On Tumblr go to Appearance >> Custom HTML and find (Ctrl+F) something in the css part of the page that refers to "tags", copy and paste and then post here.

hamheyelliot · 11-07-2011, 01:14 PM

Originally Posted by Shibby-Shabs

This doesn't work because that is in one class, it put need to be like:

Not necessarily, each tag can then be defined as .tags a so this next snippet should work:

First take the tags out of <i> tags and we'll italicize them in the css.

Use

.tags a {font-style: italic}
.tags a:nth-child(1) {color:#111111}
.tags a:nth-child(2) {color:#111111}
.tags a:nth-child(3) {color:#111111}
.tags a:nth-child(4) {color:#111111}

and go on for as long as you need replacing the colours.

Shibby-Shabs · 11-07-2011, 01:51 PM

Originally Posted by elliot

Not necessarily, each tag can then be defined as .tags a so this next snippet should work:

First take the tags out of <i> tags and we'll italicize them in the css.

Use

.tags a {font-style: italic}
.tags a:nth-child(1) {color:#111111}
.tags a:nth-child(2) {color:#111111}
.tags a:nth-child(3) {color:#111111}
.tags a:nth-child(4) {color:#111111}

and go on for as long as you need replacing the colours.

I see what you mean, I think, but what I mean is each separate tag would need to be in a difference <span class='tags'> otherwise if there all in one then the colour would remain.

hamheyelliot · 11-07-2011, 02:03 PM

Originally Posted by Shibby-Shabs

I see what you mean, I think, but what I mean is each separate tag would need to be in a difference <span class='tags'> otherwise if there all in one then the colour would remain.

They wouldn't need new spans, because there are individual <a> tags within the span tags which seperate themselves from each other, that's why you can use .span a combined with the nth-child property.

Shibby-Shabs · 11-07-2011, 02:10 PM

Ok, of course, I was missing the "a" when I was reading it. +rep too because as apart of my confusion I read about nth-child on w3schools and learnt something

Adam · 11-07-2011, 02:22 PM

Originally Posted by elliot

They wouldn't need new spans, because there are individual <a> tags within the span tags which seperate themselves from each other, that's why you can use .span a combined with the nth-child property.

Got it working, thanks a bunch you two - very helpful!

Shibby-Shabs · 11-07-2011, 02:35 PM

You sure did and it looks great, nice job man!

**HotelUser** · 11-07-2011, 02:46 PM

I took a Javascript approach to this, and wrote the following short function:

Example: http://develop.davzy.com/test3.php

HTML Code:

<html> 
	<head> 
		<script> 
			function setColour(selectorid,word,colour)
			{
			var content = document.getElementById(selectorid).innerHTML;
			document.getElementById(selectorid).innerHTML = content.replace(word,'<span style="color: ' + colour + '">' + word + '</span>');
			}
		</script> 
	</head> 
	<body> 
		<div id='randomdiv'>
		        This is an example of some test you want different colours.
		</div>
		<script>
			setColour('randomdiv','test','orange');
			setColour('randomdiv','different','red');
			setColour('randomdiv','example','pink');
		</script>
	</body> 
</html>

Adam · 11-07-2011, 03:36 PM

I knew it'd be easily possible in Javascript but I really don't want use it. I believe CSS is the better language of the two.

Even still though, that wouldn't fit a dynamic model, would it? With no set words as it changes for every post.

Joe! · 12-07-2011, 07:25 PM

Glad you got there in the end

nth-child is really quite useful

Thread: Different word, different colour {CSS}

Thread Tools

Posting Permissions