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

How to install demo31 layout in Django?


Django only comes with demo1. I have downloaded demo31

https://preview.keenthemes.com/metronic8/demo31/index.html

How to I replace demo1 with the downloaded demo31 layout?


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 (10)


Django documents need love. I have read the whole doc yet don't know how to replace the demo layout.

Also the setting for dark mode and toggle do not work. No toggle and the mode is always light.

######################
# Keenthemes Settings
######################

KT_THEME = 'metronic'


# Theme layout templates directory

KT_THEME_LAYOUT_DIR = 'layout'


# Theme Mode
# Value: light | dark | system

KT_THEME_MODE_DEFAULT = 'dark'
KT_THEME_MODE_SWITCH_ENABLED = True



Anyone? How do I get support?



Hi,

Here are the general steps to replace the default demo1 layout in Django with the downloaded demo31 layout from Metronic:

1. Understand Theme Structure
Begin by familiarizing yourself with the file structure of the Metronic theme. You can find this information in the documentation: [Metronic File Structure](https://preview.keenthemes.com/html/metronic/docs/getting-started/file-structure). Review the index.html template to understand the CSS and JS includes in the template's head and foot sections.

2. Use Layout Builder (Optional)
If you're looking to replicate a specific demo layout, such as demo31, you can use the layout builder to configure the layout with available options and preview it in real-time. For example, you can visit the online preview of demo31: [Metronic Demo31](https://preview.keenthemes.com/metronic8/demo31/) and click the "Layout Builder" link below the "Dashboards" submenu in the left-side menu. Configure your preferred layout using the layout builder page: [Layout Builder](https://preview.keenthemes.com/metronic8/demo31/layout-builder.html).

3. Download Preferred Configuration
After configuring your preferred layout using the layout builder, you can download the HTML code of your chosen configuration. Scroll to the bottom of the layout builder page and find the "Export" button. This will provide you with a package containing the HTML template and includable partials (header, aside, footer, etc.) that are suitable for integrating into your Django project.

4. Integrate Master Layout
Begin by integrating the master layout, menus, and navigation into your Django project in /starterkit/_templates/layout. Make sure to include the necessary CSS and JS files from HTML version demo in your Django project's. /starterkit/_keenthemes/src

5. Customize Inner Pages
Once you have integrated the master layout, proceed to customize and integrate the inner pages of your Django project. Refer to the original Metronic theme demos for guidance on structuring and styling your inner pages. Use the source code of the demo pages for each feature as a reference. This will help you understand how different components and features are implemented.

Remember that while replacing a demo layout can be a bit involved, taking the time to understand the theme's structure and integrating it step by step will help you achieve the desired result. If you encounter any specific issues during the integration process, don't hesitate to seek further assistance.



Thanks, I figured it out during the weekend. It took quite a bit of time for me to figure it out and get it done. Would be good to include all this in the doc for Django.

Also would be good to include the django template scripting {% include layout/partitial/.... %} in the template builder export HTML instead of just a commented out what to include. It'd have saved a lot of time.



Regarding the issues you're facing with the dark mode toggle and mode being stuck in light mode, it's possible that cached data could be causing these problems. Cache can sometimes prevent new settings from taking effect properly.

To resolve this, please try clearing your browser's cache and then refresh the page. Here's how you can clear the cache in commonly used browsers:

- Chrome: Press Ctrl + Shift + Delete, select 'Cached images and files', and click 'Clear Data'.
- Firefox: Press Ctrl + Shift + Delete, select 'Cached Web Content', and click 'Clear Now'.
- Safari: Go to Safari > Preferences > Privacy, click 'Manage Website Data', and then 'Remove All'.

If you continue to experience issues, feel free to ask for further assistance.



I digged into the code to find to localStorage. clear() localStorage theme also did the trick.



One more question, for demo31, how do I show secondary sidebar for some primary sidebar items but not for others, with the animation slide in/out to show/hide the secondary sidebar on click on primary sidebar items?



Could you please provide more context or clarify your question regarding how to show a secondary sidebar for specific primary sidebar items in the context of "demo31"? Providing more details will help me understand your question better and provide a more accurate response.

Thank you



https://preview.keenthemes.com/metronic8/demo31/

if you go to this theme, there is a primary sidebar (collections, APIs, environment,... etc) and a secondary sidebar that reloads when an item on a primary sidebar is selected.

I'd like say click on APIs in primary sidebar but NOT show the secondary sidebar (Visit by country) and show the secondary sidebar on others



I'm sorry, but the feature you're asking about, which involves showing the secondary sidebar for some primary sidebar items while hiding it for others with a slide-in/out animation, is not available by default in the Metronic 8 theme. Unfortunately, this feature is not available by default in the theme, and it would require extending the JavaScript script.

The Metronic theme provides a foundation, but further customization and development to achieve specific behavior, such as showing or hiding the secondary sidebar dynamically, would be the responsibility of the developer or the user of the theme.

If you're interested in exploring and customizing the menu script to implement this feature, you can take a look at the following files within the theme:

/demo31/src/js/layout/sidebar.js: This file likely contains the JavaScript logic for handling the primary and secondary sidebars.

/demo31/src/js/components/menu.js: This file may include the menu-related JavaScript code, including how menus are initialized and interacted with.

To achieve the specific behavior you described, you would need to modify and extend the JavaScript in these files to toggle the visibility of the secondary sidebar based on which item in the primary sidebar 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  :(