Change css for induvidual users

Hi,

I have some problems with a plugin I'm writing.

I want the user to be able to change between diffrent themes (actually it's just different directories with modified css files taken from views/default/css/elements), but I can't get simplecache working.

I have the logic in place, so a user can select between diffrent themes.

If one user changes theme, all users get's that theme.

So how do I switch between cached css's on a user basis?

Regards

PS: I need simplecache for performance!

  • Simplecache can't send different content to different users, so you'll need to send all the user-specific styles via a separate script. The good news is you can still benefit from client-side caching:

    When the user changes theme, update a timestamp, like:

    elgg_set_plugin_user_setting('theme_ts', time(), $user->guid, 'my_plugin');

    Then create a script to handle: /my_plugin/user_css

    In the page HTML, if the user is logged in, include a stylesheet LINK element to:

    /my_plugin/user_css?<theme_ts>

    This would serve the user CSS and send a far off Expires header. The change of the timestamp will make sure the user sees their theme change. Simplecache works the same way.

  • Another possible approach if the users can only select among different themes, but can't customize themes:

    • Separate each theme CSS views and register each with simplecache and elgg_register_css().
    • elgg_load_css() the theme the user selected.
  • Hi Brett

    This i exactly what I'm trying to do, but for some reason it doesn't work.

    I register two themes in the init function in start.php and tries to load the selected theme:

    function myplugin_init {

      // Register themes

      myplugin_register_theme('theme1');

      myplugin_register_theme('theme2');

      if (elgg_is_logged_in()) {

      // check if there what theme to use

      $theme = myplugin_get_theme();

      elgg_load_css($theme);

      }

    }

    These are the helper functions to register and retrieve themes:

    // Register themes

    function myplugin_register_theme($theme) {

    $themes = elgg_get_config('themes');

    $themes[$theme] = elgg_get_calling_plugin_id();

    elgg_set_config('themes', $themes);

    elgg_register_simplecache_view("myplugin/themes/{$theme}");

     $myplugin_css_url = elgg_get_simplecache_url('css', $theme);

    elgg_register_css($theme, $myplugin_css_url);

    }

     

    // Get users selected theme

    function myplugin_get_theme() {

      $theme = elgg_get_plugin_user_setting('theme', elgg_get_logged_in_user_guid(), 'myplugin');

      if(empty($theme)){

        $theme = 'theme1';

      }

      return $theme;

    }

    under mod/myplugin/views/default/myplugin/themes I have a theme1.php and theme2.php that loads the css-php's placed in a subdirectory under:

    mod/myplugin/views/default/myplugin/themes/theme1 and mod/myplugin/views/default/myplugin/themes/theme2

    I see that Elgg tries to load it in page source:

    <link rel="stylesheet" href="http://my.server.com/cache/css/default/theme2.1329901435.css" type="text/css" />

    But the cached style sheet is empty?

  • Move your theme's CSS to the css/themes/<theme_name> view. The css cache handler expects it to be there. Here's a working example: https://github.com/brettp/elgg_theme_switcher

  • Well, found the "error"..

    It seems like my theme1.php and theme2.php must be placed under mod/myplugin/views/default/css in order to work with simplecache.

    Thank you for assistance

  • @Brett - Thank you very much, you're my hero :-)

  • Well, it stopped working after several updates to Elgg (now at 1.8.7).

    It works until I enable simple cache in the admin section, then it always serves the last selected theme.

    If user one selects theme1, everybody gets theme1 until someone selects theme2, then everybody gets theme2.

    Strange thing is that when I look at the page source for two users with different theme selected it looks like this:

    User one: 

    <link rel="stylesheet" href="http://server/cache/css/default/theme1/theme1.1345485265.css" type="text/css" />

    User two:

    <link rel="stylesheet" href="http://server/cache/css/default/theme2/theme2.1345485265.css" type="text/css" />

    The content of the cached css is the same with simple cache, but different without simple cache.

    Any ideas on how to solve this?

  • Did it work with any version of Elgg 1.8?

  • @Cash

    I remember it that way, but as it's my devolpment site it doesn't have simple cache turned on always.

    In this case I only turned it on to do some final testing before roll out to production.

    I interpret your question as "That will never work with simple cache in 1.8".

    Though Brett made a simple plugin to show me how to do it : https://github.com/brettp/elgg_theme_switcher

  • @slyhne:

    This is a neat idea! I'm a little 1/2 surprised yr problems remain after ~180days!

    And BTW: such a CSS-only-dependant theme switching will work only with themes that manipulate the CSS to control the theming and *nothing else is involved. If a theme uses other artifacts and techniques for the theming and brandiing - e.g. elgg_menu_xxx triggers, ajax/ js. jquery tricks etc - then the CSS switching will be unable to control those aspects.

    Want some help in debugging (deep into the Core) ? Send me PM to make yr source code available and... let's see what crawls out!