I am in the process of migrating a few sites from D7 to Backdrop. I am new to Backdrop, and really I know only a little about D7. We used D7 primarily as a wrapper for CiviCRM, and I only learned enough to get done what needed to get done, and our existing D7 themes are a hodgepodge. I want to have a better understanding of Backdrop.
I want all of our new themes to be based on the same structure, and I want bootstrap based sites, so using the Bootstrap5 Lite theme seems obvious. I really like that it offers a variety of options from Bootswatch. I'm starting with cerulean.
Question 1: can I make a subtheme of a Bootswatch layouts? Or will my customizations be a subtheme of Bootstrap5 Lite?
I really like that the previews of the Bootswatch options show a sampling of tags and classes. For example the first theme I am converting uses rounded tabs as a menu, and I can clearly see that Cerulean offers nice rounded nav tabs like my existing theme has.
Question 2: How do I get my existing menu to use these tab styles? They show up simply as an ordered list, without styles. From the Cerulean preview I can see that they use the nav-tabs class, but I can't see any way in Backdrop to apply this class to the menu in question. What am I missing?
That's all for now but I'm sure there'll be more questions as I go on.
Comments
Q 1: you might be able to make a sub theme and have the Bootswatch options available for it. I'm not certain of that.
Q 2: I think bootstrap lite might need the top menu to be selected in the header block options rather than be added as a separate menu block. If I recall correctly. I don't know what you've got.
If it's just a wrapper for CiviCRM the default Basis theme might be enough too? On the admin side I make sure that CiviCRM uses the default Seven admin theme for our sites with CiviCRM.
Hi Rob,
Welcome to Backdrop! Here’s a quick overview:
Subtheming Bootswatch:
You should create your subtheme based on Bootstrap5 Lite, not directly on a Bootswatch style. Bootswatch themes (like Cerulean) are presets — you can select one in the theme settings or override its CSS in your subtheme. Your subtheme will inherit all Bootstrap5 Lite features, including Bootswatch options.
Styling Menus as Tabs:
To apply the nav-tabs class, edit your menu block’s wrapper and menu class settings under Structure → Layouts → Configure Block. Add nav nav-tabs in the CSS class field. Alternatively, you can modify your subtheme’s template (menu.tpl.php or equivalent Twig file) to include those classes automatically.
In short — subtheme Bootstrap5 Lite, not the Bootswatch variant, and add Bootstrap’s classes to your menu block or templates for tab styling.
Welcome to Backdrop! For your setup, you’ll want to create a subtheme of Bootstrap5 Lite itself; the Bootswatch styles (like Cerulean) are just presets that B5 Lite loads, and you can “lock in” or tweak them by copying their variables/CSS into your subtheme. For the tabs, Backdrop’s default menu markup won’t magically pick up Bootstrap’s nav styles—you need the menu’s
<ul>to beclass="nav nav-tabs"and each item/link to usenav-item/nav-link. Easiest no-code route is to add those classes at the block/menu level if your site has a “block class” or “menu attributes” option; otherwise, in your subtheme add a small override (preprocess or template) to inject those classes somenu--YOURMENUNAME.tpl.php(or a preprocess formenu_tree/menu_link) outputs Bootstrap-friendly markup. Once the classes are in place, Cerulean’s rounded tabs will appear exactly like in the preview.