Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 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,235 Points
Sean Flanagan
Sean Flanagan
33,235 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