How to customize the theme of my site is user dependent

I am using bootstrap 3 and I need to install multiple themes on my site, it depends on every client we have.

  • Client 1: green theme;
  • Client 2: purple theme;
  • Client 3: gray theme ..

And it continues ...

Context The solution must be dynamic, the website looks the same, the color change is juste. At the moment I am using theme on url (get theme ... I am looking for better solution) I cannot create specific css per client type, duplicated code -> not possible to maintain.

My solution for now

I am making a file in php called bootstrap-override.css.php

At the top of this code:

header("Content-Type: text/css");

$defaultWhite = $white = '#FFFFFF';
$defaultGray1 = $gray1 = '#E7E7E7';
$defaultGray2 = $gray2 = '#CDCDCD';
$defaultGray3 = $gray3 = '#F2F2F2';
$defaultGrayBlue1 = $grayBlue1 = '#99AEBD';
$defaultGrayBlue2 = $grayBlue2 = '#495D6C';
$defaultBlue1 = $blue1 = '#0094D7';
$defaultBlue2 = $blue2 = '#004F9F';

if (isset($_GET['theme'])) {
    switch ($_GET['theme']) {
        case 'CA':
            $grayBlue1 = '#008168';
            $blue1 = '#009AA5';
            $blue2 = '#2A3B48';
        case 'CE':
            $defaultGrayBlue1 = $grayBlue1 = '#ABABAB';
            $defaultGrayBlue2 = '#727274';
            $blue1 = '#D70119';
            $blue2 = '#D70119';
// More client...


And my css using these variables, I call it with this code:

$this->headLink()->prependStylesheet($this->basePath() . '/websiteName/css/bootstrap-override.css.php'.((!empty($_GET['theme'])) ? "?theme={$_GET['theme']}" : ''))


(ZF2 app)

But the switch body part is ugly and the get part is too .. I can't leave it that way, if I have a new type of client, I'll make this code more complex ... I need a more efficient way to do this.

If anyone can help improve this.

Edit . From the comments. Store the entire topic in a database, with a 1 / n client / topic relationship, maybe I already thought a month ago ... but my problem for this solution is to develop it. If I store this in the database, I need to create a model layer to respect Zend \ MVC best practices and how do I design my CSS in this architecture?


source to share

1 answer

If I understood the problem correctly, I would suggest adding the CSS files to HeadLink.

You can have a default CSS file that implements common styles for all clients, and then a separate, theme-specific CSS file that then only defines the style for CA

, CE


To apply this to the HeadLink view helper, you can use an event listener listening for 'on render'.

for example

use Zend\ModuleManager\Feature;
use Zend\EventManager\EventInterface;
use Zend\Mvc\MvcEvent;

class Module implements BootstrapListenerInterface
    public function onBootstrap(EventInterface $event)
        $eventManager = $event->getApplication()->getEventManager();

        $eventManager->attach(MvcEvent::EVENT_RENDER, [$this, 'addClientCss'], 100);

    public function addClientCss(MvcEvent $event)
        $serviceManager = $event->getApplication()->getServiceManager();
        $config = $serviceManager->get('config');

        if (! isset($config['custom_css']) || ! is_array($config['custom_css'])) {

        $viewPluginManager = $serviceManager->get('ViewPluginManager');

        $headLink = $viewPluginManager->get('headlink');
        $basePath = $viewPluginManager->get('basepath')();

        foreach($config['custom_css'] as $cssFilePath) {

            $headLink->appendStylesheet($basePath . $cssFilePath);


Then the configuration is as required module.config.php


return [
    'client_css' => [


This should ideally be located in a module specific to the client or project you are working on (as well as the last one in the list of modules in application.config.php

) so that this config will be merged last.



All Articles