STEP 6: Home Section

From Frontal Wiki

So, you’ve picked out your colors and your menu is the way you want it. Now it’s time to start working on the individual sections of your site. The code you’re working with is written in the order of the menu items. Therefore, let’s start with the Home section first.

Changing the Layout:

Depending on where you’ve placed your menu, you’ll want to modify the layout of your sections to match accordingly. It's important to note that a number of the changes you’ll make to this section can/should be applied to the other sections of your site. Locate the following lines in your document:

// HOME SECTION SETTINGS: //
.homeSection
    {
        margin-left: 200px;
        width: 100% leftover;
    }
// END HOME SECTION SETTINGS //

The above settings match the original menu settings, vertical links in the top left corner of the page. Below are a few examples of alternate settings that might better complement your menu placement. Be sure to copy and replace the entire block of code:

i. Section Left Aligned (for horizontal menus):

// HOME SECTION SETTINGS: //
.homeSection
    {
        margin-top: 60px;
        margin-left: 60px;
        width: 100% leftover;
    }
// END HOME SECTION SETTINGS //

Example:

ii. Section Horizontally Centered:

// HOME SECTION SETTINGS: //
.homeSection
    {
        width: 450px;
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
    }
// END HOME SECTION SETTINGS //

Example:

iii. Section Vertically Centered:

// HOME SECTION SETTINGS: //
.homeSection
    {
        height: 400px;
        width: 100% leftover;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 60px;
    }
// END HOME SECTION SETTINGS //

Example:

iv. Section Horizontally & Vertically Centered:

// HOME SECTION SETTINGS: //
.homeSection
    {
        height: 400px;
        width: 450px;
        margin: auto;
    }
// END HOME SECTION SETTINGS //

Example:

You may want to try each of these examples to understand how each layout looks with your menu. Again, you're encouraged to experiment with these settings to fine-tune your results. Draw comparisons between each of the settings, particularly the content which follows "style=". If you’d like a more detailed explanation of these style settings, take a look at Styles Reference.

Changing the Text Style:

You may notice that the color of the text in this section was not altered when you changed the text color earlier. That's because this text has its own group of settings that you can edit. Locate the following lines in your document:

// HOME TEXT SETTINGS: //
.homeText
    {
font-size:120px;
color: white;
leading: -10px;
margin-top:10px;
    }

You can change the size of the font by editing the value next to "font-size:". To change the color, just replace the color name next to "color:". Lastly, you can control the amount of space between each line of text by changing the value next to "leading:".

(Note that due to a limitation in Flash, the font-size cannot be set larger than 127px. However, you can add a "scale: 2" style to increase any font size by 200%, or "scale: 3" to increase it by 300%, etc.)

Changing the Background Image:

You’ll probably want to change the background image that's featured in the Home section. Locate the following lines in the document (a little less than halfway down, under the "<!-- HOME SECTION -->" header):

<!-- HOME SECTION BACKGROUND IMAGE -->
<img src="assets/images/bw_image1_home.jpg" style="allow-smoothing: true; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: top left;"  />

Note the part of this code, on the second line, that says "src=". This is the location of the image that's used for the background. You'll see more lines like this throughout this guide. To change the image, replace:

assets/images/bw_image1_home.jpg

…with an image location of your choosing. We recommend uploading your image assets to a free service like Photobucket. To add an image that's stored on Photobucket or another somewhere else online, use the image's complete URL. (In Photobucket, you get this URL by going to the image's share option and copying the direct link.) For example:

src="http://i794.photobucket.com/albums/yy224/mbarborak/IMG_0874.jpg"

Or, you might want to remove the background image completely. To do this, simply delete the above lines of code from your document. The background will then be set to the color you defined earlier in Step 3.

Changing The Text:

To change the text displayed in the Home section, locate the following lines of code in your document:

<!-- HOME SECTION TEXT -->
<![CDATA[Created<br>w/<br>Frontal]]>

To change the text, replace:

Created
w/
Frontal

…with your own text. Note that the code "<br>" is used to insert a line break in the text. You can use as many of these as you see fit, or you can leave them out entirely.

You’ve now completely modified the Home section of your site. Review the changes you’ve made and keep them in mind so that you can apply them to the other sections of your site. You may also want to take the time to experiment with your settings until you’re completely satisfied with your results.

</br> </br>