STEP 9: About Section

From Frontal Wiki

Now that you’ve tackled the Home and Portfolio sections of the site, it's time to customize the layout of the About section. Locate the following lines of code in your document (about 2/5 of the way down):

// TEXT SECTION SETTINGS: //
.textSection
        {
            top: 40px;
            margin-left: 200px;
            width: 100% leftover;
            height: 100% leftover;
            scroll: auto;
            overflow: hidden;
        }
// END TEXT SECTION SETTINGS //

Below are some alternate About section settings, helping you align this page with both your menu and other sections. Be sure to copy and replace the entire block of code if you decide to use one of them.

i. Section Left Aligned (for horizontal menus):

// TEXT SECTION SETTINGS: //
.textSection
    {
        top:80px;
        width: 100% leftover;
        height: 100% leftover;
        margin-left: 60px;
        scroll: auto;
        overflow: hidden;
    }
// END TEXT SECTION SETTINGS //

Example:

ii. Section Horizontally Centered:

// TEXT SECTION SETTINGS: //
.textSection
    {
        top:80px;
        width:650px;
        height: 100% leftover;
        margin-left: auto;
        margin-right: auto;
        scroll: auto;
        overflow: hidden;
    }
// END TEXT SECTION SETTINGS //

Example:

iii. Section Vertically Centered:

// TEXT SECTION SETTINGS: //
.textSection
    {
        width: 100% leftover;
        height: 600px;
        margin-left: 60px;
        margin-top:auto;
        margin-bottom:auto;
        scroll: auto;
        overflow: hidden;
    }
// END TEXT SECTION SETTINGS //

Example:

iv. Section Horizontally & Vertically Centered:

// TEXT SECTION SETTINGS: //
.textSection
    {
        width:650px;
        height: 600px;
        margin: auto;
        scroll: auto;
        overflow: hidden;
    }
// END TEXT SECTION SETTINGS //

Example:

As before, keep in mind the similarities between changing the layout of the About section and changing the layout of the previous sections. And feel free to play with the values.

Changing Text Color:

The color of the text for the About section is the same as the overall text color for the site, which we reviewed earlier in this guide. To get details on this, refer back to STEP 3.

Changing Scrollbar Colors:

If you’d like, you can even alter the colors of the scrollbar. Locate the following lines of code in your document:

// SCROLLBAR SETTINGS: //
.frScrollbarVert [name=trackButton]
    {
        border-color:gray;
    }
.frScrollbarVert [name=slider]:hover
    {
        background-color: darkorange;
    }
.frScrollbarVert [name=slider]:active
    {
        background-color: darkorange;
    }
// END SCROLLBAR SETTINGS //

In this code block, you’ll notice three different color values. The first is the background color of the scrollbar. The second is the color of the slider (the part that you grab) when the mouse is hovering over it. The third is for the color of the slider when the mouse is clicking on it. Change these colors if you wish, and hit the “Submit” button to see the result.

Changing Content:

Now that your colors are all set, you can edit the actual text that’s in your About section. Locate the following lines in your document (close to the end):

<!-- ABOUT SECTION TITLE -->
<![CDATA[<font size="24">About</font><br><br>

Here, you can change the title in the About section by replacing "About" with a title of your choosing. Also, the size of the title can be changed by altering the value after "font size=". Next, you can alter the entire body of text for the About section by locating the following line in your document:

<!-- ABOUT SECTION TEXT -->

Below this line is the body text for the About section. Again, replace this with your own About text. NOTE: <br> is used at the end of each paragraph to create line breaks between them. You can copy this technique, using as many <br> tags as you see fit.

You’ve now completely customized the About section of your site. At this point, you just have a few more steps!

</br> </br>