{"id":878,"date":"2012-11-02T04:50:33","date_gmt":"2012-11-02T03:50:33","guid":{"rendered":"http:\/\/blog.soton.ac.uk\/oneshare\/?p=878"},"modified":"2012-11-02T04:53:52","modified_gmt":"2012-11-02T03:53:52","slug":"reskinning-redfeather","status":"publish","type":"post","link":"https:\/\/blog.soton.ac.uk\/oneshare\/2012\/11\/02\/reskinning-redfeather\/","title":{"rendered":"Reskinning RedFeather"},"content":{"rendered":"

The default RedFeather template has a very simple but modern style that can be used directly out-of-the-box. \u00a0This allows less technical individuals to quickly deploy a site without having to worry about writing their own HTML or CSS. \u00a0The template also gives the user the capability to customise the colour scheme at their own discretion. \u00a0This can be done purely out of personal colour preferences (if you look fabulous in blue), or to try and match the colour scheme of an existing site. \u00a0In my earlier post, Deploying RedFeather<\/a>, I explored how one might integrate RedFeather into an existing site using this method. \u00a0In this case, I was trying to add a RedFeather repository to the SLEP<\/a>\u00a0website, which has a fairly unusual magenta and indigo colour scheme. \u00a0Simple recolouring RedFeather to match this gave very poor results due to the strange contrast, so I decided to average the colours instead\u00a0and go with a uniform lilac theme. \u00a0While this differentiated the site from a default ‘red theme’ RedFeather and would probably be acceptable to some users, I will be the first to admit that this wasn’t even close to a seamless integration.<\/p>\n

It was obvious that it would not be possible to fully integrate RedFeather with another site unless you could replace the entire html template and stylesheet. \u00a0This is a much more complex customisation than simply changing the banner colour and can only be done by writing a custom plugin. \u00a0However, special consideration were made in the RedFeather core to make writing such a plugin much easier. \u00a0The first was simple, enforcing a complete separation within the code between the template and content. \u00a0This meant making sure that html elements making up the vital parts of the site (such as workflow items, or resource preview) were completely independent of the template and render properly even if all other styles are stripped out. \u00a0Furthermore, they were all given unusual element ids and classnames (prefixed with “rf_”) to minimise the chance that any new css rules on the custom template will interfere with them.<\/p>\n

The first step to writing the plugin is to override the ‘render_template’ function and completely replace the output HTML; this will cause RedFeather to render pages exactly like the target site, only without any RedFeather content. \u00a0Adjusting the new template to include the required content is simply a case of inserting each element in the appropriate place. \u00a0Each template needs to include the following compulsory elements:<\/p>\n