README

Adds some Styling options to Elemental Blocks.
(private project, no help/support provided)

Requirements

• dnadesign/silverstripe-elemental ^4 || ^5

For a SilverStripe 4.3 and Elemental 4.x compatible version of this module, please see the 2.x release line.

Installation

• Install a module via Composer

  composer require derralf/elemental-styling
  

• Apply a desired extension on Block class (ie. ElementContent that ships with Core module or BaseElement to apply to all child elements) mysite/_config/elements.yml

  DNADesign\Elemental\Models\BaseElement:
  extensions:
      - Derralf\ElementalStyling\ElementEditlink
      - Derralf\ElementalStyling\StyledTitle
      - Derralf\ElementalStyling\StylingMarginBottom
      - Derralf\ElementalStyling\StylingMarginTop
      - Derralf\ElementalStyling\StylingCustomInlineStyles
  
  

Configuration Example

A basic/default config. Add this to your mysite/_config/elements.yml

---
Name: elementalstyling
---
DNADesign\Elemental\Models\BaseElement:
  #  disable in line editing
  inline_editable: false
  # use included holder template ElementHolderStyled.ss
  controller_template: 'ElementHolderStyled'
  # StyledTitle config
  title_tag_default: 'h2'
  title_tag_variants:
    '': 'default'
    h2 : 'H2'
    h3 : 'H3'
    h4 : 'H4'
  title_alignment_variants:
    text-left: 'left'
    text-center: 'centered'
    text-right: 'right'
  # StylingMarginBottom config
  margin_bottom_variants:
    mb-0: '0 (none)'
    mb-1: 'XS'
    mb-2: 'Small'
    mb-3: 'Medium'
    mb-4: 'Large'
    mb-5: 'XL'
  # StylingMarginTop config
  margin_top_variants:
    mt-0: '0 (none)'
    mt-1: 'XS'
    mt-2: 'Small'
    mt-3: 'Medium'
    mt-4: 'Large'
    mt-5: 'XL'

Override title tag variants or title alignment classes for child elements:

My\Namespaced\Element:
  title_tag_variants:
    '': 'default'
    h3 : 'H3'
    h4 : 'H4'
  title_alignment_variants:  
    text-center: 'centered'

My\Namespaced\OtherElement:
  title_tag_variants: null
  title_alignment_variants: null
  

Additionally you may apply the default styles for StylingMarginBottom Extensions:

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    - derralf/elemental-styling:client/dist/styles/elemental_styling_margin_bottom_variants.css

(also see Elemental Docs for how to disable the default styles)

Extensions

• ElementEditlink
  Adds links to backend for editors (modified ElementHolder template necessary)
• Derralf\ElementalStyling\StyledTitle
  Adds styling options to Element Title (tag, alignment) - to content tab. (modifications to the/your Element-templates will be necessary)
• Derralf\ElementalStyling\StylingMarginBottom
  Add CSS selector (for bottom margin) to the Element / Element Holder - see Settings tab.
  (modified ElementHolder template necessary)
• Derralf\ElementalStyling\StylingCustomInlineStyles
  Add inline CSS to the Element / Element Holder - see "Expert Settigs" tab.
  (modified ElementHolder template necessary)

See HolderTemplate for included modified ElementHOlder Template.
Also see Template Notes for StylingMarginBottom extension.

Template Notes

ElementEditlink

In your controller class like mysite/code/PageController.php:

Requirements::css('derralf/elemental-styling:client/dist/styles/elemental_editlink.css');
// based on jQuery
Requirements::javascript('derralf/elemental-styling:client/dist/js/elemental_editlink.js');
// non-jQuery
Requirements::javascript('derralf/elemental-styling:client/dist/js/elemental_editlink_vanilla.js');

StyledTitle

In your elements-templates replace

<h2>$Title</h2>(or similar)
with
<% include Derralf\\Elements\\ElementTitleStyled %>
or something like
<{$TitleTagVariant} class="element__title {$TitleAlignmentVariant}">$Title</{$TitleTagVariant}>

StylingMarginBottom

Default config uses bootstrap 4 spacing selectors.

Optionally you can use the basic stylings provided with this module in your controller class like mysite/code/PageController.php

    Requirements::css('derralf/elemental-styling:dist/styles/elemental_styling_margin_bottom_variants.css');

Use HolderTemplate or add class="{$MarginBottomVariant}" to your ElementHolder template.

StylingCustomInlineStyles

Use HolderTemplate or add style="{$CustomInlineStyles.ATT}" to your ElementHolder template.

Custom Holder Template / Controller Template

This extension contains a modified controller template. Activate it like this: controller_template: 'ElementHolderStyled' (see Configuration Example above)

The Template can be found here templates/DNADesign/Elemental/Layout/ElementHolderStyled.ss

If you don't use any of the above extensions that require that special template there is no need to set controller_template.

Altenatively you can also override the default ElementHolder.ss with a custom template in /themes/[YourTheme]/templates/DNADesign/Elemental/Layout/ElementHolder.ss

Further information: https://github.com/dnadesign/silverstripe-elemental#defining-your-own-html