python django plugins content-management-system django-cms

Django CMS Plugin not loading CSS

EDIT:

I found the answer, scroll down to my next post to see it !

(I didnt include render_block "js" and "css" in the right place and that is why the CSS did not load)

I made a django CMS plugin for my news website, from the "article" model. The plugin is "working" in the way that I see all the raw HTML with the data that I want displayed, but It does not apply CSS to my article and I got no clue why.

any idea ?

My code :

plugin:

from cms.plugin_base import CMSPluginBase
from cms.plugin_pool import plugin_pool
from news_cms_integration.models import ArticlePluginModel
from django.utils.translation import ugettext as _


@plugin_pool.register_plugin  # register the plugin
class ArticlePluginPublisher(CMSPluginBase):
    model = ArticlePluginModel  # model where plugin data are saved
    module = _("Article")
    name = _("Article Plugin")  # name of the plugin in the interface
    render_template = "news_cms_integration/article_plugin.html"

    def render(self, context, instance, placeholder):
        context.update({'instance': instance})
        return context

my plugin html :

{% load sekizai_tags %}
{% render_block "css" %}

<h1>{{ instance.article.title }}</h1>

<section class="container post-details-area">
    <div class="container single-article-div">
        <hr class="hr-single hr-top">
        <h2 id="article-title" class="single-article-titles">{{ article.title }}</h2>
        <hr class="hr-single">
        <img class="single-article-img" src="{{ article.article_image.url }}" alt="">
        <!-- *********************************** -->
        <hr class="hr-single">
        <p>Category: {{ article.article_category }}</p>
        <hr class="hr-single">
        <div class="row justify-content-center">
            <!-- Post Details Content Area -->
            <div class="col-12 col-xl-8">
                <div class="post-details-content bg-white box-shadow">
                    <div class="blog-thumb">
                    </div>
                    <div class="blog-content">
                        <div class="post-meta">
                            <a href="#">{{ article.pub_date }}</a>
                        </div>
                        <h3 class="single-article-titles post-title"> {{ article.description }}</h3>
                        <hr>

                        <!-- Post Meta -->
                        <div class="post-meta-2">
                            <a href="#"><i class="fa fa-eye" aria-hidden="true"></i> 1034</a>
                            <a href="#"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 834</a>
                            <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i> 234</a>
                        </div>
                        <p>{{ article.article_text }}</p>
                        <hr />

                        {% include "partials/_thumbnails.html" %}

                        <hr>
                        <p>Author: {{ article.author }}</p>

                        <hr>

                        {% for comment in article.comments.all %}
                        <div class="comment">
                            <div class="date">{{ comment.created_date }}</div>
                            <strong>{{ comment.author }}</strong>
                            <p>{{ comment.text|linebreaks }}</p>
                        </div>
                        {% empty %}
                        <p>No comments here yet :(</p>
                        {% endfor %}
                    </div>
                    <!-- Post A Comment Area -->
                    <div class="post-a-comment-area bg-white mb-30 p-30 box-shadow clearfix">
                        <!-- Section Title -->
                        <div class="section-heading">
                            <h5>LEAVE A REPLY</h5>
                        </div>
                        <!-- Reply Form -->
                        <a class="btn btn-default comment-btn"
                            href="{% url 'news:add_comment_to_article' pk=article.pk %}#add-comment">Add
                            comment</a>
                    </div>
                </div>
            </div>
        </div>
</section>


{% render_block "js" %}

Any idea why is this going on ? In my base.html I have included :

{% load cms_tags sekizai_tags %}
{% load static %}
{% render_block "css %}
{% render_block "js" %}

I have also tried wrapping all the scripts in :

{% addtoblock "css" %} and {% endaddtoblock %}

In case you need it, here is my base.html :

{% load cms_tags sekizai_tags %}
{% load static %}
<!doctype html>
<html lang="en">

<head>
  {% render_block "css" %}
  <meta charset="utf-8">
  <title>Fake News</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">

  {% block "scripts" %}
  <!-- Favicons -->
  <link href="{% static 'images/favicon.png' %}" rel="icon">
  <link href="{% static 'images/apple-touch-icon.png' %}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900"
    rel="stylesheet">

  <!-- Bootstrap CSS File -->
  <link href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

  <!-- Libraries CSS Files -->
  <link href="{% static 'lib/nivo-slider/css/nivo-slider.css' %}" rel="stylesheet">
  <link href="{% static 'lib/owlcarousel/owl.carousel.css' %}" rel="stylesheet">
  <link href="{% static 'lib/owlcarousel/owl.transitions.css' %}" rel="stylesheet">
  <link href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
  <link href="{% static 'lib/animate/animate.min.css' %}" rel="stylesheet">
  <link href="{% static 'lib/venobox/venobox.css' %}" rel="stylesheet">

  <!-- Nivo Slider Theme -->
  <link href="{% static 'css/nivo-slider-theme.css' %}" rel="stylesheet">

  <!-- Main Stylesheet File -->
  <link href="{% static 'css/style.css' %}" rel="stylesheet">

  <!-- Responsive Stylesheet File -->
  <link href="{% static 'css/responsive.css' %}" rel="stylesheet">
  {% endblock %}

</head>
</body>
<!-- {% cms_toolbar %} -->

<!-- {% cms_toolbar %} -->
{% block base_product %}
{% placeholder "base_product" %}
{% endblock %}

{% block navbar %}
{% include "partials/_navbar.html" %}
{% endblock %}

{% block index %}
{% endblock %}

{% static_placeholder "yo" %}

{% block article %}
{% endblock %}

{% block articles %}
{% endblock %}

{% block search %}
{% endblock %}

{% block comment %}
{% endblock %}


{% block about_footer %}
{% include "partials/_about_footer.html" %}
{% endblock %}



{% render_block "js" %}
<script src="{% static 'lib/jquery/jquery.min.js' %}"></script>
<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>
<script src="{% static 'lib/venobox/venobox.min.js' %}"></script>
<script src="{% static 'lib/knob/jquery.knob.js' %}"></script>
<script src="{% static 'lib/wow/wow.min.js' %}"></script>
<script src="{% static 'lib/parallax/parallax.js' %}"></script>
<script src="{% static 'lib/easing/easing.min.js' %}"></script>
<script src="{% static 'lib/nivo-slider/js/jquery.nivo.slider.js' %}" type="text/javascript"></script>
<script src="{% static 'lib/appear/jquery.appear.js' %}"></script>
<script src="{% static 'lib/isotope/isotope.pkgd.min.js' %}"></script>


<script src="{% static 'contactform/contactform.js' %}"></script>

<script src="{% static 'js/main.js' %}"></script>



</body>

</html>

But that did not work either :( Any help appreciated !

Solution

SOLUTION :

(I didnt include render_block "js" and "css" in the right place and that is why the CSS did not load)

{% load cms_tags sekizai_tags %}
{% load static %}
<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <title>Fake News</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">

  {% block "scripts" %}
  <!-- Favicons -->
  <link href="{% static 'images/favicon.png' %}" rel="icon">
  <link href="{% static 'images/apple-touch-icon.png' %}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  {% addtoblock "css" %}
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900"
    rel="stylesheet">{% endaddtoblock %}

  <!-- Bootstrap CSS File -->
  {% addtoblock "css" %}
  <link href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Libraries CSS Files -->
  {% addtoblock "css" %}
  <link href="{% static 'lib/nivo-slider/css/nivo-slider.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/owlcarousel/owl.carousel.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/owlcarousel/owl.transitions.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/animate/animate.min.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/venobox/venobox.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Nivo Slider Theme -->
  {% addtoblock "css" %}
  <link href="{% static 'css/nivo-slider-theme.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Main Stylesheet File -->
  {% addtoblock "css" %}
  <link href="{% static 'css/style.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Responsive Stylesheet File -->
  {% addtoblock "css" %}
  <link href="{% static 'css/responsive.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% endblock %}
  {% render_block "css" %}
</head>
</body>
{% cms_toolbar %}

<!-- {% cms_toolbar %} -->
{% block base_product %}
{% placeholder "base_product" %}
{% endblock %}

{% block navbar %}
{% include "partials/_navbar.html" %}
{% endblock %}

{% block index %}
{% endblock %}

{% static_placeholder "yo" %}

{% block article %}
{% endblock %}

{% block articles %}
{% endblock %}

{% block search %}
{% endblock %}

{% block comment %}
{% endblock %}


{% block about_footer %}
{% include "partials/_about_footer.html" %}
{% endblock %}




{% addtoblock "js" %}
<script src="{% static 'lib/jquery/jquery.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/venobox/venobox.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/knob/jquery.knob.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/wow/wow.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/parallax/parallax.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/easing/easing.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/nivo-slider/js/jquery.nivo.slider.js' %}" type="text/javascript"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/appear/jquery.appear.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/isotope/isotope.pkgd.min.js' %}"></script>{% endaddtoblock %}


{% addtoblock "js" %}
<script src="{% static 'contactform/contactform.js' %}"></script>{% endaddtoblock %}

{% addtoblock "js" %}
<script src="{% static 'js/main.js' %}"></script>{% endaddtoblock %}
{% render_block "js" %}


</body>

</html>