STEP 7: Projects Section - Overview

From Frontal Wiki

If you view your current Projects section, you’ll notice that it can be broken down into two separate parts: an overview of all projects and a detail view of individual projects. For now, let’s focus on the Projects section overview.

Once again, you’ll want the layout of the portfolio overview to match up with the layout of the Home section and the menu. Locate the following lines in your document (about 1/6 of the way down in your document):

// PROJECTS OVERVIEW SETTINGS: //
.overviewSection
    {
        margin-top: 40px;
        margin-bottom: 0px;
        margin-left: 160px;
        margin-right: 0px;
        scroll: auto;
        width: 100% leftover;
        height: 100% leftover;
        overflow: hidden;
    }
// END PROJECTS OVERVIEW SETTINGS //

The above shows the original menu settings. Below are a few alternative examples for the Projects overview section that might better complement your menu layout. Be sure to copy and replace the entire block of code:

i. Section Left Aligned (for horizontal menus):

// PROJECTS OVERVIEW SETTINGS: //
.overviewSection
    {
        top: 60px;
        margin-bottom: 0px;
        margin-left: 60px;
        margin-right: auto;
        scroll: auto;
        width: auto;
        height: 100% leftover;
        overflow: hidden;
    }
// END PROJECTS OVERVIEW SETTINGS //

Example:

ii. Section Horizontally Centered:

// PROJECTS OVERVIEW SETTINGS: //
.overviewSection
    {
        top: 60px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        scroll: auto;
        width: 750px;
        height: 100% leftover;
        overflow: hidden;
    }
// END PROJECTS OVERVIEW SETTINGS //

Example:

iii. Section Vertically Centered:

// PROJECTS OVERVIEW SETTINGS: //
.overviewSection
    {
        top: 60px;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 60px;
        margin-right: auto;
        scroll: auto;
        width: auto;
        height: 650px;
        overflow: hidden;
    }
// END PROJECTS OVERVIEW SETTINGS //

Example:

iv. Section Horizontally & Vertically Centered:

// PROJECTS OVERVIEW SETTINGS: //
.overviewSection
    {
        top: 60px;
        margin: auto;
        scroll: auto;
        width: 750px;
        height: 650px;
        overflow: hidden;
    }
// END PROJECTS OVERVIEW SETTINGS //

Example:

Now that you've selected your Projects overview layout, you may want to go back and fine-tune some of the settings. Note the similarities between these settings and the ones you used for your Home section. Most of what you’ve done above can apply to all sections of your site.

Adding a Project Item:

Once you have your Projects overview laid out the way you want it, it’s time for you to start editing the actual content. First, you should figure out how many items you would like to feature in Projects. The Frontal Portfolio Site demo features ten items, but you could easily add/remove items to suit your needs. Locate the following lines in your document (they're about halfway down the document):

<!-- PROJECT 1 OVERVIEW: -->
<div class="thumbnails"><img class="frMarker" src="assets/images/bw_image1_thumb.jpg" mgrId="siteMenu" elemNdx="Detail 1" />
    <text class="frMarker projectEntry" mgrId="siteMenu" elemNdx="Detail 2">Project 2 Title</text>
    <text class="summaryText">Lorum ipsum dolor sit amet nomunny adicxipling dolro amet.</text>
</div>   
<!-- END PROJECT 1 OVERVIEW -->

These are all the settings for the first item in your Projects overview. If you explore the document just below this block of code, you’ll notice that there are similar blocks of code for each project in the overview, labeled by number. Each of these blocks corresponds to a set of Project details. Locate the following lines in your document (they follow the last PROJECT OVERVIEW code block):

<!-- PROJECT 1 DETAILS -->
<div name="Detail 1"  parentElemNdx="Projects">
 
…which is followed by several lines of code and then terminated with…
 
<!-- END PROJECT 1 DETAILS -->

This block of code represents the project details for project 1. Don’t worry right now about the remainder of the code in this block – that'll be covered in Step 7. For now, let's focus on the second line, particularly where it says:

div name=”Detail 1”

If you look back at the project overview code, you’ll notice two places where that same name is used ( "Detail 1" ). This is the line of code that connects these two pieces – telling one to look for the other.

So, to add another project overview to Projects, you’ll also need to add a corresponding project detail. To see how this is done, let’s add a PROJECT 11.

Highlight and copy PROJECT 1 OVERVIEW – that is, everything from:

<!-- PROJECT 1 OVERVIEW: -->
 
…to…
 
<!-- END PROJECT 1 OVERVIEW -->

…including the above lines of code. Now, paste this block of code below the following line in the document:

<!-- END PROJECT 10 OVERVIEW -->

Next, change "Detail 1" to "Detail 11". Be sure to change this in both places where it appears. You’ll also want to change "PROJECT 1" to "PROJECT 11". You’ve just added a new item to your Projects overview. However, for it to work properly, it’s going to need a set of project details to link to.

Highlight and copy PROJECT 1 DETAILS –- that is, everything from:

<!-- PROJECT 1 DETAILS -->
 
…to...
 
<!--  END PROJECT 1 DETAILS -->

…including the above lines of code. Now, paste this block of code below:

<!--  END PROJECT 10 DETAILS -->

Again, you’ll want to change "Detail 1" to "Detail 11". Also, change "PROJECT 1" to "PROJECT 11". Finally, in the project detail code block, this appears four times: <manager id="projectSlideshow">. You'll need to change each instance to say "projectSlideshow11".

You’ve just added an item to your Projects overview, a set of project details for that item, and you’ve created linking between them! Go ahead and repeat the steps above if you need to add additional items to your Projects overview.

Removing a Project Item:

You may want to feature less than ten projects in your portfolio. Removing an item from the Projects overview is far simpler than adding one -- you just delete the corresponding PROJECT OVERVIEW and PROJECT DETAIL code blocks. For this example, we’re going to remove the last project in Frontal’s Portfolio example – PROJECT 10. Locate the following lines of code:

<!-- PROJECT 10 OVERVIEW: -->
 
…which is followed by several lines of code that ends with…
 
<!-- END PROJECT 10 OVERVIEW: -->

To remove this item from you overview, simply delete these lines of code (and everything in between). You’ve just removed PROJECT 10 from your Projects overview. You should also delete its details since we won't be using them anymore. Locate the following lines of code:

<!-- PROJECT 10 DETAILS: -->
 
…which is followed by several lines of code that ends with…
 
<!-- END PROJECT 10 DETAILS: -->

To remove these details, again, just delete these lines of code and everything in between. You’ve now completely removed PROJECT 10 from your portfolio. Repeat the steps above if you need to delete additional items from your Projects overview.

Edit Projects Overview Content:

Now that you have your Projects overview set up with as many items as you need, you can start to fill in the information for each project. This example will use PROJECT 1, but the same will apply to all projects in the overview. Locate the following lines of code:

<!-- PROJECT 1 OVERVIEW: -->
<div class="thumbnails">
    <img class="frMarker" src="assets/images/bw_image1_thumb.jpg" mgrId="siteMenu" elemNdx="Detail 1" />
    <text class="frMarker projectEntry" mgrId="siteMenu" elemNdx="Detail 1">Project 1 Title</text>
    <text class="summaryText">Lorum ipsum dolor sit amet nomunny adicxipling dolro amet.</text>
</div>   
<!-- END PROJECT 1 OVERVIEW -->

For each overview, you’ll want to change three things: the image for the project, the title, and the description. Below is a list of each piece of code that should be replaced:

assets/images/bw_image1_thumb.jpg - this should be replaced with the location of the image you would like to use; thumbnail images should be 195x80 (you can change these dimensions if you'd like)

Project 1 Title - replace with your own project title

Lorum ipsum dolor...amet. - replace with a very brief description of the project, or delete the "Lorum ipsum...amet." text if you don't want a description

You can also change the size of the project description. Locate the following lines of code:

// PROJECT SUMMARY SETTINGS: //
.summaryText
    {
        font-size: 10px;
    }

To change the font size, change the value next to "font-size:"

Repeat this process for each of the items in your portfolio overview until each one contains the correct information.

Edit Overview Image Rollover:

You’ll notice that whenever you rollover an overview image with your mouse, the border around that image changes (from white to orange). You may want to change these colors to match the other colors you’ve been working with so far. Locate the following code (about 1/4 of the way down in your document):

// PROJECT OVERVIEW IMAGE SETTINGS //
.thumbnails img
    {
        border-width: 3px;
        border-color: white;
    }
 
.thumbnails img:hover
    {
        border-color: darkorange;
    }
// END PROJECT OVERVIEW IMAGE SETTINGS //

The first set of properties control the border of the overview image before the mouse hovers over it. The second set controls the border once the mouse is hovering over the image. Change the value next to "border-width" to enlarge or reduce the border around the image. And change the color name following both instances of "border-color" to change the colors. Click the “Submit” button to see how your changes look.

In addition to border color, we can change other properties of the image as well. Below are a few examples of alternate rollovers for the overview images. Try cutting and pasting these blocks of code to see them in action:

i. Image Transparent to Opaque:

// PROJECT OVERVIEW IMAGE SETTINGS //
.thumbnails img
    {
        border-width: 3px;
        border-color: white;
        alpha:.5;
    }
 
.thumbnails img:hover
    {
        border-color: darkorange;
        alpha:1;
    }
// END PROJECT OVERVIEW IMAGE SETTINGS //

ii. Image Blurred to Focused:

// PROJECT OVERVIEW IMAGE SETTINGS //
.thumbnails img
    {
        border-width: 3px;
        border-color: white;
        blur: 5;
    }
 
.thumbnails img:hover
    {
        border-color: darkorange;
        blur: 0;
    }
// END PROJECT OVERVIEW IMAGE SETTINGS //

iii. Image Scaled 90% to 100%:

// PROJECT OVERVIEW IMAGE SETTINGS //
.thumbnails img
    {
        border-width: 3px;
        border-color: white;
        scale: .9;
    }
 
.thumbnails img:hover
    {
        border-color: darkorange;
        scale: 1;
    }
// END PROJECT OVERVIEW IMAGE SETTINGS //

Notice that with very simple changes to these blocks of code, completely different effects can be achieved for image rollover. You may want to play with these settings until you’ve found an effect you’re happy with. You can view more details on these settings, as well as others at: Styles Reference

Edit Overview Project Title:

You’ve probably noticed that the title of each project in your overview is also a link to that project's details (the thumbnail also links to that project's details). You’ve also probably noticed that the color for each title hasn't changed along with the other text in your site, or along with the colors of your main menu items. This is because these overview project titles have their own color settings. Locate the following block of code in your document (about 1/5 of the way down your document):

// OVERVIEW TITLE COLOR SETTINGS //
.projectEntry:link                 { color: gray; }
.projectEntry:visited                 { color: gray; }
.projectEntry:focus, .projectEntry:hover     { color: lightgray; }
.projectEntry:active                { color: lightgray; }

As you can see, these settings are very similar to the menu item color settings. If you’d like, you can refer back to Step 3 for a description of these settings. All you have to do is change the color name next to "color:" to whatever you prefer.

Next, you might also want to change the font size of each title. Locate the following block of code in your document:

// OVERVIEW TITLE SIZING //
.projectEntry
{
    font-size: 12px;
}

To alter the size of your overview titles, change the value next to "font-size:". You can also change the amount of space above the title (between the image and title) by changing the value next to "margin-top:".

Review:

You’ve now made some pretty serious changes to your Projects section. You’ve learned how to add/remove items, change their settings, and even edit their rollovers. You’ve also covered a lot of code in the process. You may want to review what was covered in this section before proceeding. The rest of the changes in this guide will be less complicated, but they'll also refer to what you’ve accomplished up to this point.

</br> </br>