HomeBlock Styles
The Edit Styles link on the floating menu allows you to change some of the styles of individual blocks. Some of these styling options are available to all kinds of blocks, some of them are specific to a particular block type.
So for example this block has been given its own background and foreground colours.
Newspaper Columns
The text in this block has had the 'Newspaper Columns' style applied. It's only visible on larger devices - on a mobile phone the text will just be shown as a normal single column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a facilisis quam, non scelerisque velit. Morbi euismod nec erat eu feugiat. Nam ut lectus ante. Quisque vulputate vulputate velit vitae venenatis. Aliquam sed sagittis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere mattis semper. Aliquam gravida mi quis eleifend venenatis. Pellentesque mattis, erat ac consectetur maximus, tellus ipsum facilisis ex, vel dictum ligula nulla vel lacus. Vestibulum elementum ac nulla vel condimentum. Suspendisse pulvinar, tortor bibendum fermentum luctus, leo neque finibus ligula, vitae tincidunt tortor sem in nisl.
Duis sem orci, tempor eu elit ac, efficitur convallis ligula. Donec consectetur, felis eget molestie faucibus, diam ex egestas felis, vel porta orci ante non turpis. Etiam quis pulvinar lorem, a aliquet mi. Aliquam erat volutpat. Sed fermentum, risus eu mollis fermentum, nunc ex sagittis quam, eu dignissim lorem elit eu enim. Morbi sapien nibh, pharetra vel faucibus sed, tincidunt sed lectus. Ut in purus ut est faucibus egestas. Etiam facilisis ligula ante, egestas malesuada est lobortis id. Nullam vitae augue non ex sollicitudin eleifend id non sapien.
A block doesn't have to have a background colour at all - it can be set to transparent or be semi-transparent with a hint of colour. If it is transparent then the article or body background will be visible behind it. If it's the body background (which is fixed to the window) then that will give a 'parallax' effect when scrolling.
A gallery set to 50% of the site width with spacing removed.
| This Table Styles | Styling Effects | Used? |
|---|---|---|
| Space between rows and columns | Should show a gap round this cell | Yes |
| Striping applied to columns as well as rows | This has slightly different background to cells to left and right | Yes |
| Last column set to be aligned to right | The next cell to the right is aligned right | Yes |
| Collapses on mobiles | The table rearranges itself on mobiles to be easier to use | Yes |
| Switch off hover effect | This would remove the hover/shadow effect | No |
Block Background Image
As well as being able to choose the background and foreground colours for each block you can choose to use a background image. For accessibility reasons care must be taken to ensure that the text is easily legible over the background.
Because this is the block background it scrolls with the rest of the page, so doesn't give a 'parallax' effect like the body background does above.
Block Width
By default each block spans the full width of the article column. It's possible to set blocks to be half, two-thirds or one third width. This allows you to show blocks side-by-side on desktop.