Seeking help to customize Footer Links, Background, and Text Color
-
Hi everyone,
I am currently working on my website and I want to customize the Footer Section. Specifically, I need help with the following:
Changing Background Color: How can I change the background color of the entire footer area?
Text & Link Color: How can I change the color of the text and the links within the footer?
File Information: Could someone please tell me the exact file name and file location (path) where these styles are typically controlled?
I am using Bagisto 2.4.1 and my theme is Default.
Any code snippets or guidance on which CSS file to edit would be greatly appreciated. Thank you in advance! -
Customizing the Footer in Bagisto 2.4.1 (Default Theme)
File name & location
The footer is not controlled by a plain CSS file. Bagisto's default theme uses Tailwind CSS utility classes written directly in the Blade template.
The footer is not controlled by a plain CSS file. Bagisto's default theme uses Tailwind CSS utility classes
written directly in the Blade template.packages/Webkul/Shop/src/Resources/views/components/layouts/footer/index.blade.php
The custom colors it references (lightOrange, navyBlue) are defined here:
packages/Webkul/Shop/tailwind.config.js
- Changing the Background Color
The footer has two background areas:
a) The main footer area line 24 uses the class bg-lightOrange:
<footer class="mt-9 bg-lightOrange max-sm:mt-10">
b) The bottom copyright bar line 140 uses bg-[#F1EADF]:
<div class="flex justify-between bg-[#F1
To change them, either swap the classes inline (e.g. bg-lightOrange bg-[#1a1a1a]), or change the color value
centrally in tailwind.config.js:// packages/Webkul/Shop/tailwind.config.js
colors: {
navyBlue: "#060C3B",
lightOrange: "#F6F2EB", // change this hex to recolor the whole footer
}
- Text & Link Color
- Copyright text (line143): text-zinc-6e.
- Newsletter heading (line 96): text-navyBlue.
- Footer links (lines 42 & 76): they currently inherit the default text color there's no color class on the <a> tags. To recolor them, add a text-color class:
<a href="{{ $link['url'] }}" class="text
{{ $link['title'] }}
</a>
3.Two important notes
Rebuild assets after editing. Because th runtime CSS), you must recompile afterany change:
cd packages/Webkul/Shop
npm install # first time only
npm run build # or: npm run devIf you add a brand-new arbitrary class like bg-[#123456], Tailwind will pick it up on the next build. Also clear the view cache: php artisan view:clear.
Don't edit the vendor package directly if you can avoid it changes inside packages/Webkul/... are overwritten
when you update Bagisto. The upgrade-safheme (Admin < Settings < Themes) or publish/override just this footer view into a custom theme folder, then edit the copy there.Remember to run npm run build afterward.