Boxes

Boxes are decorative elements and can be used for backgrounds for a caption, gradients, horizontal “slices” or header images. 

Their settings are mostly identical to those of images, and boxes with a background image can be visually indistinguishable from image elements. The main difference is that boxes cannot have a link, but they can be placed off-canvas.

There are two types of boxes you can add to a page, both available through buttons in Sparkle’s toolbar: Box and Wide Box.

A Box can be repositioned horizontally and vertically, while a Wide Box can be moved only vertically and can automatically adjust their width and grow “as wide as the browser goes”.

Box properties 

A Box can be filled with a solid color from the round swatch near "Fill" or with one of three options from the "Content" menu. You can: 

  • choose Gradient, which will transition from the Fill color to a second color, chosen from the color bar
  • choose an image from disk,  pressing the Add button, navigating to the desired file and selecting it
  • choose an image from pixabay.com, pressing the Select button and picking any image you like from the popup

As explained in detail in the Images section, if you choose to put an image into a box there will be a “Stretch” checkbox, a “Fit” and "Fill" button to adjust how and how much of the picture will be seen, and a “resolution report” bar to assess the quality and density of the output image.

The “Fixed in window” checkbox is available only for boxes and locks the background so that the visible portion changes when the box moves or you scroll. 

Borders 

A border, always displayed on the outside, can be added to all kinds of boxes ticking the corresponding check-box and picking a line type, color and width. Unchecking the "Same on All Sides“ checkbox allows the specification of different types, colors 

and width of borders for each side of a box.

Checking the "Rounding" option a box can have rounded corners. Each corner can be rounded independently through the four way rounding control, but the radius will be the same for all corners. 

Boxes can also have a Shadow. You can choose the color and position plus thickness adjusting a Horizontal and a Vertical slider. A third slider, Blur, helps attain a drop shadow effect, which can help a box and its content stand out. 

Examples 

Here are a couple of practical uses for boxes. 

To create a header image with a logo on top: 

Note how the blurred background makes the foreground text and logo stand out:

To create vertical slices: 

  • set a base background color or pattern
  • add a few wide boxes, as tall as your screen
  • add some large background images
  • enable background stretching to fill
  • set fixed positioning for the images
  • add the image blur property to the first one
  • use a heavy weight title font

The image at the right is an example of how the layout could end up, and since the wide boxes are very tall and the image positioning is fixed, scrolling through the images results in a full screen experience that’s integrated in the site. 

It's also possible to combine boxes.  

Here's another example of two boxes with a text element: 

  • a very tall wide box with the Darth Vader image
  • a normal box with a non-opaque color (and a text element on it)

Note that the background image is fixed, so the text will scroll over it.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

This site uses cookies. Some are essential to make our site work; others help us improve the user experience. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn more.

X