📄Page Structure
In Flask, maintaining a consistent layout across multiple web pages is achieved through the use of base templates and template inheritance, We have created different base layouts in templates/layouts like main-layout.html, auth-layout.html, component-layout.html for different views for different pages.
<!doctype html>
<html lang="en">
<head>
{% block title %}
{% endblock %}
{% block css1 %}
{% endblock %}
{% include './head-css.html' %}
{% block css2 %}
{% endblock %}
</head>
<body data-pc-preset="preset-1" data-pc-sidebar-caption="true" data-pc-layout="vertical" data-pc-direction="ltr" data-pc-theme_contrast="" data-pc-theme="light">
{% include './layout-vertical.html' %}
<div class="pc-container">
<div class="pc-content">
{% block mainContent %}
{% endblock %}
</div>
</div>
<!-- Add your main content here -->
{% include './footer-block.html' %}
{% include './customizer.html' %}
{% block js1 %}
{% endblock %}
{% include './footer-js.html' %}
{% block js2 %}
{% endblock %}
<body>
</html>Layout settings
You can change the default layout in the templates/layouts/main-layout.html file in the body tag
<body
data-pc-preset="preset-1"
data-pc-sidebar-caption="true"
data-pc-layout="vertical"
data-pc-direction="ltr"
data-pc-theme_contrast=""
data-pc-theme="light"
>
data-pc-preset= "preset-1"
To set the your primary theme color you can change ['preset-1' ] for different color.
data-pc-sidebar-caption= "true"
To set the caption on.
data-pc-layout = "vertical"
To set the vertical Sidebar.
data-pc-direction = "ltr"
To set the layout direction left to right.
data-pc-theme = "light"
To set the layout theme light.
data-pc-theme = "dark"
To set the layout theme dark.
Last updated