STEP 10: Contact Section

From Frontal Wiki

As was the case with the other sections of your site, you should begin by altering the layout of the Contact section. Currently, the settings for the Contact section are set up to be exactly the same as your About section settings. For details on this, refer back to STEP 8.

Changing Text Color:

The text color for your contact information is the same as the global text color settings you saw at the beginning of this guide. To edit, refer back to STEP 3.

Changing Link Settings/Colors:

To edit the settings for the links in your Contact section, locate the following lines in your document (about 2/5 of the way down your document):

// CONTACT LINK SETTINGS //
.contactLink
    {
        margin-top:3px;
        font-size: 12px;
    }
 
// CONTACT LINK COLORS //
.contactLink:link                 { color: black; }
.contactLink:visited                 { color: black; }
.contactLink:focus, .contactLink:hover    { color: lightgray; }
.contactLink:active                { color: lightgray; }

At this point, this block of code should look very familiar to you. These setting are pretty much identical to the link settings you modified in the project overview. For a review on how to update these settings, refer back to STEP 6.

Edit Contact Information:

To edit your contact information, locate the following lines (towards the end of your document):

<!-- CONTACT INFORMATION -->
<textformat leading="6"><font size="16">
My Name<br>
1234 Main Street<br>
New York, NY 12345<br>
</font></textformat>

Simply replace the above contact information with your own.

Edit Email Link:

To change the text in the email link and the email address that it's linking to, locate the following lines in your document:

<!-- CONTACT EMAIL LINK -->
<text class="frLink contactLink" href="mailto:myname@emailaddress.com" target="_blank">myname@emailaddress.com</text>

To change this link, replace both instances of "myname@emailaddress.com" with the email address that you'd like to use.

“Created w/ Frontal” Link:

Locate the following lines in your document:

<!-- FRONTAL LINK -->
<text class="frLink contactLink" href="http://frontalcode.com" style="margin-top: 30px;" target="_blank">Created w/ Frontal</text>

We ask that you leave this link in as a show of support for Frontal (pretty please!). However, if you do want to remove it, just delete the above lines.

At this point, you've learned how to edit the colors, menu, layout, and content of each section of your portfolio site. As mentioned before, it's recommended that you review your work thus far.

</br> </br>