Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP Build a Basic PHP Website (2018) Building a Media Library in PHP Adding Active States to the Navigation

Sean Flanagan
Sean Flanagan
33,232 Points
Posted by Sean Flanagan
Sean Flanagan
33,232 Points

Extra credit

Hi.

I'm stuck on the Extra Credit challenge Alena Holligan has given us for this Stage.

https://teamtreehouse.com/library/build-a-basic-php-website

I've created a new file called about.php. Then I went to header.php and added this line:

<li class="about<?php if ($section == "about") { echo " on"; } ?>"><a href="about.php"></a></li>

I'm not sure how to create an icon, or to modify the CSS file to display it or make room for it in the menu.

Here's a snapshot of my workspace.

https://w.trhou.se/cz79dng2v3

Thanks in advance for any help.

2 Answers

Alena Holligan
STAFF
Alena Holligan
Treehouse Teacher
Alena Holligan
Alena Holligan
Treehouse Teacher

To add the word "About" you'll need to add it between the "a" tags.

<li class="about<?php if ($section == "about") { echo " on"; } ?>"><a href="about.php">About</a></li>

To add an image, you'll have to upload a new image and then change the CSS. In css/styles.css look at the following items for examples:

.header .nav li a {
    ....
}

Because we've use the same image in different position, we changed the position as follows:

.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
Sean Flanagan
Sean Flanagan
33,232 Points
Sean Flanagan
Sean Flanagan
33,232 Points

So if I put something like

.header .nav .li.about a {background-position: 55px -450px;}

would that work?

Alena Holligan
Alena Holligan
Treehouse Teacher
Alena Holligan
Alena Holligan
Treehouse Teacher

there isn't an image for the about page, so you'd have to upload your own image if you want one