How to customize with css special characters like comma , vertical bar, point and so on?

Question

For example I want to have all commas ( or whatever other characters like this: " /, |, &, $ and so on " ) from a text in different colors.

Is this possible?!

Answer 1

You could use spans to separate the commas or ampersand from the rest of the text

<p> Some text <span style="color:pink">/</span> Some text ....</p>

I don't think is yet possible using only css

In PHP you could theme your text with preg_replace to add the spans around the comma, ampersand, slash, etc.

http://php.net/manual/en/function.preg-replace.php

or str_replace

<?php str_replace(',', '<span class="pink">,</span>', $string); ?>

For wordpress add the suggested code to your template file, for more info about templating see: http://codex.wordpress.org/Stepping_Into_Templates

Answer 2

This do the thing:

add_filter('the_content', 'testfilter');

function testfilter($content) {

    $pattern = ' | '; //search content for ' | ' string
    $replacement = '<span class="test">' . $pattern . '</span>'; //replace it with the same term but inside a span
    $replaced = str_replace($pattern, $replacement, $content);
    return $replaced;

}

Credits goes here: * http://wordpress.org/support/topic/str_replace-content-with-a-span-class *