A (probably) dumb question about the Skeletons and HTML5UP

Support Themes & Styling
1

So I see there are a lot of HTML5UP themes, but not the one I want! The answer to this is probably “no” but could I possibly just download one of the HTML5UP themes and replace the data in one of the grav skeletons with a different HTML5UP theme?

If, by scarce chance the answer is yes–which folder do I replace?

2

No.

You can, however, port the theme yourself.

3

@brimwats, I’ve just downloaded a HTML5up theme and gave it a try…

Here are some coarse steps.

The easy part:

  • Generating a fresh theme using bin/plugins devtools newtheme
  • Clear css/js folders in new theme and copy over css and js files from HTML5 theme
  • Copy the webfonts into the new theme
  • Copy the images
  • Create new template: /templates/partials/base5up.html.twig
  • Make /templates/default.html.twig extend 'base5up.html.twig`
  • Copy content of index.html from HTML5up into base5up.html.twig

The browser will now show you an ugly page without styling…

The hard(er) part:
You will now have to ‘template-ify’ the original `index.html’ content to dynamically generate html using generic Twig code combined with specific Grav functions.

Parts that need to be ‘template-ified’ are for example:

  • Dynamic values required in the <head> like <title>
  • Including stylesheets and javascript using Grav’s addCss() resp. addJs() functions.
  • Generation of the menu
  • Including the parsed Markdown of a page
  • Extract parts into smaller templates for reusability
  • If you have different types of pages you will need to create multiple templates, e.g a default page, modular page or blog pages.

Hope this gives you a rough idea of the process.

4 Likes
4

@pamtbaau, what a lovely reply! thank you for the guide. I actually got frusturated and decided just to teach myself how to mash themes together, but this is pleaseing and offers another place of exploration for me next!

(Presenting: the Gateway+Resume Mashup Theme! Would love some feedback (and recommendations for duplicate code deletion!))

5

Correct me if I’m wrong but couldn’t he utilize the custom css plugin to make this process easier?

6

@no-one, Never heard of the ‘Custom Css’ plugin, but according its readme:

The Custom CSS Plugin for the Grav CMS allows to add additional CSS to your site, without editing the theme or having to create a plugin for the simple task of adding some custom lines of sylesheets.

In OP’s case, there is no theme yet. When downloading an HTML5Up “theme”, all you get is an hardcoded index.html file, sass, css, javascript, font and image files. No Twig templates…

That means there is no way to turn Markdown pages into html pages.

7

Porting a theme is IMHO one of the best ways for relative newbies to Grav to level up their knowledge. It teaches you a lot about how Grav works and not just theming - I recommend it!

2 Likes