clone code and edit code

.gitignore

@@ -0,0 +1,25 @@
+# IDE & System Related Files
+.buildpath
+.project
+.settings
+.DS_Store
+.idea
+.vscode
+.docker
+/docker-compose.yml
+/nbproject
+**/.DS_Store
+
+# OSX
+._*
+.Spotlight-V100
+.Trashes
+
+# Windows
+Thumbs.db
+Desktop.ini
+
+# Never ignore
+# Only apply this rule to the main repository's gitignore files
+!/.gitignore
+!/build/.gitignore

README.md

@@ -1,2 +1,18 @@
 # tpl_fooo
 tpl_fooo clone the cassiopeia template of Joomla 4. When your site update joomla version, some files on the cassiopeia template maybe overide. We don't want any code change on the template by update joomla version, so create new template from the cassiopeia template.
+
+
+# repare
+- Download zip file and extract on your computer / Or clone this repo
+- Open folder by IDE Editor (Vscode, Sublime Text...)
+
+- Find and replate in folder:
+. Option: turn ON Case Sensitive
+. Find: fooo   - Replace: your_name_template (lowercase, no space)
+. Find: FOOO   - Replace: your_name_template (UPPERCASE, no space)
+
+- Rename file:
+ /language/tpl_fooo.ini ->  /language/tpl_your_name_template.ini (your_name_template: lowercase, no space)
+ /language/tpl_fooo.sys.ini ->  /language/tpl_your_name_template.sys.ini (your_name_template: lowercase, no space)
+
+Compress zip and install to your site

component.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * @subpackage  Templates.fooo
+ *
+ * @copyright   (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Factory;
+use Joomla\CMS\HTML\HTMLHelper;
+
+/** @var Joomla\CMS\Document\HtmlDocument $this */
+
+$app = Factory::getApplication();
+$wa  = $this->getWebAssetManager();
+
+// Template path
+$templatePath = 'templates/' . $this->template;
+
+// Color Theme
+$paramsColorName = $this->params->get('colorName', 'colors_standard');
+$assetColorName  = 'theme.' . $paramsColorName;
+$wa->registerAndUseStyle($assetColorName, $templatePath . '/css/global/' . $paramsColorName . '.css');
+
+// Use a font scheme if set in the template style options
+$paramsFontScheme = $this->params->get('useFontScheme', false);
+$fontStyles       = '';
+
+if ($paramsFontScheme)
+{
+	if (stripos($paramsFontScheme, 'https://') === 0)
+	{
+		$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', []);
+		$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', []);
+		$this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style']);
+		$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
+
+		if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0)
+		{
+			$fontStyles = '--cassiopeia-font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
+			--cassiopeia-font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
+			--cassiopeia-font-weight-normal: 400;
+			--cassiopeia-font-weight-headings: 700;';
+		}
+	}
+	else
+	{
+		$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
+		$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
+	}
+}
+
+// Enable assets
+$wa->usePreset('template.fooo.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
+	->useStyle('template.active.language')
+	->useStyle('template.user')
+	->useScript('template.user')
+	->addInlineStyle(":root {
+		--hue: 214;
+		--template-bg-light: #f0f4fb;
+		--template-text-dark: #495057;
+		--template-text-light: #ffffff;
+		--template-link-color: #2a69b8;
+		--template-special-color: #001B4C;
+		$fontStyles
+	}");
+
+
+// Override 'template.active' asset to set correct ltr/rtl dependency
+$wa->registerStyle('template.active', '', [], [], ['template.fooo.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
+
+// Browsers support SVG favicons
+$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
+$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
+$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
+
+// Defer font awesome
+$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
+?>
+<!DOCTYPE html>
+<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
+<head>
+	<jdoc:include type="metas" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<jdoc:include type="styles" />
+	<jdoc:include type="scripts" />
+</head>
+<body class="<?php echo $this->direction === 'rtl' ? 'rtl' : ''; ?>">
+	<jdoc:include type="message" />
+	<jdoc:include type="component" />
+</body>
+</html>

css/editor.css

@@ -0,0 +1,61 @@
+/* STYLES FOR JOOMLA! EDITOR */
+body {
+  margin: 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #22262a;
+  background-color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+}
+a:link {
+  color: #224faa;
+}
+a:hover {
+  color: #424077;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* STYLES FOR JOOMLA! EDITOR */
+hr#system-readmore {
+  color: #f00;
+  border: #f00 dashed 1px;
+}

css/global/colors_alternative.css

@@ -0,0 +1,5 @@
+:root {
+  --cassiopeia-color-primary: #912b3b;
+  --cassiopeia-color-link: #30638d;
+  --cassiopeia-color-hover: #954b56;
+}

css/global/colors_alternative.min.css

@@ -0,0 +1 @@
+:root{--cassiopeia-color-primary:#912b3b;--cassiopeia-color-link:#30638d;--cassiopeia-color-hover:#954b56}

css/global/colors_standard.css

@@ -0,0 +1,5 @@
+:root {
+  --cassiopeia-color-primary: #112855;
+  --cassiopeia-color-link: #224faa;
+  --cassiopeia-color-hover: #424077;
+}

css/global/colors_standard.min.css

@@ -0,0 +1 @@
+:root{--cassiopeia-color-primary:#112855;--cassiopeia-color-link:#224faa;--cassiopeia-color-hover:#424077}

css/global/fonts-local_roboto.css

@@ -0,0 +1,126 @@
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Regular";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-RegularItalic";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Light";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-LightItalic";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Thin";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-ThinItalic";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Medium";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-MediumItalic";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Bold";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-BoldItalic";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Black";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-BlackItalic";
+  src: url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../media/vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
+}
+:root {
+  --cassiopeia-font-family-body: "Roboto", sans-serif;
+  --cassiopeia-font-family-headings: "Roboto", sans-serif;
+  --cassiopeia-font-weight-headings: 700;
+  --cassiopeia-font-weight-normal: 400;
+}