CODEWITHSUNDEEP
cssuser-interfaceclientcustomization
Kevin
Kevin

Reputation: 99

Customizable CSS

I would like to create a website that would allow the client to log in to an admin page which would allow them to customize their site, such as their site's background color etc. Is there is a way to permanently change the CSS of the UI of the website without directly accessing the CSS file? Essentially allowing a non-programmer to customize their own styles.

Upvotes: 0

Views: 75

Answers (1)

Jesus Lugo
Jesus Lugo

Reputation: 796

If you're doing a custom development, let's say you want to customize things like: font size, UI colors, page width, etc... the way to go would be something like:

  • Having a UI (at the backend) for all customizable things... that way user doesn't have to touch code, just select things, like filling a form.
  • With that information stored at the database, you will generate CSS styles accordingly, for instance, if you have a setting for "header background color" (with a nice color picker), you will generate a style like #header { background-color: #000 } (let's say that user selected black).
  • You have here two options: putting all styles inside a <style> tag at the <head>, or using a separate stylesheet (which I'd recommend, for good practices sake), if you do a separate stylesheet, you'll have to write the file at the filesystem, and be sure of: custom stylesheet loads after the site stylesheet (or write all styles with greater specificity).

That way you're not modifying permanently the site stylesheet, but adding an additional style layer which will override the default styling.

Now, if you want to go on deep waters, I'd recommend to work with sass... you could set a on-server sass compiling environment, and, when user selects modifications, you just modify the variables on the sass, and re-generate the CSS which will be loaded at the site.

Hope this helps.

Upvotes: 1

Related Questions