Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Djano default header layout full width


Hello,
I set Djano's default layout to the default header,

```
"layout": KTTheme.setLayout("default_header_layout.html", context),
```
But now I can see page content in the middle, how can I stretch to full page width?
Which setting should I change?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


You're welcome Jigar Patel! I'm glad to hear that everything is working now. If you have any more questions, feel free to ask! happy



Apologies for the delay. Please make the following changes only in the specified files:

1. Update the following line in `/django/starterkit/_keenthemes/__init__.py`:

"layout": KTTheme.setLayout("default_header_layout.html", context),


2. Modify /django/starterkit/_templates/layout/_bootstrap/default.py:

KTBootstrapDefault.initDarkHeaderLayout(context)


The default_header_layout.html file, located at /django/starterkit/_templates/layout/, will be loaded as the new layout.



Thank you, Faizal, everything works now. :-)



Hi,

Apologies for the delay in response. To stretch the page content to full width in Django with the default header layout, follow these steps:

Enable the default layout:

"layout": KTTheme.setLayout("default_header_layout.html", context)


Enable the dark header layout initialization in /starterkit/_templates/layout/_bootstrap/default.py:

KTBootstrapDefault.initDarkHeaderLayout()


Disable the dark sidebar layout initialization, by commenting it out:

# KTBootstrapDefault.initDarkSidebarLayout()


Remove the container-xxl class from the header, toolbar, and content containers to allow full-width content:
- Locate the header, toolbar, and content containers in your HTML or template file.
- Remove the container-xxl class from those containers.

If you have any further questions or encounter issues, feel free to ask.



Hello Faizal,
Thanks for reply, it worked little, but I can still see sidebar there and after all container content shifted down below to sidebar,

I made this 3 changes,

1. in _keenthemes/views.py...

# Define the layout for this module
# _templates/layout/system.html
context.update({
'layout': KTTheme.setLayout('default_header_layout.html', context),
'status': self.status,
})

2. in _templates/layout/bootstrap/default.py.....

# 1) Light sidebar layout (default.html)
#KTBootstrapDefault.initLightSidebarLayout(context)

# 2) Dark sidebar layout (default.html)
#KTBootstrapDefault.initDarkSidebarLayout(context)

# 3) Dark header layout (default_header_layout.html)
KTBootstrapDefault.initDarkHeaderLayout(context)

# 4) Light header layout (default_header_layout.html)
#KTBootstrapDefault.initLightHeaderLayout(context)

# Init global assets for default layout
KTBootstrapDefault.initAssets(context)

3. _templates/layout/default_header_layout.html....

<!--begin::Content-->
<div class="app-content flex-column-fluid">
<!--begin::Content container-->
<div class="app-container">
{% block content %}
{% endblock content %}
</div>
<!--end::Content container-->
</div>
<!--end::Content-->

How to attach an image to show output?



One more thing, if i remove ... {% include './partials/sidebar-layout/_sidebar.html' %} ... from _templates/default.html then the sidebar is not appearing, but why it look for default.html, even though default_header_layout.html is selected?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(