Forum

Thread tagged as: Question, Configuration

Changing CSS Files In Header According To Page

Is there a way to include different CSS files in a header according to which page is displayed? I have a main-header.php file in layouts and I'd like to avoid having to make a new one when the only change requires is linking to a different CSS file. I vaguely remember seeing something like this in the docs but I can't find it, happy to just be pointed towards it if it's there. Here's my current main-header.php code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/universal.css">
    <link rel="stylesheet" href="/css/main.css">
    <!-- Perch Meta -->
    <?php
    $domain        = 'https://'.$_SERVER["HTTP_HOST"];// TODO: Check Protocol
    $mainurl           = perch_page_url(array(
                                            'hide-extensions'    => true,
                                            'hide-default-doc'   => true,
                                            'add-trailing-slash' => false,
                                            'include-domain'     => true,
                                        ), true);
    $mainsitename      = "Relative Paths Podcast";
    $pagetitlename = " - Relative Paths Podcast";
    $sharing_image = '/images/default_fb_image.jpg';

    PerchSystem::set_var('domain',$domain);
    PerchSystem::set_var('mainurl',$mainurl);
    PerchSystem::set_var('mainsitename',$mainsitename);
    PerchSystem::set_var('pagetitlename',$pagetitlename);
    PerchSystem::set_var('sharing_image',$sharing_image);

    perch_page_attributes(array(
        'template' => 'default.html'
    ));
    ?>
<!-- Google Analytics -->
<?php perch_content('Analytics'); ?>
</head>
    <body>
        <div class="wrapper">
            <header class="main-header">
                <nav class="main-nav">
                    <?php perch_pages_navigation(array(
                            'hide-extensions' => true,
                    )); ?>
                </nav>

            </header>
Mark Phoenix

Mark Phoenix 0 points

  • 4 years ago
Lexi McGee

Lexi McGee 3 points

4 years ago 
<?php if(perch_pages_title(true) == "Cats") { ?>
<link rel="stylesheet" href="/css/cats.css">
<?php } ?>

That's one way to do it. It isn't very ''scalable'' though.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I use a page attribute to do this sort of thing. When I want certain CSS or JS included on a specific page, I flip the page attribute for that page and add it conditionally.
Mark Phoenix

Mark Phoenix 0 points

4 years ago

Thanks Drew, that works. I've implemented it as follows, but I had to add supress="true" to prevent the option being echoed onto the page. Is that expected or did I do something in an off the reservation way?

main-header.php

<link rel="stylesheet" href="<?php perch_page_attribute('css', array('template' => 'bits.html')) ;?>">

bits.html (attrebutes file)

<perch:pages id="css" label="CSS File." help="Caution! Changing this option can break your website!" type="text" size="m" divider-before="Admin Only Options" suppress="true" />

Ta
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

If you're also use that template on the page, then yes, it's expected.
Mark Phoenix

Mark Phoenix 0 points

4 years ago

Lexi McGee said:

<?php if(perch_pages_title(true) == "Cats") { ?>
<link rel="stylesheet" href="/css/cats.css">
<?php } ?>

That's one way to do it. It isn't very ''scalable'' though.

Thanks Lexi. I think Drews solution works well and scales well.