WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 08.03.2021 18:11:56

losttrip
Member

[Solved] Different Background Colours on specific pages

I'm sure I've read how to do this in the past, but can't find any posts using (English) search.

How ca I set up my template and css to show a different background colour on different pages?  I don't want to load a different template for each page, if that's possible to avoid.

Thanks!

Last edited by florian (10.03.2021 06:45:28)

Online

#2 08.03.2021 18:15:02

florian
Administrator

Re: [Solved] Different Background Colours on specific pages

index.php

...
<body class="p<?php echo PAGE_ID; ?>">
...

stylesheet

...
body.p1 {background-color:green;}
body.p23 {background-color:purple;}
etc.
...

Last edited by florian (08.03.2021 18:15:18)


Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

Liked by:

losttrip

#3 08.03.2021 21:18:26

losttrip
Member

Re: [Solved] Different Background Colours on specific pages

Thank you so much.  Works as expected.

Online

Liked by:

florian

#4 22.03.2021 20:24:13

losttrip
Member

Re: [Solved] Different Background Colours on specific pages

Is it possible to use something similar within a js file?

I am using fancybox 3 and I need to style the lightbox background colour specific to it's page background colour.  It is semi-transparent by default, but they want it opaque.

The line of code in the fancybox js file is this:

[== JavaScript ==]
<div class="fancybox-bg"></div>

But if I add the page id code to it:

[== JavaScript ==]
<div class="fancybox-bg p<?php echo PAGE_ID; ?>"></div>

the result source code is:

[== HTML ==]
<div class="fancybox-bg p<?php echo PAGE_ID; ?>"></div>

The page_id code is ignored or maybe not recognized?

I hope that makes sense.

Online

#5 23.03.2021 07:38:00

bernd
Developer

Re: [Solved] Different Background Colours on specific pages

This code is generated through a javascript so you can't write PHP in it, .js files will not be parsed by PHP
But the page_id should also be available as javascript variable PAGE_ID so

[== JavaScript ==]
 baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
      '<div class="fancybox-bg p' + PAGE_ID + '"></div>' +
      '<div class="fancybox-inner">' +

will do the trick


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

florian, losttrip

#6 24.03.2021 11:41:50

losttrip
Member

Re: [Solved] Different Background Colours on specific pages

That worked perfectly bernd.  Thank you so much.

Online

Board footer

up