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

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Working with PHP to change CSS classes

Hi there,

For my project, I need to change the background image at the top of my page depending on what page the user is on. However, the background image is stored in a CSS class so I am unsure what to do when working with PHP variables to achieve this... Or is there another way?

header.php:

<!-- Header -->
    <!-- The class that needs to be changed! -->
    <div class="contact-test-intro-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-message">
                        <h1><?php echo $pageHeading ?></h1>
                        <h3><?php echo $pageSubHeading ?></h3>
                        <hr class="intro-divider">
                        <ul class="list-inline">
                        <?php
                        if($is_blog) {
                          echo "<a href='blogentryone.php' class='btn btn-default btn-lg network-name'>Read more</a>";
                        } else {
                            foreach($listItems as $item => $url) {
                            echo "<li>";
                            echo "<a href='".$url."' class='btn btn-default btn-lg'><i class='fa fa-".strtolower($item)." fa-fw'></i><span class='network-name'>".$item."</a>";
                            echo "</li>"; }
                        }; ?> </ul>
                    </div>
                </div>
            </div>
        </div>

CSS: 

.intro-header {
    padding-top: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/intro-bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

.about-intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/code-bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

.contact-intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/contact-bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

Please excuse the DRY CSS, haha.

2 Answers

Lindsay Sauer
Lindsay Sauer
12,029 Points

Hi James,

To change the background dynamically, you'll need to change the class on the div that will have the background CSS applied to it. I'm not familiar with what method you're using to identify the page, be it reading the current active page, having a variable set before the header is loaded on each page, etc. but you'd want to change the line to something like:

 <!-- The class that needs to be changed! -->
 <div class="<?=$myHeaderClass?>">

where $myHeaderClass is a string equal to the class name you want to apply (about-intro-header, contact-intro-header, etc) based on the page. E.g.

 $myHeaderClass = "about-intro-header";

Another method would be to create a php page that generates the css dynamically, something like this:

First, set an id on the div that will have the CSS applied to it:

 <div id="headerContainer">

Then, create a php file to generate your css:

site_custom_css.php

 <?
header("Content-type: text/css");

    $headerBackgrounds = array();
    $headerBackgrounds['about_page.php'] = '../img/code-bg.jpg';
    $headerBackgrounds['contact_page.php'] = '../img/contact-bg.jpg';

     $currentPage = basename($_SERVER['PHP_SELF']);

 ?>
      #headerContainer {
           background: url($headerBackgrounds[$currentPage]) no-repeat center center fixed;
      }

You can make this cleaner and I think there's better ways to do it, but it's just a proof of concept, if it helps!

James Barrett
James Barrett
13,253 Points
James Barrett
James Barrett
13,253 Points

Thanks, the first technique worked perfectly.

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

James,

I found a pertinent post on WordPress.org. Go to Wordpress .org and search " custom header by page". The first listing will be WordPress-> Support -> Custom Header Per Page". Give it a read especially the posts by esmi and Kim Blake.

Good Luck,

Bob