CODEWITHSUNDEEP
django
Jack022
Jack022

Reputation: 1257

Django - is it possible to include two templates with different styles?

I created a template on my Django app, it uses it's own CSS files and its own style. Now i would like to add on top of this template my own navbar that i'm using on the rest of the app.

The problem is that the navbar has its own styles, and the template has its style too, so mixing them messes up both the navbar and the rest of the template.

I thought that using include instead of extends would fix my problem, but the i problem is that when i try with

template.html

{% include 'navbar.html' %}
...

the two parts will still collide.

Is there any way to import an element in a template without applying all the styles of the element to the rest of the template in Django? Or is mine a CSS problem and i should solve it there? Any kind of advice is appreciated.

Upvotes: 0

Views: 321

Answers (1)

Redgren Grumbholdt
Redgren Grumbholdt

Reputation: 1230

Your problem is not linked to Django exactly, but to how HTML and CSS work, hence the mixed styles you're getting. What I can think of is to namespace your selectors (classes) or specifically apply styles to elements you intend to by defining the paths from the top parents.

For example, if your nav bar is like this:

<nav class="my-nav">
    <ul class="nav-ul">
        <li class="nav-link">Link 1</li>
        <li class="nav-link">Link 1</li>
    </ul>
</nav>

and you wanted to have a custom font just for this navbar, don't do this in any of the css files:

* {
   font-family: 'Font Name';
}

For this will apply to everything on that HTML page, instead, do this:

/* navbar.css */
nav.my-nav > ul {
   font-family: 'Font Name';
}

/* and for styling links inside */
nav.my-nav > ul.nav-ul > li.nav-link {
   /* styles */
}

By doing this you'll make sure styles only get applied to the elements you intend on styling.

That's the only way you can solve thi IMO because you cant set CSS to apply to only a certain portion of HTML by any other way than by using selectors.

Upvotes: 2

Related Questions