Loading icon

Loading, please wait...

An approach for custom styling of Silverstripe page titles

Posted by James Bolitho on 11 February 2016 |
Comments

css styled titles3

As web designers, we are always harnessing the power of CSS to style our web pages to make things look more interesting.  On a recent project I was working on (this website!) I wanted to change the colour and size of some or the words outputted from the default title field of the page type 'page' in the Silverstripe CMS.  I was really hoping that CSS would come to my rescue by allowing me to use CSS pseudo-class selectors.  After turning to my friend Google, I soon discovered I was out of luck! This seems to be on the ‘I want this to be added’ list for many web designers for a number of years now- just have a look at this CSS-Tricks.com article that talks about this very thing.

So the only way I could see how to achieve this was by wrapping the words in a span or strong html tag with a specific class so that I could add the additional styles.  Now the next step was to achieve this so that website content editors could update this through the default title field in the Silverstripe admin interface.

This is how I implemented it:

 
//Add to mysite/page.php
class Page extends SiteTree {

         private static $db = array(
               'CustomTitle' => 'VarChar(255)',
         );
         
         //Ensure that when you create a new page it has a default title
         private static $defaults = array(
               'CustomTitle' => 'New Page'
         );

         public function getCMSFields(){
                $fields = parent::getCMSFields();

                //remove page title
                $fields->removeFieldFromTab("Root.Main","Title");
                //Add custom Title field above URL Segment field with some descriptions to help the web admin understand what is possible.
                $fields->addFieldToTab("Root.Main", TextField::create('CustomTitle', 'Page name')->setRightTitle("Add '+' around content '+' to be displayed bold. Add '[' around content ']' to be displayed purple in colour. Add '|' around content '|' to be displayed large."),'URLSegment');

                return $fields;
        }

        //Function using preg_replace to wrap the selected content with html tag depending on the symbols used etc.
        public function FormattedContent($string){            
              //match string between '[]' and swap for html span class purple.
              //match string between '||' and swap for html span class large.
              //match string between '+' and swap for html strong.
              $titleString = preg_replace(array('/\[/','/\]/','/\+(.*)\+/','/\|(.*)\|/'), array('<span class="purple">','</span>','<strong>$1</strong>','<span class="large">$1</span>'), $string);
              return $titleString;
         }

         //Function using preg_replace to clean up custom title to output to the default Title field which is used to update the urlsegment and navigation title.         
         public function SanitisedContent($string){
               return preg_replace(array('/\[/','/\]/','/\+/','/\|/'), array('','','',''), $string);
         }
              
         //Save sanitised Custom title to default title field.
         public function onBeforeWrite(){
              parent::onBeforeWrite();
              $this->Title = $this->SanitisedContent($this->CustomTitle);
         }

    }

In your template you then need to just call $FormattedContent($CustomTitle) between your heading tags (i.e. h1, h2 etc.) to output your page title with the additional html markup. Then you can apply the CSS styles to this html markup in your stylesheets. 

The downsides to this approach is that you are disabling the default auto complete functionality for the url segment and navigation label field in the CMS admin area.  However, for me this is not a big issue since I generally end up editing all those fields manually anyway.  Also, you are adding html markup into functions within your model so this isn't the cleanest approach; this needs to be addressed but for now it functions well for my needs.

As you can see this approach allows you to make your Page titles a little more interesting and give the website's content editors the ability to make the changes as well without too much difficulty.  If you have any questions or suggested improvements then please post in the comments section below.

Tags: , , ,

About the Author: James Bolitho

For work I create beautiful things for print and the web. For play I enjoy listening to vinyl records and hanging around with my family.

comments powered by Disqus