123 Online > Support > Shift CMS Video Tutorials > Custom Block Style

Custom Block Style

Want to design your own block styles? No problem, you can create the styles yourself by clicking on your block, and selecting 'custom block style'. Before you do this however, we'd recommend checking out 'block style templates'. Here, you'll find over 50 different styles we've designed. Using 'block style templates' is by far the easiest way to make your blocks pop out on your website.

If you'd like create your own however, it's easy. Here, you can create background colours, default fonts, images, and style your borders. You'll only likely use the 'background' and 'border' and 'spacing' tab.

Background

We'll start with the background tab - this is handy if you've got a colour or a background image you'd like on the background of your block. If you'd like to pick a colour, just click on the colour picker, click ok, then click update.
You can also have a background image. It's not advisable that you do this, as it can be a bit fiddly ensuring that the background image is the correct size, but if you'd like to, add it in here.

If you like the look you've created, you can save your effects as a 'preset' so you can easily use it on other blocks.

Border

If you'd like to create your own custom block style, borders are pretty handy. The important thing about the border is that if you'd like one, you need to both select a style, and enter a border width. The style has to be something other than 'none', otherwise nothing will show up. You've got a range of border styles to choose from - just pick something and experiment to see how it looks. Next, put in your width. This 'width' box is in pixels - '1' is a hairline border, and it just goes from there. Remember, you must select a style as well as a border width for your border to show up. The 'direction' is where you choose your border to show around your entire block, just the left side, right side, top and so on. And of course, the colour picker is where you select the colour of your border.

Fonts

Your first tab is your fonts tab. We recommend staying away from this tab, as it can make things a little complicated, but if you'd like to, you can adjust the defaults, colours, alignment, and even line spacing. Depending on the block, this usually overwrites the default style of the block you're editing. Generally speaking, from a design perspective, you'd just want to leave your fonts alone. Too many fonts or font variations can create a really messy looking website, but if you know what you're doing, make your adjustments here.

Spacing

Of course, you can add margins or padding to your blocks. Imagine that your block has a border around its edges. The 'margin' is the space before the border. The 'padding' is the space after the border, inside the block. Basically, these boxes are in pixel dimensions. If you'd like to get custom with your spacing, the best way forward is to put in some number in here and see what works. It's pretty simple really. If you need more space, put in a bigger number, if you need less, put in a smaller one.