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:
<?php
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';
break;
case 'CE':
$defaultGrayBlue1 = $grayBlue1 = '#ABABAB';
$defaultGrayBlue2 = '#727274';
$blue1 = '#D70119';
$blue2 = '#D70119';
break;
// 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?
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
etc.
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'])) {
return;
}
$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' => [
'/some/css/path/to/styles.css',
'/another/path/to/css/file.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.
source to share