PHPackages                             derralf/elemental-styling - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. derralf/elemental-styling

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

derralf/elemental-styling
=========================

An extension to add some styling option to Elements. Suggested/required for some of my silverstripe-elemental element modules

2.0.x-dev(5y ago)04.5k3BSD-3-ClausePHP

Since Mar 4Pushed 1y ago1 watchersCompare

[ Source](https://github.com/derralf/silverstripe-elemental-styling)[ Packagist](https://packagist.org/packages/derralf/elemental-styling)[ RSS](/packages/derralf-elemental-styling/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (5)Versions (3)Used By (0)

SilverStripe Elemental Styling Extension
========================================

[](#silverstripe-elemental-styling-extension)

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

Requirements
------------

[](#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](https://github.com/derralf/silverstripe-elemental-styling/tree/2.00#readme).

Installation
------------

[](#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
----------------------------------------------------------------------

[](#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](https://github.com/dnadesign/silverstripe-elemental#disabling-the-default-stylesheets))

Extensions
----------

[](#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](#holder_template) for included modified ElementHOlder Template.
Also see [Template Notes](#template_notes) for StylingMarginBottom extension.

Template Notes
--------------------------------------------------------

[](#template-notes)

### ElementEditlink

[](#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

[](#styledtitle)

In your elements-templates replace

`$Title`(or similar)
with
``
or something like
`$Title`

### StylingMarginBottom

[](#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](#holder_template) or add `class="{$MarginBottomVariant}"` to your ElementHolder template.

### StylingCustomInlineStyles

[](#stylingcustominlinestyles)

Use [HolderTemplate](#holder_template) or add `style="{$CustomInlineStyles.ATT}"` to your ElementHolder template.

###  Custom Holder Template / Controller Template

[](#-custom-holder-template--controller-template)

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

The Template can be found here [templates/DNADesign/Elemental/Layout/ElementHolderStyled.ss](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:

###  Health Score

26

—

LowBetter than 41% of packages

Maintenance26

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

1948d ago

Major Versions

1.0.x-dev → 2.0.x-dev2021-03-04

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1495867?v=4)[derralf](/maintainers/derralf)[@derralf](https://github.com/derralf)

---

Top Contributors

[![derralf](https://avatars.githubusercontent.com/u/1495867?v=4)](https://github.com/derralf "derralf (4 commits)")

---

Tags

silverstripeContent Blockselemental

###  Code Quality

TestsPHPUnit

Code StylePHP\_CodeSniffer

### Embed Badge

![Health badge](/badges/derralf-elemental-styling/health.svg)

```
[![Health](https://phpackages.com/badges/derralf-elemental-styling/health.svg)](https://phpackages.com/packages/derralf-elemental-styling)
```

###  Alternatives

[fractas/elemental-stylings

Collection of useful and reusable SilverStripe Elemental stylings properties

1416.5k1](/packages/fractas-elemental-stylings)[wedevelopnl/silverstripe-elemental-grid

Elemental grid module

1015.0k2](/packages/wedevelopnl-silverstripe-elemental-grid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)