Question

I want create a form to edit the style and html content of a template web page.

Form Page has:

• An input to enter a h1 heading for the page
• A dropdown box to choose a font for the h1
• A dropdown box to select text size
• An input to enter a subtitle
• Controls to change formatting
• etc

This generates Page B, which is mostly formatted already with css, but uses the inputs from the form to edit some styles, like fonts and colours.

I could do this easily if I just posted the the form to Page B, and inlined the css with something like this:

<h1 style="font-size: <?php echo $_POST['h1-font-size'] ?>pt">
    <?php echo $_POST['h1-title']?>
</h1>

But I would prefer to keep the formatting separate from the HTML as these pages may need to be edited by hand in the future. I also want to save the resultant html page and css file for future use.

What is the best and easiest way to do this? I could paste the whole css file into PageB and make page B write it to the server with the specified changes, but this doesn’t seem like a very elegant way of doing things.

Background: comp-sci degree, not much web experience.

Answer 1

I’d suggest set up a stylesheet with all the properties you want to be able to have edited.

Create a ‘field’ in a database (or flat file) for each field you want to be editable from the front-end.

Then make your interface for inputs match these fields.

Save your inputs back into the database.

Write an output function to write your css files from the database if you want to save them down again.

This depends on the scale of the task as to which way will save you the most time now and in the future.