Log in

Adding new css styles

  • 14 Mar '16

What is the proper way to add new styles?

Currently I found, that the only possible way to do that is to override whole spirit/_base.html template, like I did here.

Since spirit/_base.html contains some JavaScript logic, I would like a better way, to inject my styles. Is this is the only way to add styles or I'm doing something wrong?

nitelyEsteban Castro Borsani
  • 2
  • 14 Mar '16

Currently I found, that the only possible way to do that is to override whole spirit/_base.html template

That's right. It's the only way ATM.

We could include _custom_styles.html (empty file initialy) to the base so you would just have to override that file. I would be ok with this solution if you think it could work for you.

  • 1
  • 14 Mar '16

Yes this solution would be better, since _base.html contains some JavaScript in it, so I don't want to update it manually after upgrading Spirit.

  • 14 Mar '16

Same approach would be useful at the bottom of _base.html in order to include code snippets like Google Analytics. These usually go at the bottom in order to speed up page loading.

  • 14 Mar '16

Another options would be to have _layout.html, that would look like this:

{% extends "_base.html" %}

Then all Spirit templates should extend _layout.html instead of _base.html. This would allow all projects using Spirit to easily override this empty _layout.html template and override blocks from _base.html.

This would give much more control to customize Spirit's look. If you like this idea, I could create pull request for this.

nitelyEsteban Castro Borsani
  • 4
  • 14 Mar '16

Yeah, it seems great.

Then all Spirit templates should extend _layout.html instead of _base.html.

What about moving the code from _base.html to _layout.html and making base to extend the layout? this way none of the other templates have to be modified.

_base.html

{% extends "_layout.html" %}

{% block base_head %}
# custom style tags, etc
{% endblock %}

{% block base_footer %}
# Google analytics, etc
{% endblock %}
  • 14 Mar '16

@nitely said:
What about moving the code from _base.html to _layout.html and making base to extend the layout? this way none of the other templates have to be modified.

Yes, that would work too with smaller code change. I just felt that _layout.html name has better semantic meaning for the purpose, but I guess this is subjective.

  • 2
  • 22 Mar '16

Until this is implemented in the templates, I found a quick and dirty way of putting my custom CSS in the footer section. Since jQuery is also imported, other HTML manipulations are easy.
You can check it out here: rpg.quadrant.one (its Hungarian, but the style is the important thing)
This way I could add a simple menu after the header like so:

<script type="text/javascript">
$("<div class=\"headermenu\" align=\"center\">\
<a class=\"button\" href=\"/topic/14/\">A Fórumról</a>\
<a class=\"button\" href=\"/topic/10/\">Játékszabályok</a>\
<a class=\"button\" href=\"/topic/5/\">Univerzum</a>\
<a class=\"button\" href=\"/topic/6/\">Fajok</a>\
<a class=\"button\" href=\"/topic/7/\">Kasztok</a>\
<a class=\"button\" href=\"/topic/8/\">Karakterek</a>\
</div><br/>").insertAfter(".header");
</script>

Or change the font and add a background:

@import url(https://fonts.googleapis.com/css?family=Roboto:300&subset=latin,latin-ext);
html {
  font-family: Roboto;
  background-image: url('/static/background.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 10px 10px 10px 10px;
}
Reply