Help with css file code

[cerberus]

Hi all,

I have this css code to change the background colour of the webpages, however it changes all the backgrounds on all the pages.

Is their a way of not letting it change the background colour on certain pages ?

For instance if I did not want to change the background colour of the index.php page how would I go about it ?

All the instructions I find online tell how to implement the code, but not how I can stop it changing the background colour on certain pages.

This is the code to change the background colour :

Code: Select all

body {
background: #3ab43e;
background: linear-gradient(90deg,rgba(58, 180, 62, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 149, 0, 1) 100%);
}

The image below is how it looks, but I want it to not change the background colour of a few individual pages, say index.php for a example

(actually its the cart, signup, account etc pages I dont want the background colour to change on, so index.php is just to give me a idea)

Thank you,
Steve

Screenshot 2026-09-24 184545.png

[Omar_one]

Let the hook handle it for you.

Save this file as custom_background.php in /includes/hooks/shop/siteWide/

Code: Select all

<?php
class hook_shop_siteWide_custom_background {
    function listen_injectBodyStart() {
        // 1. Get the current page filename (e.g., 'index.php', 'login.php')
        $current_page = basename($_SERVER['PHP_SELF']);

        // 2. CHOOSE YOUR PAGES HERE: 
        // Add any page filename where you WANT the gradient background to appear.
        // If a page is NOT in this list, it will keep your store's default background.
        $allowed_pages = [
            'index.php',
            // 'login.php',      // Uncomment or add more as needed
            // 'about_us.php',  // Uncomment or add more as needed
        ];

        // 3. Check if the current page is in your chosen list
        if (in_array($current_page, $allowed_pages)) {
            $output = '
            <style>
                body {
                    background: #3ab43e;
                    background: linear-gradient(90deg, rgba(58, 180, 62, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 149, 0, 1) 100%);
                }
            </style>
            ';
            return $output;
        }
    }
}

[cerberus]

Thank you Omar,

I think I get the idea, I will try it out tonight.
(I was thinking all I had to do was input the page name and display none in the css code so it did not change the background on the named page )

Have a good evening

[cerberus]

That worked thank you Omar

[Omar_one]

@cerberus
Have you had a look at the Visual Designer add-on by @Mort_Lemur ? check it out
app.php/addons/free_addon/phoenix_visual_designer/

it makes things so much easier than digging through CSS and hooks!

[cerberus]

Thank you Omar_one for the info.

At the moment I agree its a pain digging through the code and CSS, but at the same time I am learning a little more each day while doing it the manual way (and by making loads of mistakes)

One day I may go for that addon but not just yet