August, 2010

 Which color boxes control what areas of the website  Color scheme- using HTML color codes for custom colors  Background Color code- changing the appearance of your homepage and custom pages with alternate colors behind your text  Background Image code- Use an image within a table to place text over the image

Box 1 determines your border color. Box 2 determines your focus box border color. Box 3 determines the color of your template’s text on contact pages and on the left margin for your contact info. Box 4 will determine the font color for your written text on most templates until the text is changed on the page editor using the "Text Color” button.

 Your website admin tool will allow for a wide variety of color choices, however, you may already have what you want in mind. If so, knowing the HTML Color codes for each color can save you time.  Using the HTML Color code, we can determine the specific color, rather than moving around the color selector looking for the closest match.  This site will provide the complete list of HTML colors and codes:  The Keller Williams color codes can be found in the Marketing section of MyKW.kw.com. (login required)

1.) Click on the color box you wish to edit 2.) When the custom color box opens, paste in the color code you wish to use here.

 Have you ever wanted to change the color of the page behind your text? While this is not a feature that is readily available in the website admin tool, with a little knowledge of HTML, and a lot of patience, you can change the background color of your template.  Do: be prepared for a bit of trial and error when it comes to applying this change.  Do: save your existing page/content into MS Notepad, should you need to return the page to the way it was.  Don’t: Forget to save your work.

 These techniques are far beyond the intended use of your KW Agent Website.  You will encounter problems, frustration and need to clear your cache often when applying this type of customization.  KW Support cannot restore your page to it’s prior version. This information is not stored anywhere other than on your website and on your computer if you have saved a copy.  If you have any apprehension at all about making this type of change please do not attempt to alter your background color or any other HTML aspect of your website.  Finally, until you are very comfortable with HTML, please practice by creating new pages. Once you have successfully applied this method to a few practice pages, you can attempt changing your Homepage and/or any of your custom pages.

1.) Open to the page on your site where you want to edit the background color. Click the “source button” and use CTRL + A to highlight all of the source code on the page. Right- click and select “copy.”

2.) Open Microsoft Notepad and paste in the source code you just copied. Should you need to recover your prior page, this will be the only way to do so. 3.) Return to your website admin tool and click towards the top of your source code to remove the highlighting of your source code.

4.) At the top of the source code, insert the following HTML Tag: (note the color code of # being used to create a dark grey background. Replace this with any other color code to customize to your liking.) 5.) At the very bottom of the source code on the page, paste in this piece of code to close out the command:

6.)Now, click the “Source” button again and you will notice that you may not see your text. 7.)Using your mouse to highlight all of the text, use the “Text Color” button to choose the best color for your text on top of your new background color.

Source for background image table: <TABLE BORDER="0" BACKGROUND=“YOU PHOTO’s URL HERE"> With a small piece of source code, you can add an image inside of a table that will allow you to type text and even insert hyperlinks. *This image will be used for our example. Note the dark image will work well with a lighter text color

1.) Upload your photo to section 1.3 before you begin. 2.) While creating a new page, use the insert/edit image button to browse for your photo. When the box opens, copy the address of the photo and set it in Notepad. 3.) Enter the following in the source mode of your page editor: <TABLE BORDER="0" BACKGROUND=“YOUR PHOTO’S URL HERE">

4.) Once you have pasted the code in, click “source” again to preview the new table. 5.) Click on the table so that the small boxes appear at the edges and then drag to display the complete image. 6.) Click inside of the image to enter text, hyperlinks, more tables, etc…

7.) Preview your progress and click save.

8.) Navigate to your new page to see your Background image table in action

 Please keep in mind that, much like the background color tables we have worked with before, this can take a bit of patience to complete.  This tag will not work, nor will your table be editable in Mozilla FireFox. This is one of the many non-standard codes still usable in Internet Explorer. Please create these pages in IE. The results will still be visible in FireFox.  Depending on the original size of your image, it may dupelicate or “tile” if you exceed the size of the image. Use larger images for more page coverage and smaller ones for specific areas on the page.  Try setting this up on a test or practice page first before applying this to a live page on your site.  Before you apply this tag to a live page and/or after you have gotten the background table on you site, be sure to copy the source code and save it somewhere, should you need to restore any prior version of your page.  Consider display. Please be sure that the image you use is either a dark image with a light colored text or visa versa. If it is difficult to see your text or links your viewers may loose interest in the page.