3

I have a website where users can generate their own Codeigniter websites using a wizard in it users will provide module, fields and functions details. Based on the user input a website will be generated and deployed on my website and a demo will be shown to the user before they go with the download. Everything works fine.

Now I am planning to allow users to choose different styles/themes for the generated website when they are previewing it. How can allow users to see their changes immediately without reloading the entire page?

I tried by replacing their style sheet file on the generated website with the selected style and redirected to another page on the generated website. But the same style sheet file is used since it is already cached by browser. So please give me some options. If that can be done without redirecting the user it will be the best option for me.

Nish
  • 2,296
  • 2
  • 14
  • 19
  • Use different names for your stylesheets, like style-blue.css, style-green.css – Robert Jul 17 '12 at 12:38
  • But how can I change the style file when user is in the same page? – Nish Jul 17 '12 at 12:47
  • `But the same style sheet file is used since it is already cached by browser.`. How about using a `Cache-Control: no-cache` header on the CSS file, forcing the browser to re-fetch it each time? You could also serve the CSS from an MVC action (if codeingineter has that) and not from a physical file. – user2173353 Mar 22 '17 at 09:13
  • Does this answer your question? [Replacing css file on the fly (and apply the new style to the page)](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page) – Liam Nov 04 '22 at 16:49

3 Answers3

1

pass a variable to the view, the variable holds the value of the filename of the stylesheet? As far as changing the style file when the user is in the same page... see this question: Is there an easy way to reload css without reloading the page?

<?php
$data['stylesheet_name'] = 'user1';

$this->load->view('viewname', $data);

/**
 * View File
 **/

<link rel="stylesheet" type="text/css" href="/css/user/<?= $stylesheet_name; ?>.css" />
Community
  • 1
  • 1
NDBoost
  • 10,184
  • 6
  • 53
  • 73
1

I have used the below code and it is working without the need of changing the style sheet file name.

function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

This forces browser to reload the file since the parameter changed because of the time change.

Nish
  • 2,296
  • 2
  • 14
  • 19
1

This worked for me to replace a single stylesheet. The stylesheets are named "themegray", "themeblue", "themegreen", etc. "t" represents the new color, such as "blue".

function flipTheme(t) {
    $('link[rel="stylesheet"]').each(function () {
        if (this.href.indexOf(theme)>=0) {
            this.href = this.href.replace(theme, t);
            theme = t;
        }
    });
}
user1745124
  • 149
  • 1
  • 3