How to change logo of strapi on admin panel left menu?

Question

I am running the strapi project and need to change strapi login screen logo. I have replaced logo in plugins > user-permissions > admin > src > assets > images > logo_strapi.png and running the command npm run setup --plugins but after that it's not loading content-type data it's just giving me loader only

Answer 1

Logo you can overvrite in path -> ./admin/admin/src/assets/images/logo-strapi.png

rember to rebuild project by npm run build command

The AdminUI package source can be easily found in ./node_modules/strapi-admin/src/.

For example, to change the top-left displayed admin panel's color, ./node_modules/strapi-admin/admin/src/components/LeftMenuHeader/styles.scss should be overriden by ./admin/src/components/LeftMenuHeader/styles.scss with your own styles.

Thus, you are replacing the files that would normally be in node_modules/strapi-admin/admin/src and directing them to admin/src/some/file/path.

To apply your changes you need to rebuild your admin panel

npm run build

Source

https://github.com/strapi/strapi/issues/3604

https://github.com/strapi/strapi/pull/3609/files

Answer 2

Since this question is a bit older... In the current version of Strapi (V4) changing the icon of the left menu works a bit differently (the presented solution is tested with 4.0.6). This solution also works for changing the Logo at the Login Screen and the favicon...

In your project create an extension folder under ./yourProjectName/src/admin/ Within it you can place a new image that should be your new Menu Logo i.e. 'new-menu-logo.png'

Furthermore create an app.js file under ./yourProjectName/src/admin/ where you then import the image of the extension folder. Example:

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

import AuthLogo from './extensions/my-new-logo.png';
import MenuLogo from './extensions/new-menu-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() {},
};

Finally rebuild the AdminUI with i.e. yarn build

Also described at the official docs: https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#configuration-options

Answer 3

Per Strapi's documentation, to change the top-left displayed admin panel's logo, add your custom image at ../admin/src/assets/images/logo-strapi.png.

You have to create these folders if they don't exist ../admin/src/assets/images/ to override the admin's existing styling.

Answer 4

According to the doc https://strapi.io/documentation/developer-docs/latest/development/admin-customization.html#customization-options, you can modify the (logo and css). This is done by writing folders and files in your project folder. These files will overwrite the node module ones.

So, for the logo, in yourProjectName you can create a file at this path -> ./yourProjectName/admin/src/assets/images/logo-strapi.png

This file should overwrite the initial strapi logo.

rember to rebuild project by npm run build command

Answer 5

I FIGURED IT OUT!

1.) Go Here https://github.com/strapi/strapi/blob/master/packages/core/admin/admin/src/translations/en.json

This shows all the spot where text is and what is currently is.

Here is a picture of the en.json file on the original github. https://i.stack.imgur.com/Lbef9.jpg

2.) To change text

Go to your own Strapi backend. Then go to config > src > admin > app.js

If you don't have an app.js use my code as template to start.

export default {
  config: {
    // Override or extend the theme
    theme: {
      colors: {
        alternative100: "#f6ecfc",
        alternative200: "#e0c1f4",
        alternative500: "#ac73e6",
        alternative600: "#9736e8",
        alternative700: "#8312d1",
        danger700: "#b72b1a",
      },
    },
    // // Extend the translations
    translations: {
      en: {
        "app.components.LeftMenu.navbrand.title": "Publishpen",
        "app.components.LeftMenu.navbrand.workplace": "Dashboard",
        "Auth.form.welcome.title": "Frick ya! White label branding!!!:)",
      },
      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() {},
};

Here is my folder structure https://i.stack.imgur.com/JQA2v.png

If you change the text in the translations you will change the text in the Strapi admin portal! Just look in the en.json (in the original github) for the text you see on the admin page and then update the app.js

translations: {
  en: {
    "app.components.LeftMenu.navbrand.title": "Publishpen",
    "app.components.LeftMenu.navbrand.workplace": "Dashboard",
    "Auth.form.welcome.title": "Frick ya! White label branding!!!:)",
  }
}

3.) You MUST re-build npm run build or yarn build If your project doesn't rebuild then it will not show on the admin portal.

Answer 6

You need to change the image at ./plugins/users-permissions/admin/src/assets/images/logo_strapi.png.

HTH

Answer 7

I'm very new to Strapi and I was searching exactly how to achieve this. As per the documentation you need to change the image on ./node_modules/strapi-admin/admin/src/assets/images/logo-strapi.png and run build the administration panel with npm run setup

Answer 8

Since this question is over a year old now, and might be confusing for some beginners, i think i will answer how i went upon to change it. This answer uses yarn (Do note that the core of the above answers remains same)

Say your project name is my-project, Navigate to my-project/node_modules/strapi-admin/admin/src/assets/images

You will find a file called logo-strapi.png (there will be another file with almost similar file name, make sure its a - and not _ ) and replace it with your desired logo. The approx dimens of the old logo as 1100px x 300px , so make sure your new logo also is of similar dimens.

Once you are done, navigate back to my-project directory and terminate any running instance of strapi. If you are on windows, make sure you close all the file explorer windows which might have any of the subfolders of your project open and preferable close any open browser tabs of your admin panel (if there are any open instances, it might give an error while re building) .

Now run yarn build and after it finishes building, start your strapi instance in production or development mode as required with yarn start or yarn develop

Answer 9

The problem is that the second Array.fill just refrences itself over and over again. You can fix that if you replace it with this:

let currentBoard = Array(boardSize[0]).fill([]).map(() => Array(boardSize[1]).fill(false));