How to change the backoffice logo?
Hello everyone, i am working on B2B demoshop and i want to change the backoffice login page logo and dashboard logo but i am unable to locate the file path!
Best Answer
-
Hi @shlok.sharma ,
as far as I know, the default Spryker logo is stored as SVG via CSS, and it's defined in the file
vendor/spryker/gui/assets/Zed/sass/_custom.scss
using the CSS classzed-logo.
All you need is to just override the CSS file above with your logo.
Please let me know if this helps.2
Answers
-
Hi @shlok.sharma ,
as far as I know, the default Spryker logo is stored as SVG via CSS, and it's defined in the file
vendor/spryker/gui/assets/Zed/sass/_custom.scss
using the CSS classzed-logo.
All you need is to just override the CSS file above with your logo.
Please let me know if this helps.2 -
Something else that may be of interest to you @shlok.sharma , we have a course in Safari, it does not exactly say how to change the logo like @amansilla has above, but it may be of interest if you are looking at changing the theme or template.
If you login to Safari and search "frontend" you will see a course Spryker Frontend for Backend Developers π1 -
Thanks @amansilla, it worked.
0 -
@shlok.sharma Could you please share your solution?
Here is mine, following the docs:
1) I createdfrontend/zed/build.js
file2) Copy the following code from the docs:
const { mergeWithCustomize, customizeObject } = require('webpack-merge');
const oryxForZed = require('@spryker/oryx-for-zed');
const path = require('path');
const mergeWithStrategy = mergeWithCustomize({
customizeObject: customizeObject({
plugins: 'prepend'
})
});
const myCustomZedSettings = mergeWithStrategy(oryxForZed.settings, {
entry: {
dirs: [path.resolve('./src/Pyz/Zed/')] // Path for entry points on project level
}
});
oryxForZed.getConfiguration(myCustomZedSettings)
.then(configuration => oryxForZed.build(configuration, oryxForZed.copyAssets))
.catch(error => console.error('An error occurred while creating configuration', error));
3) I modified the package.json to change zed build
"zed":"node ./frontend/zed/build",
"zed:watch":"node ./frontend/zed/build --dev",
"zed:production":"node ./frontend/zed/build --prod"
4) I created the file
Zed/Gui/assets/Zed/js/spryker-zed-gui-commons.entry.js
, so as to override the core one and include my custom .scss file5) I created the file
Zed/Gui/assets/Zed/sass/_custom.scss
with my custom css to override the .zed-logo class6) I included the following code in
Zed/Gui/assets/Zed/js/spryker-zed-gui-commons.entry.js
require('ZedGui'); require('../sass/_custom.scss')
ZedGui is an alias that points to ZedGui:
${settings.paths.guiFolder}/assets/Zed/js/modules/commons
,7) I ran docker/sdk console frontend:zed:build . The logo was changed with my CSS class
2 -
Hi @James Hooper, thankyou, i have enrolled in this course and started learning.
1 -
Hello @Hidran Arias , i actually changed the logo directly in the core file, at first i was trying to implement oryx for Zed but i was stuck at some point, but now as you have mentioned all the points i will try it again..
1 -
@shlok.sharma that is fantastic news! Happy Learning and feel free to reach out to us if we can be of any assistance during your learning journey.
Many Thanks
James
1
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 69 Spryker News
- 896 Developer Corner
- 758 Spryker Development
- 83 Spryker Dev Environment
- 361 Spryker Releases
- 3 Oryx frontend framework
- 34 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 23 Job Opportunities
- 3.2K π Slack Archives
- 116 Academy
- 5 Business Users
- 370 Docker
- 551 Slack General
- 2K Help
- 75 Knowledge Sharing
- 6 Random Stuff
- 4 Code Testing
- 32 Product & Business Questions
- 68 Spryker Safari Questions
- 50 Random