1 reply [Last post]
Adweb's picture
Last seen: 8 years 6 weeks ago
Timezone: GMT-5
Joined: 2014-10-18
Posts: 1
Points: 2


I may be overcomplicating this but here is what I would like to do.

In my Wordpress blog I use the visual editor, type my content and publish. I go to the live view of the site and there is my content just how I typed it. As expected.

What I would like to see is that any time I type in a specific word, say "Titanium" I want the browser to display each part of the word in a different color...for example, the "Ti" in color #3366ff, "tan" in color #ff6600, and "ium" in color #99cc00

I want this change to take affect site-wide every time the word Titanium is used so that I don't have to do the following every time I use the word:

<span style="color: #3366ff;">Ti</span><span style="color: #ff6600;">tan</span><span style="color: #99cc00;">ium</span>

Does that make sense?

Surely there is a simple solution with CSS...can anyone help?

Hugo's picture
Last seen: 7 years 47 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why do you think there must

Why do you think there must be a simple solution with CSS? CSS is a visual styling language that applies it's code to a generated DOM which is the last thing to be compiled before sending back to the browser you are asking for a dynamic behaviour to be applied, something that happens in this instance at the scripting server side level.

CSS can not really act dynamically you want to mark a specific character string with certain html syntax, either a class or element wrapping like a span but on something that might or might not be generated for a given view. The only way you could do this would be to filter the content before it's stored in the DB or on return from DB so you would need to build a function to parse the the_content() and check for a specific string and for white space if found do a string replace, then return the the_content() via one of the WP post filters. Unless you have good PHP skills and WP knowledge I'm afraid this will be difficult to do.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me