PHPackages huubl/silverstripe-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. huubl/silverstripe-elemental-styling ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility) huubl/silverstripe-elemental-styling ==================================== An extension to add some styling option to Elements. Suggested/required for some of my silverstripe-elemental element modules 02PHP Since Jul 11Pushed 11mo agoCompare [ Source](https://github.com/huubl/silverstripe-elemental-styling)[ Packagist](https://packagist.org/packages/huubl/silverstripe-elemental-styling)[ RSS](/packages/huubl-silverstripe-elemental-styling/feed)WikiDiscussions master Synced yesterday READMEChangelogDependenciesVersions (1)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 16 — LowBetter than 4% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity2 Limited adoption so far Community6 Small or concentrated contributor base Maturity18 Early-stage or recently created project 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. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/50170696?v=4)[Huub](/maintainers/huubl)[@huubl](https://github.com/huubl) --- Top Contributors [![derralf](https://avatars.githubusercontent.com/u/1495867?v=4)](https://github.com/derralf "derralf (4 commits)") ### Embed Badge ![Health badge](/badges/huubl-silverstripe-elemental-styling/health.svg) ``` [![Health](https://phpackages.com/badges/huubl-silverstripe-elemental-styling/health.svg)](https://phpackages.com/packages/huubl-silverstripe-elemental-styling) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)