I just want to create a new color scheme and replace the root primary colors with it, how do I proceed?
1
-
Can you please edit your question body and title to give more context/clarity to the task? This will help future readers/researchers to find and understand this page.– mickmackusaCommented Mar 15, 2023 at 22:12
Add a comment
|
3 Answers
I tend to use the default Joomla! template for all my sites (admittedly not commercial sites but NFPs/charities) and I enhance the basic Cassiopeia with a variety of extra colours.
In the templateDetails.xml file:
<field
name="colorName"
type="filelist"
label="TPL_CASSIOPEIA_COLOR_NAME_LABEL"
default="colors_standard"
fileFilter="^custom.+[^min]\.css$"
exclude="^colors.+"
stripext="true"
hide_none="true"
hide_default="true"
directory="media/templates/site/cassiopiea/css/global/"
validate="options"
>
<option value="colors_alternative">TPL_CASSIOPEIA_COLOR_NAME_ALTERNATIVE</option>
<option value="colors_standard">TPL_CASSIOPEIA_COLOR_NAME_STANDARD</option>
<option value="colors_burned">TPL_CASSIOPEIA_COLOR_NAME_BURNED</option>
</field>
In the media folder is where all the action is. So in media/templates/site/cassiopeia/css/global copy the file colors_standard.css and rename to colors_burned.css and edit the colours in this file to be that of what you want and then create the min and .gz versions of this ie colors_burned.min.css & colors_burned.min.css.gz.
:root {
--cassiopeia-color-primary: #912b3b;
--cassiopeia-color-link: #ff7530;
--cassiopeia-color-hover: #ff7430;
--cassiopeia-color-primary-border: #ee6c39;
}
Then in media/templates/site/cassiopeia/scss/global make a copy of colors_standard.scss and rename to colors_burned.scss and edit this to change "standard" to "burned" such as:
// Variables, Functions and Mixins
@import "../tools/tools";
:root {
--cassiopeia-color-primary: #{$burned-color-primary};
--cassiopeia-color-link: #{$burned-color-link};
--cassiopeia-color-hover: #{$burned-color-hover};
}
I think that's all there is to it from memory.
-
-
It is always helpful for members to offer varied solutions/advice. The goal is to help future researchers (as long as the asked question is addressed). Commented Mar 16, 2023 at 7:10
-
1Thank you. @GlennArkell! I may have answered my own answer question, but your answer was a lot more insightful and I learnt some interesting Templating info just now ^^– DeesreXCommented Mar 16, 2023 at 7:23
So the solution was to go to the original cassiopiea's files and copy the css/global over to your own template. This will contain all the primary, secondary and alternative colors.
Since I want to do specific pages to have unique template color and feel, I just copied the default template, renamed it, then edit the css files as required. Then I specify all pages I want it to show on, but not the rest.
