how do i create different theme color in joomla template

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
shaibustephen
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sat Nov 17, 2018 1:52 pm

how do i create different theme color in joomla template

Post by shaibustephen » Sat May 18, 2019 4:32 am

i am developing joomla template from scratch using bootstrap 4.3.1. I want to have 5 to 7 different background color themes which should be controled by different bootstrap color and their text front color type.

My question is, how do i achieve this in joomla template so that user can either switch to any background color theme they want as in just like the case of most wordpress theme by just a click?

User avatar
paulala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Sat Oct 30, 2010 12:32 pm
Location: Scotland
Contact:

Re: how do i create different theme color in joomla template

Post by paulala » Sat May 18, 2019 8:14 am

Are you using SCSS
Warm Regards,
Paula Livingstone, Skydiving Instructor and Network Security Consultant
https://paulalivingstone.com
http://rustyice.co.uk

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25579
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: how do i create different theme color in joomla template

Post by Per Yngve Berg » Sat May 18, 2019 8:44 am


shaibustephen
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i create different theme color in joomla template

Post by shaibustephen » Sat May 18, 2019 5:53 pm

Yes, i am using css

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25579
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: how do i create different theme color in joomla template

Post by Per Yngve Berg » Sat May 18, 2019 5:58 pm

You can see how it's done in Protostar.

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1545
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: how do i create different theme color in joomla template

Post by SharkyKZ » Sat May 18, 2019 6:18 pm

Do you want a style switcher in the frontend so each visitor could change it? Or as an option for administrators to pick?

shaibustephen
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i create different theme color in joomla template

Post by shaibustephen » Sat May 18, 2019 6:50 pm

i want an option for administrators to pick

shaibustephen
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i create different theme color in joomla template

Post by shaibustephen » Sat May 18, 2019 7:13 pm

ok. Below looks like what i want to do. My question now is that how to i integrate different background color with their different respect color text. Eg
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>



<field
name="templatecolor"
type="list"
label="TPL_BEEZ3_FIELD_TEMPLATECOLOR_LABEL"
description="TPL_BEEZ3_FIELD_TEMPLATECOLOR_DESC"
default="nature"
filter="word"
>
<option value="nature">TPL_BEEZ3_OPTION_NATURE</option>
<option value="personal">TPL_BEEZ3_OPTION_PERSONAL</option>
<option value="red">TPL_BEEZ3_OPTION_RED</option>
<option value="turq">TPL_BEEZ3_OPTION_TURQ</option>
<option value="image">TPL_BEEZ3_OPTION_IMAGE</option>
</field>

Please, can you help me do a sample above to continue from there?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25579
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: how do i create different theme color in joomla template

Post by Per Yngve Berg » Sat May 18, 2019 7:59 pm

Make a css file for each colour option and load acording to parameter selected

shaibustephen
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i create different theme color in joomla template

Post by shaibustephen » Sat May 18, 2019 8:12 pm

ok. thanks

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1545
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: how do i create different theme color in joomla template

Post by SharkyKZ » Sat May 18, 2019 9:07 pm

If you always intend to use both classes together, you can have them both as option value:

Code: Select all

<field
	name="backgroundColor"
	type="list"
	label="Background Color"
	default="bg-primary text-white"
>
<option value="bg-primary text-white"></option>
<option value="bg-white text-dark"></option>
...
</field>
And use in the code:

Code: Select all

<div class="p-3 mb-2 <?php echo $params->get('backgroundColor'); ?>">Some text</div>
Or you can check which background color is selected and base text color on that:

Code: Select all

<field
	name="backgroundColor"
	type="list"
	label="Background Color"
	default="primary"
	filter="word"
>
<option value="primary"></option>
<option value="white"></option>
...
</field>

Code: Select all

<?php $textColor = in_array($params->get('backgroundColor'), array('warning', 'white')) ? ' text-white' : ' text-dark'; ?>
<div class="p-3 mb-2 <?php echo 'bg-' . $params->get('backgroundColor') . $textColor; ?>">Some text</div>

shaibustephen
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i create different theme color in joomla template

Post by shaibustephen » Mon May 20, 2019 2:02 pm

Ok. How do i use it if i want use it in changing the background color of the entire website as below?


<body id="background">
</body>


Post Reply

Return to “Templates for Joomla! 3.x”