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
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
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
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.
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
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.
To customize the logo Strapi. Please follow the document bellow:
Step 1: Create file app.js in path : ./src/admin.
If it's exited please ignore this step.
Step 2: Create a folder to store new logo and then copy new logo to here: ./src/admin/extensions
You can follow structure above
Step 3: Replace by new logo by edit the file app.js look like bellow:
// path: src/admin/app.js
import Favicon from './extensions/new-favicon.ico';
import MenuLogo from './extensions/new-logo.png'
export default {
config: {
// replace favicon with a custom icon
head: {
favicon: Favicon,
},
// replace logo
menu: {
logo: MenuLogo,
},
}
}
That's all. hope it can help you!
You need to change the image at ./plugins/users-permissions/admin/src/assets/images/logo_strapi.png.
HTH
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
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
Related
I have a problem trying to make a build of a new Vue3.js + Vite.js application. Once my application is finished i made the npm run build action in order to generate the final deployment files.
Problem is that when I try to see the generated page, it only shows a white page.
Opening the inspection tool I can see how the main generated javascript files are like not being found by the static index.html:
Failed to load resource: net::ERR_FAILED index.7b66f7af.js:1
Ok. I found the solution searching a bit, and I see how this problem also occurred actually in Vue 2.
The only thing that you have to do for solvif is add base: './' in your vite.config.js, like this:
import {
defineConfig
} from 'vite'
import vue from '#vitejs/plugin-vue'
import vuetify from '#vuetify/vite-plugin'
const path = require('path')
export default defineConfig({
plugins: [
vue(),
vuetify({
autoImport: true,
}),
],
define: {
'process.env': {}
},
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
},
},
base: './',
})
Hope it helps you all!
I had this problem also, and found a solution:
It looks like the awnser given by #javi But it's different. I found out that the situation changes when you deploy your application.
In vite config there is a setting called 'base' filled in like: base: mode === 'production' ? '/nameExample/' : '/', this will put the output of your project on the endpoint : 'nameExample'. If you go in production this fails and shows a blank page, and you need to changes this nameExample to '/' to show the projectbuild online. But than it shows a blank page in development because it mismatches the name of the project. Hope this will help you.
I have a question regarding vue-cli's target build lib. I have an app that produces a custom element following this documentation. Check:
/* ce.js */
import { defineCustomElement } from 'vue';
import Chat from './App.ce.vue';
const element = defineCustomElement(Chat);
customElements.define('chat-widget', element);
The build command looks as follows:
/* package.json */
"build-wc": "vue-cli-service build --target lib --inline-vue --name chat-widget --dest ./wwwroot src/ce.js"
This is actually working all fine but not exactly how i want it. My images are all generated inline which totally bloats my generated umd file. Also when i put my app on a server it refuses to load the images when inline because of Content-Security-Policy issues (another discussion).
Is there a way to tell webpack / vue-cli that I want my images in separate folder? Preferably in the destination folder under /img.
Figured it out! Just set the maxSize of the image parser to very low and the images will be dropped in /img in the output folder. Cheers!
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
...
chainWebpack: (config) => {
...
config.module.rule("images").set("parser", {
dataUrlCondition: {
maxSize: 4 * 1024, // 4KiB
},
});
...
},
});
I have in place my next.config.js file with regular redirect rules, all within the same domain and all works fine. But in a specific case, I need to redirect the request from a certain URL (mydomain.com/abc) to a different domain. i.e differentdomain.com
How do I go about creating this rule to redirect to an external link in NextJs?
I appreciate any insight.
The latest version of Next.js has this built in using the next.config.js script (see https://nextjs.org/docs/api-reference/next.config.js/redirects). No need for additional plugins.
To test, copy the NextJs sample app:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
Add a next.config.js file to the root folder with the following code:
// this simply tests the redirecting of the root path (source)
module.exports = {
async redirects() {
return [
{
source: '/',
destination: 'https://stackoverflow.com/posts/66662033',
permanent: false,
basePath: false
},
]
},
};
When you start the app npm run dev and visit localhost:3000, it should redirect to the destination URL specified in the next.config.js script (https://stackoverflow.com/posts/66662033).
Nextjs-redirect library should do what you want
You can try using window.location
Here's an example in which upon visiting a page it redirects the user to external url
// pages/redirect
import {useEffect} from 'react'
export default function redirect() {
useEffect(() => {
window.location.assign('https://duckduckgo.com/')
})
return(
<>
</>
)
}
Is it possible to add a local html file in the nativescript webview ?
If yes How can I do it using javascript ?
When I add online page it works , I can add www.google.com in the webview it works .But I want to add a local page but I don't find a way to do this .
Yes, it's possible. You need to consider that all NativeScript apps are build by default with Webpack and the default webpack.config.js will take care of certain files (like the ones in a fonts folder or like all images with *.png and *..jpg extensions). The webpack build will bundle all JavaScript files and in the case of the Angular flavor will also cognitively include the Angular related HTML files. However, the default webpack.config.js won't "know" about your custom HTML file.
The solution is to let Webpack know that it should copy the specific HTML file. This should be done via the CopyWebpackPlugin section in webpack.config.js file.
Example (assuming we have a file called test.html in the app directory)
new CopyWebpackPlugin([
{ from: { glob: "test.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
For real-life example see this config where this HTML file is the one we are targeting.
While going through the ember 3.6 super-rentals tutorial I ran into a few snags adding the ember-simple-leaflet-maps.
I couldn't get the environment variable LEAFLET_MAPS_API_KEY to set.
https://guides.emberjs.com/release/tutorial/service/
To my understanding, the tutorial has you set an environment variable on your operating system? Maybe I'm wrong in thinking that, but I wanted a way to just add the variable to my project /config/environment.js
Answer from OP:
After the addon was installed:
ember install ember-simple-leaflet-maps
I opened the geocode.js file to see how the service was injecting the api key. Path is:
node_modules\ember-simple-leaflet-maps\addon\services\geocode.js
The line of code was:
let accessToken = getOwner(this).resolveRegistration('config:environment')['ember-simple-leaflet-maps'].apiKey;
From there I just added the lookup it was looking for to my file /config/environment.js
let ENV = {
modulePrefix: 'super-rentals',
environment,
rootURL: '/',
locationType: 'auto',
'ember-simple-leaflet-maps': {
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
},
EXTEND_PROTOTYPES: {
// Prevent Ember Data from overriding Date.parse.
Date: false
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
}
};
Rebuild the project and serve, my maps are now showing up
ember build
ember serve