STEP 3: Choose Your Colors

From Frontal Wiki

Now that you have your own portfolio site code (also called a "document") all set up in the Workspace, you’re ready to start customizing your site. Before we begin, you should select a set of colors that you’d like to use. Try to think about what colors you’d like for elements such as the background, text and mouse rollovers. A list of all available colors can be found at :

frontalcode.com/wiki/index.php/Color_names

You can either copy down the names of the colors you like, or refer back to this link as you go. Once you've decided the colors, you’re ready to customize your first piece of code.

Background Color:

In your document, locate the lines that say:

// BACKGROUND COLOR: //
background-color: white ;

To change the background color of the entire site, change "white" to whatever color you’d like (from the list of colors provided by the link above). Then click “Submit” to view this change. Well done –- you’ve made your first customization using Frontal. (Note that the image on the home page is covering the background, so look at one of the other pages to see the change).

Text Color:

Now, let's change the color of the text in your site. NOTE: This color setting doesn't effect the color of text that's also a button/link. Locate the following lines:

// TEXT COLOR: //
color: black ;

Change "black" to the color of your choice.

Menu Background Color:

Next, change the background color for your menu. Locate the following lines:

// MENU BACKGROUND COLOR: //
background-color: white ;

Change "white" to the color of your choice.

Menu Link Colors:

As mentioned above, the colors for the menu links have to be changed separately from the overall text color of your site. Locate the following lines:

// MENU LINK COLORS: //
.menuEntry:link                     { color: gray ; }
.menuEntry:visited                     { color: gray ; }
.menuEntry:hover, .menuEntry:selected:hover     { color: lightgray ; }
.menuEntry:active                    { color: lightgary ; }
.menuEntry:selected, .menuEntry:childSelected     { color: darkorange ; }

As you can see, there are several colors that can be customized for menu links. Here’s a breakdown of what each color corresponds to on your site:

.menuEntry:link - the base color of the menu link, before the user has clicked it

.menuEntry:visited - the color that's displayed once a menu link has been clicked -- lets the user know that they've already viewed that section

.menuEntry:hover, .menuEntry:selected:hover - the color that's displayed when the mouse/cursor is hovering over a menu link

.menuEntry:active - the color that's displayed when a user clicks on a menu link

.menuEntry:selected, .menuEntry:childSelected - the color that's displayed on a menu link when the user is viewing that particular section

Replace each of these with colors of your choosing. We recommend clicking the “Submit” button as you make these changes so that you can get a good understanding of what each color setting looks like in relation to the others.

You’ve now customized the general colors on your site. As we go along, there'll be opportunities to customize the colors of additional specific elements in the different sections.

</br> </br>