So, far we have seen how to make templete and how to use html templete.
We know that every website uses static files like css,js,image etc.
They more likely never change and remain static throughout website.
So in django style , all static files should be kept in a special directory named static ,
although this can be changed from setting.py file.
You will find this setting in main webproject’s settings.py file.
Capture.PNG

 

Okay……………


We want to make a template which will be like this

Capture.PNG

Html code to make this UI can be found here CODE

You can check it using online editor , just goto  this link and copy past the above code in the editor and you will see our desired UI.

If you see the UI code then you will find that we have used some CDN for using bootstrap css,js files
Capture.PNG

But we dont want to use CDN that’s why we will use offline files.
As they are static file, according to django we will keep them inside a folder named static. Download them from the respective url.
Capture.PNG

Now goto personal/templates/personal/header.html and modify like below

Capture.PNG

Full code of header.html can be found here

We use the load staticfiles command to load in all available static files. Next, we specifiy the path to the one we want in this case to reference for our stylesheet. The static directories start with /static/ and then we need to specify the rest of the way. For us, the rest of the way to the bootstrap.min.css file is personal/bootstrap.min.css. It is important to note here that we can use this identical reference from any other app, Django is going to look in all /static/ directories in any installed apps for this path.

Capture.PNG

Full code of home.html can be found here

Finally we will get the output.
Capture.PNG

 

So, we have used static file,templete and used it like django style.

PART 6