Use Nikola's Project Pages plugin without Bootstrap theme

CSS

Adding/Altering style parameter of a theme is easy: go to /themes/CURRENT_THEME/asstes/css/ and edit the custom.css. If you want to use a separate file put it in this very folder and add the filename to /themes/CURRENT_THEME/bundles.

First I had to find the missing CSS assignments in the Bootstrap theme's CSS file. You can download the resulting file so you don't have to do this again.

Carousel

The Bootstrap carousel is a plugin to create nifty and automatic slideshows.

The plugin generates a carousel on the index page for every project that is tagged as

.. status: featured

I decided that a pure CSS slider may not be animated but still an acceptable JS-free solution. To realize this you have to edit the project.tmpl which is located in plugins/projectpages/templates/TEMPLATE_ENGINE/.

If you go with this simple slider you will need just a few lines above the "All projects" section:

% if featured:
<div class="carousel">
  % for p in featured:
  <input type="checkbox" class="faux-ui-facia">
  <div class="slide" annot="${p.title()}">
    <img src="${p.meta('previewimage')}" alt="${p.title()}">
  </div>
  % endfor
</div>
% endif

Next step is adding the slider's CSS assignments to your custom CSS (see above).

On the project's summary page I considered it better to put the description into the detail's box so I also altered the project.tmpl.

Files

• CSS file to add to your theme

  • projectfiles.css

• Mako templates

  • projects.tmpl

  • project.tmpl

• Jinja templates

  • projects.tmpl

  • project.tmpl