Issue with Django Template Background - html

I'm getting an issue with my background template picture. Each time I'm loading Django template, my background is black in the first time, then becomes good with my picture after 0.5/1 second.
I wrote in my script (Common HTML Template) :
{% load staticfiles %}
{% load static %}
{% load user_tags %}
{% load variables %}
<style>
body {
background-image:url("{% get_static_prefix %}{{ mytheme }}/images/bg.jpg");
}
</style>
The url path is good because my picture is loaded, but I have this black background before during ~ 1s
I didn't write background picture in my CSS file, but only in my common template (navbar template which is called each time).
Do you have any idea ?

It is due to high image quality, you can add the one loader till the all web content so that black screen will not be displayed. There is nothing problem with Django template in this.
http://smallenvelop.com/display-loading-icon-page-loads-completely/

Related

Django Cms - How to add customise menu in djangocms

Hi Im new to cms I was implementing djangocms in my project
I have already have my html files im added placholders in that for making that content editable for example:
{% block content %}
{% placeholder "content" %}
{% endblock content %}
I have added placeholder for all the places i needed when i come to menu i used placeholder it only changes in the current html page i need to change in all the page which have same header and footer
I Have tried
{% show_menu 0 100 100 100 %}
But it comes default cms menus i need menu with my template style.
I have also tried
{% include "header.html" %}
But the placeholder only coming the plugin i need to add link again and again in every page.
Is there any solution for while im adding plugin in header.html it will display on all the pages which have the same header ?

css of bootstrap 3 in django not working as expected

I am trying to use tabbable divs in my django app. The toggle seem to work as expected, the content does show when the next tab is clicked.
But the CSS doesn't seem to be working. When I click on tab2, the focus still is in tab 1. On tab 2, it only grays out the button and when I click on other parts of the page the gray out disappears and even if tab2 details are shown, the focus is on tab 1.
Just to add here are my load scripts for the page
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
On load of the page, I inspected the sources in chrome dev tools. In the sources section, I can see that jquery and bootstrap are loaded.
If your CSS is not working try collecting static files :
python manage.py collectstatic
I was able to make it work. I thought the libraries were not being loaded properly. In a way, because of the way the libraries are imported, they don't seem to work properly.
here's how it looks like at the top of my template
{% load static %}
{% load staticfiles %}
{% static 'static_jquery/js/jquery.js' %}
{% block content %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
What it made work for me was that the bootstrap related libraries must be placed inside the block content. Before, it is placed up top after the load static statements.
And also I had to remove hardcoded script tags at the bottom of my template, then it worked. I had these removed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
Other things that I did was install django_static_jquery, then performed collectstatic

GRAV custom fields / html blocks / custom theme templates

I'm trying to build a static website using the GRAV CMS. So far, I've been creating *.html.twig files and associating a single page to the individual template.
This is how my pages look:
{% block header%}
{% include 'partials/bhss-default-header.html.twig' %}
{% endblock %}
#CONTENT
{% block footer%}
{% include 'partials/bhss-default-footer.html.twig' %}
{% endblock %}
However, my purpose is to have an editor creating pages from the admin interface and adding HTML blocks similar to the custom fields or shortcodes in WordPress. I want this blocks to be filled with text.
I need to mention that my website is built with Semantic-UI, so I'm not using any theme provided by GRAV.
How can I replicate this behavior and what choices do I have ? The website is small at this time, so I can remake every page.
Thank you!
If you want to use editor, you need to build your header and footer as Grav pages in Markdown, not Grav theme's template file in Twig. Example:
{% block header%}
{{ pages.find('/my-header').content }}
{% endblock %}
#CONTENT
{% block footer%}
{{ pages.find('/my-footer').content }}
{% endblock %}
my-header and my-footer are 2 pages. You can unpublish these pages to hide them from your menu and forbid direct access to them.

Django - display html with css without staticfiles

Currently learning basics of Django. I kind of understand the concept of url and views. I've downloaded a bootstrap template and I wanted to set it as main page. I know, that I could redo all the page, making it template and put css files into static folder, then link it with url and it should probably work. I managed to display the page creating a lambda HttpResponse function, but I am unable to link css there. Is such thing possible? Can I somehow drop a webpage with css into folder and link it, or do I have to do it django way?
I know, that django way is less messy and probably better, but this is for test and learning purposes only.
Sorry, if it was already asked, I tried looking for the answer before asking.
Copy your css, and put it in HTML page inside <style> </style> tag.
I'm guessing you're going that route because it seems complex to get the static file serving working. Serving your static files is something that's really easy to do - and once you've pointed your static file at something, you can just use if for testing anything:
https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = ("/Users/you/path/to/static",)
Then you just need to use static in the url for that page.
I use a base.html that is extended by all of my templates. You can either have it {% include %} your css, or simply reference it. So you can change 1 variable (I do it in my master context file) and have all of your templates go along for the ride. E.g.
In base.html:
<html>
<head>
{% if testing %}
<!-- directly include stylesheet in page -->
<style>{% include "my.css" %}<style>
{% else %}
<!-- standard stylesheet link -->
<link rel='stylesheet' type='text/css' href='my.css'>
{% end %}
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
In your templates:
{% extends "base.html" %}
{% block content %}
Hi, Mom!
{% endblock content %}
BTW, a base.html that has your full site design and makes very liberal use of {% block %} can make the majority of your view templates short and sweet. The template docs are your friend!

Template inheritance for serving static file on GAE not working

I have a small GAE app that's working fine. I use it to serve a few static files as well like (About page, Privacy and contact page). I put the "about.html" in a /static folder along with the /css, /img and /js. In "app.yaml" I declared the handler:
- url: /static
static_dir: static
It all works fine. Now I've abstracted the common contents (navigations, etc) into "_base.html" like this:
<html>
<head><title> Page title here</title>
<!--Some header files here -->
</head>
<div id="content">
{% block bodycontent %}
{% endblock bodycontent %}
</div>
</body>
</html>
The child file looks like this:
{% extends "_base.html" %}
{% block title %} About {% endblock %}
{% block bodycontent %}
<p>Some contents here...</p>
{% endblock bodycontent %}
Now, problem when it displays, the "_base.html" does not render. In fact the whole jinja code just displays. But when I wrote an handler for "about.html" it renders the base html correctly.
Question is, why do I have to create instances b4 I can display static files like About, Privacy pages just because I want to use template inheritance? Am I doing something wrong?
Templates are not static files, by definition. If you want a completely static HTML file, you can of course have one without any handler code. But templates require rendering, which means they need a handler to do it.