Replacing Logo in v4

Questions and Answers Strapi Admin
1

I’m trying to replace the admin UI logo, I’ve followed the documentation here:

However it seems a bit unclear to me and I can’t get it to work, my src/admin/app.js looks like this:


export default {
  config: {
    locales: [
      'fr',
      'de',
      'it',
    ],
  },
  auth:{
    logo: "strapi-logo.png"
  },
  menu:{
    logo: "strapi-logo.png"
  },
  bootstrap() {},
};

I’ve placed the png file in src/admin/extensions/ but also in src/extensions (since it wasn’t clear to me from the docs where it should be).

In the config file I’ve tried to make the logo string ./strapi-logo.png and ./extensions/strapi-logo.png, I’ve also tried importing it with an ES6 import, neither has worked.

Any ideas what I’m doing wrong?

System Information
  • **Strapi Version4.0.0:
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:
2

In case anyone else is struggling with this -

Stupid mistake on my part, I put the auth and menu properties outside of the config property, when they should have been in there with the locales of course, somehow I oversaw that.

Also it does seem that you need to use ES6 imports instead of just a string, this example in the docs I previously missed was helpful:

// path: ./admin/src/app.js

import AuthLogo from './extensions/my-logo.png';
import MenuLogo from './extensions/logo.png';
import favicon from './extensions/favicon.ico';

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
   // Replace the favicon
    head: {
      favicon: favicon,
    },
    // Add a new locale, other than 'en'
    locales: ['fr', 'de'],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      colors: {
        alternative100: '#f6ecfc',
        alternative200: '#e0c1f4',
        alternative500: '#ac73e6',
        alternative600: '#9736e8',
        alternative700: '#8312d1',
        danger700: '#b72b1a'
      },
    },
    // Extend the translations
    translations: {
      fr: {
        'Auth.form.email.label': 'test',
        Users: 'Utilisateurs',
        City: 'CITY (FRENCH)',
        // Customize the label of the Content Manager table.
        Id: 'ID french',
      },
    },
   // Disable video tutorials
    tutorials: false,
   // Disable notifications about new Strapi releases
    notifications: { release: false },
  },

  bootstrap() {},
};

I’ve got it working with that now.

2 Likes
3

Thank you for the tip, I have issues:

  1. The following line throws a compile error that it cannot resolve the path:
  1. Changing the theme colors doesn’t reflect in the Admin UI

What am I missing?

(Trying on v4.x.x)

4

if you cannot resolve the path you can include it with webpack:

// path: ./src/admin/webpack.config.js

'use strict';

const _ = require('lodash');
const path = require('path');

/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  // this includes the folder ./src/admin/assets with the alias assets
  _.set(config, 'resolve.alias.assets', path.resolve(__dirname, './assets'));
  return config;
};

// path: ./src/admin/app.js

import AuthLogo from 'assets/auth-logo.svg';
import MenuLogo from 'assets/menu-logo.svg';
import favicon from 'assets/favicon.ico';

export default {
  config: {
    auth: {
      logo: AuthLogo,
    },
    head: {
      favicon: favicon,
    },
    menu: {
      logo: MenuLogo,
    },
  },

  bootstrap() { },
};
6

hello is there a way of removing these Category tutorials on the homepage of the admin and users ??

7

grep...

`ls ./node_modules/@strapi/admin/admin/src/pages/HomePage/’

==> ContentBlocks.js HomeHeader.js index.js SocialLinks.js

8

For anyone else who has the same issue this is what actually worked for me:

9

I found out that latest version of strapi allows logo customisation via admin panel settings, here is a video I made showing it.

let me know if this is considered spam, and I’ll delete this reply

1 Like