Updating the css file

Hi,

To update a css file with CMS Builder, here are the basic steps:

1. Rename .css file extension to .php so you can run PHP code.
example: style.css to style.php

2. Run the Admin > Code Generator to get the code need to publish content in the style.php page.

3. Add code to output one upload image URL if an image has been upload or else if not image, display default image:

<?php foreach ($site_settingsRecord['background_image'] as $index => $upload): ?>
 body {
 background-image: url("<?php echo htmlencode($upload['urlPath']) ?>");
 }
 <?php break; // only show one uploaded image ?>
<?php endforeach; ?>

<?php if(!$site_settingsRecord['background_image']) : //if no images have been uploaded, display default image ?>
 body {
 background-image: url("background.jpg");
 }
<?php endif; ?>

That should be it.

Hi Damon

How do I link to this new file style.php

The original link to the css is <link rel="stylesheet" href="css/style.css">
What should it be now?

Thanks

Hi,

Change this:

<link rel="stylesheet" href="css/style.css">

to this:

<link rel="stylesheet" href="css/style.php">

Hi Damon

Did all that, but when I copy the files over to the server all styles are lost. So the page display completely wrong.

Paul

I missed this part. Add this code to the very top of your style.php file:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

Hi,

From your initial post, I thought that you wanted to update the background image for the whole site from one place in CMS Builder.

It sounds like instead, you want to change the background image for each event. This changes how things would be setup.

Since you need to get the record number for the event that is being displayed, having the background image URL in a separate CSS file won't work. Instead, you need to add this code into your events detail pages:

<style>
<?php foreach ($guided_toursRecord['images'] as $index => $upload): ?>
body {
background-image: url("<?php echo htmlencode($upload['urlPath']) ?>") !important;
}
<?php break; // only show one uploaded image ?>
<?php endforeach; ?>
</style>

This code will display the uploaded image URL to use for the background image and it uses the !important to take precedent over the default background image in your CSS file. You still need to have a background image in the CSS file so that if a background image isn't uploaded for an event, it will fall back on the background image set in the CSS file.

You won't need to run any PHP in your CSS file so it can be changed back to style.css and any PHP code removed.

Let me know how this works out for you.