Customizing Color Text

EFHutton

I am trying to highlight text within a text box with a unique color. Here is what I want to create...

"I have split my work into two separate areas Portraits, Sports and Events PSE PROtography and FocalPoint Photography and to try and make it easier for you to see the wide breadth of my work."

How can I do this?

The Mechanic

Hi EFHutton,

In order to make editorial changes like this you will need to use an HTML Content Block instead of a Text Content Block. You can then address this text you want to alter the color on with inline HTML Styling or standard CSS. You can enter the related CSS in the tab found in the same HTML Content block.

Please give this a try. Report back if you need more help.

Thanks -Scott

denisegoldberg

Once you follow Scott's recommendation to create an HTML box instead of a text box you will need to construct the HTML and CSS to change the colors.

Based on your example showing several letters in the middle of the line in a different color I believe your best bet is to use <span class= referencing CSS that changes the color. I worked up an example that you can use as a starting point.

Drag in an HTML box.

Click the CSS tab and add this (or something like this, you'll want to customize it to match your color and size desires):

.fontViolet { color: #91219E ;  /* color = deep violet */
    font-size: 120% ;
  	font-weight: bold ;
}
.fontBlack  { color: #000 ;    } /* color = black       */

You will then reference the classes in the HTML tab. Here's what I have placed in the HTML tab for my example:

<span class="fontBlack">this text starts as black,</span>
<span class="fontViolet"> changes to violet,</span>
<span class="fontBlack"> and then back to black.</span>

I've attached a screen shot below showing the result of placing this HTML content element on a page.

I usually use the color chart at http://www.december.com/html/spec/color.html. There are many other color charts available online if you'd prefer something different.

Information on HTML span - http://www.sitepoint.com/web-foundations/span-html-element/
Help on CSS font property - http://www.w3schools.com/cssref/pr_font_font.asp

--- Denise

EFHutton

The Mechanic wrote: »

Hi EFHutton,

In order to make editorial changes like this you will need to use an HTML Content Block instead of a Text Content Block. You can then address this text you want to alter the color on with inline HTML Styling or standard CSS. You can enter the related CSS in the tab found in the same HTML Content block.

Please give this a try. Report back if you need more help.

Thanks -Scott

Thanks. That is exactly what I needed.