leicester web designer blog

Sometimes, specially approaching Xmas or other holiday, you may need to temporarily change the style of elements of your Magento website - perhaps adding a new banner or changing the look and feel of an existing element. Most of time this can be achieved by editing or adding static blocks. However, there are times when this isn't enough.

One client's requirement illustrated these limits. They had a text area static block that was normally hidden from mobile users, but wanted this text area to be replaced by a sales banner that would be visible to all users, mobile & desktop. The first part was simple - just edit static block to replace the text with an image. But how to temporarily modify the stylesheet to show for mobile users? We needed a method that allowed admin to switch on the banner for mobile users and importantly, switch it off again after the sale had finished and the original text restored.

Our solution was to create a module that loaded the CSS file. Admin would then be able to enable or disable the module within Magento admin. After flushing the cache the new style sheet would be on or off as required. The code to achieve this is reasonably straightforward and has the benefit of being complaint with Magento best practices.

The module consists of just four files - each one a few lines in total. The module is called Fws_Css and sits in the local override directory of /app/code/local/Fws.

 The first file is the module declaration that sits at /app/etc/modules

<?xml version="1.0"?>
 <config>
   <modules>
    <Fws_Css>
     <active>true</active>
     <codePool>local</codePool>
   </Fws_Css>
   </modules>
</config>

The file that tells Magento what to do is the module config.xml, in the directory app/code/local/Fws/Css/etc/. The contents of the file are as follows:

<?xml version="1.0"?>
<config>
  <modules>
   <Fws_Css>
    <version>1.0.0</version>
   </Fws_Css>
  </modules>
  <frontend>
   <layout>
    <updates>
     <fws_css module="Fws_Css">
      <file>fws_css.xml</file>
     </fws_css>
    </updates>
   </layout>
  </frontend>
</config>

This tells Magento to load the css file in the head of the template.

The next file, fws_css.xml. This file is placed in the base template skin at template/frontend/base/default/layout.

<layout version="0.1.0">
  <default>
   <reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/fws_css.css</name><params/></action>
   </reference>
  </default>
</layout>

The actual css file is then placed in the skin folder of the base template at skin/frontend/base/default/css. This file is called fws_css.css. This is the file that will be loaded into the head section of the template for every page. For our purposes we included some media queries to override the main template file like so:

@media only screen and (max-width: 783px) and (min-width: 0px){
#Header-Bottom{display: block;}
}

Once the extension has been uploaded to your Magento site it should be available in System/Configuration/Advanced/Advanced - where all the extensions are listed and can be disabled.

disable extension in magento

 

 Setting the extension to Enable/Disable will turn on/off the inclusion of the the file fws_css.css in the head of every page on the website.

 

Satisfied Clients

Fresh Web Services Ltd:
LCB Depot, 31 Rutland Street, Leicester. LE1 1RE
Phone: +44 (0)116 279 3822
Company No: 04716234
52.634568, -1.127919
Use of this website constitutes acceptance of the
Fresh Web Services Terms and Privacy Policy including cookie-use
Find us on Google+
Find us on Facebook
Follow us on Twitter
Fresh Web Services is rated 5 stars on Google based on 3 reviews
Top