Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Different background on different pages

Featured Replies

Hi all,

 

I've been trying to get different background images/colours etc showing up for various pages I've got on my new portfolio/blog site. See Evan Eckards site to see what I mean: http://www.evaneckard.com

 

I'm using wordpress as the CMS behind the whole thing. I have been searching high and low on google and through the wordpress forums and I can't find a solution (I did find one post but the person just said, "I've found a more elegant solution to this" and that is all he said...).

 

 

Basically what is needed is for PHP to find the page ID and then output it into the body tag. Now the code that was suggested is as follows:

<?php if (is_page()){ ?>
  <body class="page-<?php the_ID(); ?>">
<?php }else{?>
  <body>
<?php } ?>

 

Now if I use the above code, it does work but outputs the body tag as <body.page-> with no ID. Further research has shown me that the above code is actually meant to work within the 'loop' of wordpress.

 

 

Can anybody offer a solution to this or point me in the right direction?

The way I've done it is to explode the URL using PHP and work out what area of the site I'm in, and then add a body ID. Something like this:

 

	<?php
$requestURI = explode('/', $_SERVER['REQUEST_URI']);
$area = $requestURI[2];

switch ($area) {
	case 'blog':
		$bodyId = 'blog';
		break;
	case 'services':
		$bodyId = 'services';
		break;
	case 'portfolio':
		$bodyId = 'portfolio';
		break;
	case 'about':
		$bodyId = 'about';
		break;
	case 'contact':
		$bodyId = 'contact';
		break;
	default:
		$bodyId = 'home';
}
?>
<body id="<?=$bodyId?>">

  • Author

Interesting Rob - where do you place this code? Above the body tag in the header?

 

Thanks for this, still looks like greek but it seems to be making sense... I think, ha ha ^_^

Sorry, I should've explained it a bit better — I posted that message before I went out and didn't have time to expand on my code.

 

Replace your <body> tag with all that code above, as at the bottom you can see it has a body tag already there.

 

What the code actually does it "explodes" the URL that someone types into the browser and works out what the main directory (area) of the site you're on.

 

For example: If you went to http://example.com/about/ then the value for $area would be "about". That would then match the "about" in the switch statement and in turn would set $bodyId to "about". The same goes for http://example.com/about/something/random/ – that would still only match "about". If you went to http://example.com/portfolio/ it would match to "portfolio", and so on.

 

If you don't have anything after the main URL (http://example.com/) then $area will be blank (or won't match anything) and the switch statement would use it's default match and set $bodyId to "home". This adds a bit of protection incase someone gets frisky and tries to do something silly. I'm not sure what effect it has on error pages yet, I'll have to test that out at some point.

 

I'm sure you have plenty to go on now, though… it's a start! :)

  • Author

Brilliant, cheers for the helping (hand) code - will give it a bash and see if I can get it to work... need to get my site up so I can compete with your redesign in an upcoming WDF competition B)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.