I am struck trying to customize the website and I don’t think I am doing anything crazy enough to be struck as I am.
First, the documentation for V 14 Website is out of date and that is no help to me.
I have a very specific website template/theme that I need to put across all web pages, so I basically need to override the theme. Easy enough, right?
Here is the basic HTML template that I have.
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>{% block title %}{% endblock %} - My Brand </title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/custom_web/img/Brand/LogoSquare.svg" rel="icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Amatic+SC:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/custom_web/vendor/Vendor1/css/vendor.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/custom_web/css/main.css" rel="stylesheet">
</head>
<body>
<a href="index.html" class="logo d-flex align-items-center me-auto me-lg-0">
<!-- Uncomment the line below if you also wish to use an image logo -->
<img src="assets/CustomWeb/img/Brand/LogoWide.svg" height="36" alt="Brand Logo">
<h1>Yummy<span>.</span></h1>
</a>
<!-- ======= Header ======= -->
<header id="header" class="header fixed-top d-flex align-items-center">
<div class="container d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center flex-end me-auto me-lg-0">
<!-- Uncomment the line below if you also wish to use an image logo -->
<img src="assets/albaqer_website/img/Brand/LogoWide.svg" height="36" alt="Al Baqer Security Systems Logo">
</a>
<!-- ========= NAV BAR =========== -->
<nav id="navbar" class="navbar navbar-collapse justify-content-end">
<ul >
<li><a href="/contact2">Contact Us</a></li>
<li><a href="/login">Login</a></li>
</ul>
</nav>
<a class="btn-get-smart-quote" href="#free-quote">Get SmartQuote</a>
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
</div>
</header>
And then I have a footer.
<footer id="footer" class="footer">
<div class="container" data-wow-delay="0.1s">
<div class="row gy-5">
<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-geo-alt icon"></i>
<div>
<h4>Address</h4>
...
</div>
{% include "templates/includes/footer/footer.html" %}
</footer>
<!-- Footer End -->
<!-- End Footer -->
<a href="#" class="scroll-top d-fle x align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="assets/custom_Web/vendor/vendor.js"></script>
<!-- Template Main JS File -->
<script src="assets/custom_Web/js/main.js"></script>
</body>
</html>
Now I wanted this in every web page, across the website, so theme, right?
To start with the font, the theme only has an option for 1 font, but since I had 3 fonts theme, I tried to load it by putting it all in name itself.
Which gives me
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Amatic+SC&family=Inter:wght@300;400;500;600;700;800&display=swap");
Which isn’t what I wanted but the only thing I could do because the Font family has a char limit of 140.
But that is the least of my worries, I couldn’t do anything to create this because everything is restricted on the Website theme, I couldn’t even change the color of the footer for example.
Theme
After searching for a while I found that I could create a template and make my web pages inherit from that theme. Great isn’t it?
And I created a Theme and created my web pages that were inherited from that template. The only trouble I had was I couldn’t get the navbar with templating, so I created my own, I thought I could figure it out later.
Later.
Well, I had a few custom Web Forms on my page which needs to be integrated, with the new theme, and since custom forms have no HTML, I couldn’t get them working with my template.
So back to square one.