Issues with Website Custom Theme/Template

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">
  <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="">
  <link rel="preconnect" href="" crossorigin>


  <!-- 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">

  <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">
  <!-- ======= 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">

      <!--    ========= 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>

      <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> 


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>
    {% include "templates/includes/footer/footer.html" %}
  <!-- 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=""></script>
   <script src="assets/custom_Web/vendor/vendor.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/custom_Web/js/main.js"></script>



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.

Screenshot from 2022-10-24 15-16-16

Which gives me

@import url(";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.


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.

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.

Any Help?

At least how I can get webform to inherit from templates?

1 Like

I have been trying to do the same. Check out this youtube video. I have some examples that will be helpful for you. 33. How to Import Bootstrap Template Into Frappe Portal ERPNext - YouTube

You need to make a new app and make your changes.

I hope it helps!