apricot-theme

A basic example theme for apricotbb

Sprout (apricot/sprout) is a tiny theme built on top of core's default styles to showcase how apricot themes work. It only changes what it needs to, and touches on alot of the basics of themeing. Written with plain css/js and no build step

Try it

From within an apricot install:

composer require apricot/sprout

Then head to the admin panel, go to the Theme section, and choose Sprout from the dropdown and hit Use Theme

Don't have composer? Unzip it into apricot/themes/sprout/ and pick it the same way. We like to give everyone choices

Where stuff lives

basic	file
package + discovery	composer.json (type and extra.apricot)
theme class	src/Sprout.php. optional. only needed for custom php stuff
twig functions	src/Twig/SproutTwig.php adds sproutGreeting(). names are camelCase
options	options.php. uses core's logo, favicon, accentColour (with a custom default), and adds band (colour) + corners (choice). call it in twig using theme.band
layout	templates/_layouts/main.twig. override of core's layout file. it keeps the slots, body, banner, notices, and core scripts
extend core	templates/index.twig extends @core/index.twig and only adds to the hero block
full override	templates/_errors/404.twig replaces core's 404 page entirely
macros	templates/_macros/sprout.twig. use unqiue macro file names
everything else	falls back to core's default templates/styles + sprout.css
styles	assets/css/sprout/sprout.css loads after core's base.min.css and overrides a few bits to showcase
js	assets/js/sprout/sprout.js. adds a back to top button
svgs	assets/svg/sprout/. Font Awesome 7 icons inlined with the svg('svg/sprout/seedling.svg') helper
extensions	layout's attachSlot() calls determine where extensions like shoutbox show up

Templates can override core by matching the path/file. templates/board/topic.twig would replace core's topic page automagically

Things to try

• change the accent colour, header bg colour, and some of the corners from the theme options in the panel
• upload a your own logo + favicon
• try to see a page that doesn't exist
• scroll all the way down and trigger the scroll to top button
• install the shoutbox extension and see it magically slot into the index