STEP 8: Projects Section - Details

From Frontal Wiki

Now let’s move on to the second part of the Projects section – the project details. Similar to the Projects overview, you’ll want to change the general layout first. Locate the following lines in your document (a little more than 1/5 down in your document):

// PROJECT DETAIL SETTINGS: //
.projectDetails
    {
            margin-left:200px;
            width: 100% leftover;
            height: 100% leftover;
    }
// END PROJECT DETAIL SETTINGS //

This is where the layout for the detail view of your projects is set. The layout for this section is currently set to match the original menu settings. Below are a few examples of alternate settings for the Projects details view:

i. Section Left Aligned (for horizontal menus):

// PROJECT DETAIL SETTINGS: //
.projectDetails
    {
        top: 60px;
        margin-left:200px;
        width: 100% leftover;
        height: 100% leftover;
    }
// END PROJECT DETAIL SETTINGS //

Example:

ii. Section Horizontally Centered:

// PROJECT DETAIL SETTINGS: //
.projectDetails
    {
        top: 60px;
        margin-left:auto;
        margin-right:auto;
        width: 500px;
    }
// END PROJECT DETAIL SETTINGS //

Example:

iii. Section Vertically Centered:

// PROJECT DETAIL SETTINGS: //
.projectDetails
    {
        top: 60px;
        margin-top:auto;
        margin-bottom:auto;
        height:650px;
    }
// END PROJECT DETAIL SETTINGS //

Example:

iv. Section Horizontally & Vertically Centered:

// PROJECT DETAIL SETTINGS: //
.projectDetails
    {
        top: 60px;
        margin:auto;
        width:500px;
        height:650px;
    }
// END PROJECT DETAIL SETTINGS //

Example:

Note the similarities between these lines of code and the ones you used to alter the layout of the Projects overview. Again, you should experiment with these settings to see what you like.

Adding/Removing Images:

Each project in the detail view contains three sample images, but you can easily add and remove photos to suit your needs. Locate the following lines in your document (a little more that 1/2 down in your document):

<!-- PROJECT 1 IMAGES -->
<img src="assets/images/bw_image1.jpg"/>
<img src="assets/images/bw_image2.jpg"/>
<img src="assets/images/bw_image3.jpg"/>

To change the images, replace:

assets/images/bw_image1.jpg

...with the location of the image you'd like to show. To add more images, simply copy one of the lines of code beginning with "<img" and paste it below the last line, then replace its location URL with the URL of the image you want to use. To remove an image, delete the line of code containing its location. Repeat this process for each project detail view until you’ve customized the images for all projects.

Changing Previous/Next Links Font Size:

The "PREVIOUS" and "NEXT" links use the same font-size as the Project Titles links in your project overview. Please refer back to STEP 6 for details.

Changing Text Color:

The color settings for the project details text is set to the same value as the rest of the text in your document. To change the color, refer back to STEP 3.

Also, the color values for the “View All Projects” link and the "PREVIOUS" and "NEXT" links are set to the same values as the project title link in the overview section. Refer back to STEP 6 for details on changing these colors.

Changing Content:

In each project detail view, you’ll need to edit two pieces of text – the project title and its description. Locate the following block of code in your document:

<!-- PROJECT 1 DETAILS -->
 
…with several lines of code in between, terminated by…
 
<!-- END PROJECT 1 DETAILS -->

As mentioned before, all the code within these lines contains the content for the project detail view. Within this block of code, look for the following line:

<text class="titleText">Project 1 Title</text>

This line contains the project title. To edit it, replace Project 1 Title with a title of your choosing. To modify the font size of this title, locate the following lines of code:

// PROJECT TITLE SETTINGS: //
.titleText
    {
          font-size: 12px; 
          margin-top: 25px; 
    }

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

To edit the description for a project, locate the following line:

<text class="summaryText">Lorum ipsum dolor sit amet nomunny adicxipling dolro amet.</text>

To change the description, replace "Lorum ipsum…" with your own description. The size of this text is set to be the same as the description in the overview section. Refer back to STEP 6 for details.

Once you’ve done this for PROJECT 1, repeat the process for each set of PROJECT DETAILS.

Review:

You’ve now completely modified the detail view for all of your projects. Combined with the work done on the Projects overview, you've finished customizing the Projects section of your site! Take a moment to look over your work for the Projects section -- a lot of what was done will be applied to the other sections of your site.

</br> </br>