Negative space for focusing on parts of a background image

[thenewguy]

I have been playing around with some content formatting today getting a better feel for the blocks. One particularly challenging issue I encountered is reasonable reproduction of ads formatted for print that use negative space to focus on part of a background image that bleeds to the edges.

This seems like a good fit for the hero block. However, there doesn't seem to be a great way to add "white space" to separate the catch line at the top and a call to action / details at the bottom.

Is there any point/click way offered to scale the hero block and background image based on the viewport size? I.e. using vh units? For example, it would be nice if the hero block I am working on could be forced around 70-85 % of the viewport height and the background image was scaled to fit within it.

The second part of my trouble is positioning content relative to the bottom of the background image. If the hero block is scaled against the viewport, and then the background is scaled to fit in the hero block, then it would be satisfactory if a row could be pinned to the bottom.

What do you typically do with this type of content other than throw it away? Do you break the image up and try to fade the blocks together? I didn't start there because this particular one has objects / people in it that won't fuzz together well. I am not trying to achieve pixel perfect matching, just something that reasonably resembles an ad printed in a magazine for consistency.

[vsalvino]

This all requires custom CSS to accomplish the custom style. CodeRed CMS is designed to give you a boilerplate bootstrap style, and assumes that you will add a lot of custom CSS to implement your own designs.

A simple CSS rule to force hero units to 70% viewport height would be:

.hero-block {
  height: 70vh;
}

And for pinning things to the bottom of the screen, you will probably need to get into absolute positioning or flexbox. This would all be totally done within the realm of CSS.

Your custom CSS would go in: website/static/css/custom.css file.

[thenewguy]

That makes sense - the editing experience with your block layouts is feeling pretty powerful without being too complicated. Is there a mechanism for assigning from the point and click interface other than the "custom css class" text box?

I see the blocks have dropdowns for advanced settings that allow alternate templates - I didn't see reference to how to add in choices - is it an easy process? Or will that require model migrations that will make following the latest releases difficult? It seems more manageable to use a template for assigning the custom class names designed for a particular reusable style if possible.

[vsalvino]

Custom CSS class is the recommended way for now. You can add custom HTML templates per block, however it is a bit buggy with migrations. So that is a "use at your own risk" feature. See the instructions in this comment: #44 (comment)