Best place to modify CSS framework?

[titaniumbones]

Hi, first thanks for this app, it's so cool. We're hoping to use it on a couple of projects.

Do you have any suggestions for the best place to make interventions into the CSS framework? In another issue I saw you suggest that we try to contain changes to kerkoapp, but I see that the Bootstrap choices are largely set in kerko itself. [Edit:] To clarify, we're striving to match CSS in a completely separate, non-Bootstrap project, so would like to make some choices that help with that. Probably modifying bootstrap variables in scss would be sufficient for what we want to do, but I think that may be tough to do directly in kerko or kerkoapp.

I'm not very familiar with Flask or jinja, but would it also be possible to override the item templates? I tried the method of creating a custom-templates directory in kerkoapp/templates (suggested by #29) but I think some of the directory structures have changed since that issue was written, and my own attempt (updating either KERKO_TEMPLATE_ITEM or item under [kerko.templates] with the value custom-templates/item.html.jinja2 and also creating/modifying that file) did not seem to produce any changes to the display.

Thank you!

[nickpasiuk]

@titaniumbones Hey, did you understand how to add custom styles?

[davidlesieur]

@titaniumbones @nickpasiuk

Unfortunately, the configuration instructions in #29 don't work anymore because Kerko's configuration system has changed significantly in 1.0.

The default template configuration (which can be found in Kerko's default_config.toml) looks like this:

[kerko.templates]

base = "kerko/base.html.jinja2"
layout = "kerko/layout.html.jinja2"
search = "kerko/search.html.jinja2"
search_item = "kerko/search-item.html.jinja2"
item = "kerko/item.html.jinja2"
atom_feed = "kerko/atom.xml.jinja2"

Thus, you could copy that into your own config.toml or instance.toml config file, and then change the paths to point to your custom templates. If some of those templates don't need to be replaced, just omit them from your config.

I suggest that you gain some understanding of Jinja's template inheritance and blocks system, as that should significantly simplify your work. Instead of replacing whole templates, you could override just the template blocks that actually need to be changed. Such selective customizations will be much easier to maintain, should you want to upgrade Kerko in the future.

For example, you could create a custom-theme/layout.html.jinja2 template that extends kerko/layout.html.jinja2, and in that file override just the bootstrap_css block in order to import a custom Bootstrap CSS that you might have compiled from SCSS. It might look like:

{% extends 'kerko/layout.html.jinja2' %}

{% block bootstrap_css %}
    <link rel="stylesheet" href="{{ url_for('kerko.static', filename='custom-theme/css/bootstrap.css') }}">
{% endblock bootstrap_css %}

Because the item, search, and search_item templates all extend the layout template specified in the configuration, they would inherit your custom Bootstrap CSS without further work.

If you prefer to completely get rid of Bootstrap, that is also possible, but in that case you will probably have to rewrite the whole templates because Bootstrap CSS classes are all over the place.

I hope this helps!