Adds some Styling options to Elemental Blocks.
(private project, no help/support provided)
- SilverStripe CMS ^4.3
- dnadesign/silverstripe-elemental ^4.0
For a SilverStripe 4.2 and Elemental 3.x compatible version of this module, please see the 1.x release line.
-
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
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)
- 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.
In your controller class like mysite/code/PageController.php:
Requirements::css('derralf/elemental-styling:client/dist/styles/elemental_editlink.css');
Requirements::javascript('derralf/elemental-styling:client/dist/js/elemental_editlink.js');
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}>
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.
Use HolderTemplate or add style="{$CustomInlineStyles.ATT}"
to your ElementHolder 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