# Assistance with Creating a Customizable Web Template.

**URL:** https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812
**Category:** web dev
**Created:** [May 18, 2023, 6:52pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812 "2023-05-18T18:52:38Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 18, 2023, 6:52pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/1 "2023-05-18T18:52:38Z")

</div>

Hello everyone,

I’m reaching out to the community because I’m currently employed as a front-end developer and I’ve run into a challenge at my job that I’m hoping you can help me solve.

I’ve been tasked with creating a customizable web template, but I’ve been having some difficulty getting it to work the way I want it to. I’ve noticed that the functionality on this website is exactly what I’ve been aiming to achieve in my project.

To give you a bit more context, It is a laravel web application and is running on version 10 framework for my styling I am using bootstrap 5. I have setting for dark or light mode theme but I need it to allow the user to choose a specific color theme, font style and size.

If anyone has experience with creating customizable web templates, could you share some guidance or point me towards any resources that might help me understand better? I would really appreciate any advice you can provide.

Thank you in advance for your time and help.

Best,  
Taliwe

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 18, 2023, 6:55pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/2 "2023-05-18T18:55:05Z")

</div>

Hi Menzi! When you mention customizable web template, do you have an example of a template whose similar customizations you would like to expose?

There are many ways to customize a template, and the sky’s the limit on how deep you want to go there 🙂

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 18, 2023, 10:08pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/4 "2023-05-18T22:08:04Z")

</div>

I’m seeing the following once I log-in:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/e/6ec5b760dd856f1cf1d06316cf21c13dc5b66177.jpeg)  
I click the theme switcher, and I see that most of the content switches appropriately.

Are you looking to make the theme switching work differently?

Thanks,  
Kirupa

---

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 18, 2023, 10:11pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/5 "2023-05-18T22:11:14Z")

</div>

![Screenshot 2023-05-19 001012](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/f/5/f5c0cc7a9b6bf8c634bcb2854a9a828bc239d6e8.png)  
Actually, This is the functionality I need…

Thanks,  
Menzi

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 18, 2023, 11:09pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/6 "2023-05-18T23:09:31Z")

</div>

Ah! Here is how your current dark/light mode is implemented:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/4/64a5639499461666c5fdf0d43ef0a94374e7c5a1.jpeg)

Notice that your root **html** tag has the attribute `data-bs-theme="dark"` set on it when you switch to dark mode. Your styles have the appropriate selectors set to become active when that happens. You are setting CSS custom properties whose values are going to vary depending on the light/dark mode you end up choosing.

Do you have access to modifying the JavaScript and the CSS for your template?

Cheers,  
Kirupa

---

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 18, 2023, 11:22pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/7 "2023-05-18T23:22:44Z")

</div>

![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/0/d/0d9dd06b693e76f2d87c8f5aab44951b42590f27.png)

---

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 18, 2023, 11:23pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/8 "2023-05-18T23:23:37Z")

</div>

can I email?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 19, 2023, 4:46pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/9 "2023-05-19T16:46:43Z")

</div>

No, please use the forums. Note that we likely can’t do the full work for you, but we can guide you in the right direction.

Can you be more specific about the area you are having difficulty with?

---

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 19, 2023, 5:21pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/10 "2023-05-19T17:21:21Z")

</div>

including multiple color options for the theme layout option, That is what I want to do?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 19, 2023, 8:38pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/11 "2023-05-19T20:38:13Z")

</div>

Yes. I gave you a general approach for how you can do this. What you need is a series of CSS style selectors that are designed for the various color options that you want. You can trigger them based on an attribute change in the HTML. You have **light** and **dark** already implemented. This would be a copy/paste and rename to avoid naming collisions 🙂

For the actual dialog that allows you to change the themes, if you want to reuse the one that I have, feel free to borrow it by viewing source / inspecting the CSS.

---

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 20, 2023, 6:27pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/12 "2023-05-20T18:27:08Z")

</div>

Noted! I will try doing it that way.  
Thank you for the guidance!

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 20, 2023, 6:46pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/13 "2023-05-20T18:46:11Z")

</div>

Do share what the final results ends up looking like or if you need further guidance! 🙂

---

<div class="post-metadata">

### Author: ![Menzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@Menzi](https://forum.kirupa.com/u/Menzi)
#### Post date: [May 21, 2023, 11:11pm UTC](https://forum.kirupa.com/t/assistance-with-creating-a-customizable-web-template/658812/14 "2023-05-21T23:11:09Z")

</div>

Will Do
