This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

You can apply styles to Blocks and Block Areas. Generally its a good idea to have your theme control CSS for consistency sake, but the Design command can be handy in a pinch if you just need to add some padding to a content block or throw a background color up quickly. 

When designing a block you have access to alter:

  • Fonts - controls the styles for the text within the block.
  • Background - lets you pick a color or upload an image for the background area. More depth on backgrounds below. 
  • Border - creates a line around the block area you're working in.
  • Spacing - lets you add/edit a margin or padding to the area you're working in.
  • CSS (Cascading Style Sheets)- lets you add your own in-line styles if you're comfortable with CSS. Custom Templates are the perfered way to add CSS to a block. 
  • And to save style changes as a preset. 

Note: Styles set here are often overridden by those defined within the various block types, or custom templates applied to the block. 

designBlock_setBlockStyles.png

Background

Let's you change the design of the background of your block. The integrated color picker allows you to select a background color.

designBlock_colorPicker.png

designBlock_BGImage_repeat.png

If you select an image it will display on top of the background color. You can then choose if you want it to repeat Horizontally (across the top of the block), Vertically (down the left side of the block), all (covering the whole block), or None (only display once anchored in the top left of the block).  

designBlock_changeBGImage.png

If you decide to change your background to a different image click the thumbnail of the image, and choose a new file. 

designBlock_LargeImage.png

Something to be aware of is that if you select a large image for your background it will not be resized to fit the block automatically. Any part of the image that does not fit the block will be hidden, as see above. 

Here's how the full image appears (when I set the size to width="100"):

mandarin1.jpg

Saving a style:

The save this style check box allows you to save the current settings as a new preset. This is really handy if you're going to use the same style somewhere else. After saving a preset it will be available next time you open the Design overlay (Set Block Styles) on another block or block area.

If you alter your choices on a block that is useing a preset style the set block styles overlay will offer you the following options: Update "name of your preset," Use this style here and leave the preset style unchanged, and Save this style as a new preset. 

 designBlock_changePreset.png

Note: If you do not see this button then you site administrator may have disabled Design controls.



Loading Conversation