diannevolek's picture

Posted by diannevolek on Fri, Jun 25, 2021 - 7:39pm

I'm trying to see if I can recreate this D7 website (which uses a Bootstrap 3 subtheme) in Backdrop.

https://www.harleyonsafari.co.za

  • a fixed navbar at the top
  • a full width hero image slideshow (the above website uses backstretch and a context)
  • a fixed width page container
  • One or more horizontal "panels" below to put featured blocks
  • A multi-column footer

I've gone through all the themes, and every theme has a small banner in a container?  I've spent several hours trying to "break out" of the container and remove the padding and margins without success. I'm happy to use the CSS injector module but so far it doesn't seem to overwrite the theme and Bootstrap CSS.

I'm not sure if I'm clear layouts vs themes. I'm using Boxton, and perhaps I should be adding container classes in the layout to achieve my goals?

Can anyone suggest a theme? Or a place where I can find some documentation and videos that would help me achieve the above. I loved D7, and Backdrop looks like it's had some real thought put into it.  Perhaps I'm missing something important here in how to structure the website.

Most helpful answers

If you have specific

If you have specific questions about Tatsu or find any issues/problems, I recommend using the issue queue for Tatsu: https://github.com/backdrop-contrib/tatsu/issues

Tatsu currently includes Bootstrap 4.3.1. We should maybe give users the option to select newer versions of Bootstrap. 

FYI - there are two other Bootstrap based themes:

https://backdropcms.org/project/bootstrap_lite
https://github.com/backdrop-contrib/bootstrap5_lite (under development)

I agree that this would be valuable: "training videos or examples on how the Bootstrap 4 classes work with regions, rows,  blocks and views?"

I don't know of any right now.

Comments

Fri, Jun 25, 2021 - 8:46pm by docwilmot

Hello dianne, think of themes in Backdrop as just a skin: it provides CSS and JS effects essentially. The layout, columns, containers, are provided by layout templates. Have you tried creating a flexible layout? Cant write more than this now, maybe tomorrow can explain some more if someone else isnt able to help.

Fri, Jun 25, 2021 - 11:45pm by diannevolek

Thank you, so the secret is in the layout! There are videos on youtube so I'll work through those and hopefully it will fall into place. 

Mon, Jun 28, 2021 - 7:46pm by diannevolek

Layouts are ingenious! It looks like a really sensible way to get the different looks I need.

I selected Tatsu 1.x-1.0.5 as the theme because it is full width, and appears to be Bootstrap (although it doesn't specify which version of Bootstrap).  The Configurable Block Style module sorts out all my "text-container" issues with a tickbox (brilliant - thank you for that video!)

I've downloaded the Flexible Layout template. I would like to add Bootstrap 4 styles to the rows, but so far I am not able to get the layouts to change. I don't think it's a cache. Some items work like BG-dark, but many don't. It might be because I haven't added classes correctly at a high region/row level? I used Bootstrap 3 in D7, but Bootstrap 4 is new to me.

Are there any training videos or examples on how the Bootstrap 4 classes work with regions, rows,  blocks and views?

Wed, Jun 30, 2021 - 3:59pm by docwilmot

You should not really need the contrib flexible layout project(s) at all, since we've moved flexible layouts into core since that template was first released. See admin/structure/layouts/settings/flexible-template/add

And yes Layouts are brilliant once you get used to the concept. 

Keep in mind though that the theme you choose is unlikely to have any control over layout widths and container sizes and such. Youll need to get or modify a layout template that sets things out the way you want them, and use the theme mostly for styling.

You may need to describe more clearly what youre trying to achieve here.

Wed, Jun 30, 2021 - 11:54am by stpaultim

If you have specific questions about Tatsu or find any issues/problems, I recommend using the issue queue for Tatsu: https://github.com/backdrop-contrib/tatsu/issues

Tatsu currently includes Bootstrap 4.3.1. We should maybe give users the option to select newer versions of Bootstrap. 

FYI - there are two other Bootstrap based themes:

https://backdropcms.org/project/bootstrap_lite
https://github.com/backdrop-contrib/bootstrap5_lite (under development)

I agree that this would be valuable: "training videos or examples on how the Bootstrap 4 classes work with regions, rows,  blocks and views?"

I don't know of any right now.

Wed, Jun 30, 2021 - 3:44pm by diannevolek

Thank you for sharing your experience. Tatsu with Bootstrap 4 seems perfect for my requirements - it has a few critical improvements on B3.

Several of my clients are in South Africa which commonly has  older browsers and phones, expensive mobile data and slow internet lines. I need to be cautious with cutting-edge technologies.