Sulu: Recomended way to theme admin interface?

[lightglitch]

How can I change the colors / logos and sulu titles in the admin of sulu 2.0, what is the correct procedure?

I want to change the login screen and the navigation section.

Thx

[kfrohwein]

Sulu uses webpack to build the admin CSS & JS.
Please take a look at project/assets/admin/package.json. You can override or add any file as you desire. You can change the login logo by CSS as well. It's a large project so it won't be easy and make sure not to mess up the ReactJs components :)

[danrot]

Actually I have thought the onVariables callback of the postcss-simple-vars plugin we are using can be used for that, but it seems that does not work as I expected.

However, what you can still do is replace the entire login.scss file you are trying to override. That also means that you have to copy over the entire file, since webpack is not loading the old file anymore.

Replacing the file can be done in the assets/admin/webpack.config.js file:

/* eslint-disable flowtype/require-valid-file-annotation */
/* eslint-disable import/no-nodejs-modules*/
/* eslint-disable no-undef */
const path = require('path');
const webpack = require('webpack');
const webpackConfig = require('../../vendor/sulu/sulu/webpack.config.js');

module.exports = (env, argv) => {
    env = env ? env : {};
    argv = argv ? argv : {};

    env.project_root_path = path.resolve(__dirname, '..', '..');
    env.node_modules_path = path.resolve(__dirname, 'node_modules');

    const config = webpackConfig(env, argv);
    config.entry = path.resolve(__dirname, 'index.js');

    // This is the important line
    config.resolve.alias[path.resolve(__dirname, '../../vendor/sulu/sulu/src/Sulu/Bundle/AdminBundle/Resources/js/containers/Login/login.scss')] = path.resolve(__dirname, 'login.scss');

    return config;
};

Be aware that you also need to create an assets/admin/postcss.config.js file to configure what you can use in the new assets/admin/login.scss file. As a default you could copy over the content of the file from the sulu/sulu repository.

@lightglitch Does that work for you?

[lightglitch]

I will try it and give some feedback.

[danrot]

Since I already tested it and it worked for me, I am going to close this issue. You can still ask more questions if something comes up :slightly_smiling_face:

[lightglitch]

@danrot I'm trying to use suggestion in the last comment https://github.com/postcss/postcss-simple-vars/issues/80#issuecomment-548624109 because it looks more clean.

I already did the plugin, updated the assets/admin/package.json and it's building but I'm having trouble on how to override the sulu/admin postcss configuration to add my new plugin configuration, any ideas?

[danrot]

@lightglitch I have already written that this is not working... You have to override the entire file, I don't know about another way to solve this.

[nnatter]

@lightglitch You should be able to set the path to your custom PostCSS configuration file in your webpack config: https://github.com/postcss/postcss-loader#path

[nnatter]

@danrot The suggestion in this comment looks like something that could work to me 🙂 https://github.com/postcss/postcss-simple-vars/issues/80#issuecomment-548624109

[danrot]

@nnatter That's why I've already linked it in my answer above :wink: And I have not tried it, so I can't really tell if it is working...

[nnatter]

Hey, I just found some time to investigate this.

Replacing specific stylesheets via the webpack.config.js of the project works quite well for me. It looks like it is even possible to import the original file inside of the new file and only add the styles that you want to overwrite. This way you do not need to update your files if something gets changed with a new sulu version.

The following changes are needed to overwrite the background color of the login:

/* assets/admin/webpack.config.js */

/* eslint-disable flowtype/require-valid-file-annotation */
/* eslint-disable import/no-nodejs-modules*/
/* eslint-disable no-undef */
const path = require('path');
const webpackConfig = require('../../vendor/sulu/sulu/webpack.config.js');

module.exports = (env, argv) => {
    env = env ? env : {};
    argv = argv ? argv : {};

    env.project_root_path = path.resolve(__dirname, '..', '..');
    env.node_modules_path = path.resolve(__dirname, 'node_modules');

    const config = webpackConfig(env, argv);
    config.entry = path.resolve(__dirname, 'index.js');

/* ### MODIFICATION START ### */
    /* resolve root path of the sulu source code */
    const suluPath = path.resolve(__dirname, '../../vendor/sulu/sulu/');

    /* overwrite stylesheet of sulu login component with custom stylesheet of project */
    config.resolve.alias[path.resolve(suluPath, 'src/Sulu/Bundle/AdminBundle/Resources/js/containers/Login/login.scss')] = path.resolve(__dirname, 'style-overwrites/login.scss');
/* ### MODIFICATION END ### */

    return config;
};

/* assets/admin/style-overwrites/login.scss */

/* import original stylesheet to keep original styling */
@import 'sulu-admin-bundle/containers/Login/login.scss';

/* overwrite original style for specific elements */
.login-container {
    background-color: green;
}

/* assets/admin/postcss.config.js */

/* reuse the postcss configuration included in sulu */
module.exports = require('../../vendor/sulu/sulu/postcss.config.js');

[nnatter]

I added an example pull request that shows how to do this in https://github.com/sulu/sulu-demo/pull/62