TOPIC:

Regarding colors, remember that a little goes a long way.

Although I am certainly no color expert, here are my thoughts on the subject based on what I have seen and learned... (I am hoping that others will chime in here with their thoughts and opinions, also.)

1. Do not feel like you have to color in everything. Look for where a little more color makes the page more appealing. Start off with adding a little bit and adjust it as you go, like seasoning a good meal. Also remember, that color can come from a variety of sources, even the photos on a page.

2. Avoid really intense colors. Frequently, colors can be like spices added to food. You can have too much (or too little) or the wrong combinations. Also, some people will like more "spices" (more color) or a different combination of "spices" (colors). It is important keep in mind that people's perception of color is very subjective and varies, so if you ask for feedback on your colors, get it from *several* people, but do not necessarily expect a consensus.

3. I find that color *contrasts* are frequently what makes a page appealing. In other words, the colors in one part of a page relative to the rest of the page. In my view, anything containing color, such as photos/images on the page can contribute or detract from this. If you have a lot of colorful photos on a page, then you may consider those to be "the color" and just leave the background white for a good color contrast.

4. If you are uncertain as to what colors to work with, then refer to the colors in your selected banner and use different shades of those colors as your "color theme". Most of the banners are created with three or four basic color hues. A "hue" is the base color from the color spectrum. For example, yellow, blue, green, etc. However, even though you may have three color hues to work with when using this approach, remember that there are an infinite number of shades/intensities of those colors you can work with. These theme colors are pre-loaded in the palette of the color pickers for those who wish to use this approach.

5. How to use the color pickers: You can adjust the color hue but clicking and dragging the slider handle up and down in the color hue slider on the right side. You can adjust the color intensity by just clicking and dragging the dot around in the color gradient square to find the intensity that you like.

Steve, I like your points 1-4... on point 5, my color picker is nothing like yours... I would LOVE to have the official TM colors available... I also do not see the slider that you show. Ideas?

silverdalex wrote:

Steve, I like your points 1-4... on point 5, my color picker is nothing like yours... I would LOVE to have the official TM colors available... I also do not see the slider that you show. Ideas?

I just looked at your website... the color pickers are there, but you have to click them to see what I show above. When they are closed they just show a single selected color and a down arrow button. You have to click the down arrow button to see the above. You can find them on the Appearance tab in the Admin Console.

Steve,

When I click on the color pickers (text or background), I get colors, but not the TM theme colors. I end up typing the hex numbers.

Look at the Appearance tab.

You are using the color picker for the editor... that does not have the theme colors because I do not produce that editor... it is 3rd party and I do not control it.

Steve,

Thanks so much. I now realize what color pickers you are referring to. I think your advice about color is good in general--not just the menu font/background colors. This is my latest test page: d32.toastmastersdistricts.org/ClubGrowth.html.

On a slightly different note... is there any way for us to change the CSS for our custom webpages? I realize that inline styles are "css," but it would be nice to have all <p> elements to be TM blue... (or whatever) without having to put that code in each line.

Thanks again,

Alex

You could use a style block, which is considered bad form for the HTML body, but should work. The only catch is that you would want to use it with class names on your paragraphs so you do not inadvertently change the template text, also.

It may just be simpler to put the paragraphs to be affected inside a <div>, which would group them, and then just put the style on the div.

Check the following out for some inspiration...
d16.toastmastersdistricts.org/
d29.toastmastersdistricts.org/

Your <DIV> solution is wonderful. It is funny how we can overlook the simple solutions!

A question... about your <style> solution... I don't like that idea... as you said, it isn't good form... I recently took over the D32 website and after you mentioned the <style> solution, I noticed that several pages have used the <style> tag. Did one of my predecessors type that code in, or does the WYSIWYG editor put it in? I am a little nervous to delete it...

silverdalex wrote:

Your <DIV> solution is wonderful. It is funny how we can overlook the simple solutions!

A question... about your <style> solution... I don't like that idea... as you said, it isn't good form... I recently took over the D32 website and after you mentioned the <style> solution, I noticed that several pages have used the <style> tag. Did one of my predecessors type that code in, or does the WYSIWYG editor put it in? I am a little nervous to delete it...

Not sure about the style blocks... I don't think the editor is doing it, but you would need to be more specific about where you are seeing it.

Steve, you really are a great help.

Here is my <DIV> try... My text is now TI blue... d32.toastmastersdistricts.org/Division_B.html

As far as the <STYLE> tag goes, I deleted it from the previous page with no apparent change. I see another example on my homepage... it is embedded within a <p> tag... d32.toastmastersdistricts.org/

I have pasted some code below... the green and red code look like junk code that either someone either (left in / copied&pasted wrong / or is autocode from some program)

<p>District 32 serves Toastmasters in Lewis, Grays Harbor, Thurston, Mason, Clallam, Jefferson, Kitsap, Pierce and Southern King County in Western Washington State <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Generator" content="Cocoa HTML Writer" /><meta name="CocoaVersion" content="1348.17" />
<style type="text/css">p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px 'Helvetica Neue'; -webkit-text-stroke: #000000}
span.s1 {font-kerning: none}
</style>
and also the State of Alaska. Visitors are welcome at our open meetings anytime or at our District Events.</p>

Do you agree that it is junk code? I like to write clean code...

Steve,

I believe that I have answered my own question... In case someone else finds this thread useful, it seems likely to me that a previous webmaster entered their own HTML code... their code was created with a Mac using TextEdit and the Texutil converter... and the html command. This creates an html file that if copied and pasted wrong could create junk code such as what I see...

Thanks again...

Toastmaster colors

midnight blue/navy
#004165 | hsl (201,100,19) | rgb (0,65,101)

silver/gray
#a9b2b1 | hsl (173,5,68) rgb (169,178,177)

khaki/tan
#f2df74 | hsl (50,82,70) | rgb (242,223,116)

burgundy/dark red
#772432 | hsl (349,53,30) | rgb (119,36,50)

crimson/red
#cd202c | hsl (355,72,46) | rgb (205,32,44)