Member Avatar for cpeeyush1

hi,
here i am in a great trouble i am designing a website of some event and i want to show different look of my home page on each time when it's open by some user

i have no idea about this
so please tell how can i do this?
if you have some code then plesae send me that code also

  • 3 Contributors
  • 2 Replies
  • 137 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MelechM

Dani AI

Generated

asked for a homepage that shows a different look each time it is opened. and already pointed toward client-side scripting and persistent state. Below is a concise, practical approach that fills the gaps: how to pick a strategy, how to implement it reliably, and what to watch out for.

Choose a strategy (trade-offs):

  • Per-visit random or rotating skin (client-side): easiest, runs for every user without touching the server, but can show the same look twice if purely random.
  • Per-user persistence (localStorage/cookie or server-side): remembers which theme a user last saw and cycles next time. Good for predictable variety.
  • Server-side variants (A/B or seeded by user): useful for analytics or if you need different HTML/CSS sent from the server. Requires careful caching and Vary headers.

Minimal, modern pattern: store the last theme index in localStorage, compute the next index, then add a theme class to the document root before styles are applied so there is no flash of unstyled content. Put the script inline in the head so the class is present when CSS runs.

Example (place inline in <head> before stylesheet links):

const themes = ['themeA','themeB','themeC'];
const key = 'lastThemeIndex';
let i = parseInt(localStorage.getItem(key), 10);
if (isNaN(i)) i = -1;
const next = (i + 1) % themes.length;
document.documentElement.classList.add(themes[next]);
localStorage.setItem(key, next);

Notes and pitfalls:

  • To avoid FOUC, run the script before loading theme CSS or use a server-side class injection.
  • If many theme CSS files hurt performance, keep one base stylesheet and switch colors/images via classes or CSS variables.
  • If server-side rotation is required, set appropriate caching (Vary headers) so CDNs and shared caches don't serve the same variant to everyone.
  • Be careful with accessibility and brand consistency: do not change layout or navigation in ways that confuse users or assistive tech.

Reference: Window.localStorage - MDN

Recommended Answers

All 2 Replies

Member Avatar for essential

Yeah it is possible, but you wil have to use some script to work on this 1! You may try JavaScript instead!

Member Avatar for MelechM

As essential stated Javascript is the way to go on this one. Do you want it to be based on the time of day or just based on, for instance, if I go to the website one time I get one theme, second time different theme, third time different theme? If so make an array of the theme make a cookie that logs which theme I've seen the first time, and make sure to choose from another of the themes then use a theme changer to switch the css files. http://www.daniweb.com/forums/thread141795.html for the theme changer.

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.