I’ve been trying to wrap my head around a good way to do this, but so far have come up empty, and needed some guidance.
Basically, what I have at the moment is a style selector, which gives 10 pre defined styles for the site that a user can choose from. Most of them are grotesque, and are merely proof of concept.
This is controlled by PHP and mysql. When a user logs in, and slects a non-default style, it is added against their user record in the DB. The site then refreshes, and loads the selected style.
It works really well, but now I want to try and have some granular control. For example, I would like users to be able to pick their own header background colour, heading text colour, sub heading colour and some font sizes.
It is a fairly trivial thing, and if I can’t find a way to implement it, then so be it.
My initial thought was to have a table that has columns for each customizable part of the size, e.g. font size, colours etc. In the table, would be a record for each user. They then use some interface to pick and choose what they want, and then add it to the table.
My issue, was then what to do with the values that I retrieve from the DB. I would have liked to insert them straight into a CSS file, but I don’t think this is possible without some server configuration changes, that I couldnt get to work.
So does anyone have any suggestions on the best way to do this, if there is any way at all.
Regards
Eds
You have several ways to do this.
You may specify CSS properties directly in the
styleattribute of HTML tags, but that can quickly become tedious as you might have to insert code in scattered areas in the middle of your content, making maintenance harder.You can also put all style definitions between
<style></style>tags inside the<head>section, which partly eliminates the disadvantage of mixing content with presentation.Finally, it is also possible to produce CSS files with PHP using database informations. Rename your stylesheet something.php, then put this at the top of the file :
This tells PHP that the content it will generate needs to be sent as a CSS file, so that the user’s browser knows that it’s a stylesheet. All that’s left to do is to correctly reference your “mutable” stylesheet in the PHP script that holds your HTML content :
This will allow you to use this kind of things in your “CSS” file :
However, if you care about performance, the latter solution may need some improvement using the Cache-control header, to avoid reloading the CSS file whenever the user follows a link in your website.