Member Avatar for sayaan

Hi everybody,
I'm new in this forum, I'm a PHP developer looking for good solutions for changing colors, fonts, styles of a site on the fly. The idea is, the user will be given options to customize his/her web site's font, color of various elements etc. and then the site will be built accordingly. The look and feel will vary based on the user.

Can anyone give me a good solution how this can be done in a very efficient way.

Sayaan

  • 2 Contributors
  • 1 Reply
  • 127 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by PomonaGrange

Dani AI

Generated

For : 's session idea is a simple, workable start for keeping a user's choices during a visit. Sessions are fine for per-browser state, but persistent preferences (across devices or after logout) are best stored as a small theme ID on the user record in the database; anonymous users can use a cookie or localStorage for persistence.

A robust pattern is to keep one baseline stylesheet that uses CSS custom properties, and switch a tiny theme class or a small per-user variable block. That lets the browser cache the main CSS and only change a class or a few variables when the user changes theme:

/* theme.css */
:root {
  --bg: #fff;
  --text: #222;
  --accent: #06c;
  --ui-font: system-ui, sans-serif;
}
.theme-dark {
  --bg: #111;
  --text: #eee;
  --accent: #0af;
}
body { background: var(--bg); color: var(--text); font-family: var(--ui-font); }
a { color: var(--accent); }

Then apply the theme class server-side for logged-in users or client-side from saved preferences:

document.documentElement.classList.add('theme-dark'); // or set on the server when rendering HTML

Practical notes: restrict user-selectable values to an allowed set (no free-form CSS) to avoid layout breakage and injection risks; store just an ID or a small JSON blob. Use localStorage for anonymous persistence and enforce a Content Security Policy if generating CSS from user data. Pre-build and cache a handful of theme files when possible to improve performance; if many combinations are needed, prefer CSS variables over generating large inline styles. Finally, keep accessibility in mind — ensure sufficient contrast following WCAG guidance (contrast minimum) and avoid forcing font sizes that defeat user preferences.

Member Avatar for PomonaGrange

There are a lot of ways that you could do this. One way would be to use sessions to store some info.

You can use a form like this one...

<form id="theme" action="" method="post">
<p>
 <select name="Color">
  <option>please select a Color ...</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="orange">Orange</option>
  <option value="purple">Purple</option>
 </select>

 <select name="Font">
  <option>please select a Font ...</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="orange">Orange</option>
  <option value="purple">Purple</option>
 </select>
<input type="submit" value="Change Theme">
</p>
</form>

Then place the following lines at the top of each php page....

<?
 session_start();

if(isset($_POST['Font']))  {$_SESSION['Font']	= $_POST['Font'];}
if(isset($_POST['Color']))  {$_SESSION['Color']	= $_POST['Color'];}

?>

Then in your <head> section echo your css theme....

<? 
echo "<style type 'text/css'>";

echo "p {color: ".$_SESSION['Color']." font-size: ".$_SESSION['Font']."}"; ?>
echo "</style>";

You would have to echo the session color and font throughout your css file.
You could also have predefined styles and use a similar session result.

Please note: I haven't tested this, but I think it might work.

There are probably better ways of doing this, but hope it helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.