Adding CSS & Javascript to Magento Themes

There is an XML configuration folder located in app/design/frontend/PROJECT/THEME/layout. The main one is called page.xml. Within there, you add JS resources you do it like this:

<action method="addJs"><script>madskull/cookie/jquery.cookiebar.js</script></action>

When you add Css, you add it like this:

<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

Magento does some stuff in the background and auto tries to put you in the /js dir. There is a third way called addItem:

<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>

You can say skin_css or skin_js, and it will set the path for the module.

Apparently, adding files stored in say bower_components just won’t work. The solution is either to hardcode the html into the head.phtml file (which they dont recommend), symlink the bower library to the JS folder you require, or just dont use bower and copy it straight in to your theme. lternatively, there is a class written by some guy that extends Mage_Page_Block_Html_Head. He hasn’t put it on Github, which I’m  uneasy with (I like stuff on Github and versioned!) but in the meantime you can get it here https://inchoo.net/magento/how-to-add-external-javascript-css-file-to-magento/

Advertisements

Debug compiled CSS and JS in Firefox using sourcemaps

If you haven’t used sourcemaps, now is the time!

With the advent of compiled CSS like LESS or SASS, or minified/uglified JS, it makes debugging awkward as you cant see the original lines of code that you wrote. Cue CTRL_F’ing to find that line to tweak! But not any more!

When you generate your LESS/SASS, if you tell it to compile a sourcemap too, it will create one! This allows your browser to report which line of the less or scss file the rule in question came from.

For the Less compiler command, you have several options:

--source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline  puts the map (and any less files) into the output css file
--source-map-url=URL     the complete url and filename put in the less file

For Sass, you just add the option at the end of the command:

sass sass/screen.scss:stylesheets/screen.css --sourcemap

Now in Firefox, open your page, right click, and click Inspect Element (not the Firebug one, the default Firefox Inspector!)

In the CSS rules pane, right click, and make sure show original sources is checked.

Screen Shot 2015-05-18 at 16.57.27 (2)

To the right of the actual rule, you click the link which would usually take you to the CSS file for viewing, but now, it takes you to your Less/Sass file! You can now tweak rules and save them directly from the inspector!

Screen Shot 2015-05-18 at 17.01.11

In my new workplace, our SASS files are compiled by Gulp automatically. (In my last work I had lessc configured in PHPStorm). If your own files are automatically built, then you should also checkout Firefox addons for live reloading! The great thing about that is that the CSS files update without refreshing! Great if you have session info or other info that might need reinstantiating, you dont have to keep keying stuff in! Have fun!

Using Emmet in your IDE

Emmet is awesome! It’s a little tool (once called Zen Coding) that gives you loads of keyboard shortcuts for generating HTML and CSS markup! Give it a try! Install an Emmet plugin into your IDE. Then, in a view file, try typing this:

table#applications.table-striped.table-hover.table>thead>tr>td*3^^tbody>tr>td*

In PHPStorm, hit TAB after typing that. In Eclipse/Aptana, you press CTRL-E. Suddenly, it changes to:

<table id="applications" class="table-striped table-hover table">
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
    </thead>
    <tbody>
         <tr>
             <td></td>
             <td></td>
             <td></td>
         </tr>
    </tbody>
</table>

As you can imagine, this saves a LOT of time! Check out the Emmet Cheatsheet here:
http://docs.emmet.io/cheat-sheet/

You can download the plugin for your IDE here:
http://emmet.io/download/
Have fun!

Using file watchers with PHPStorm

I love LESS! However having to run lessc every time I edit my less file is LAME! Adding File watchers in PHPStorm means that when you save your file, it will automatically compile your CSS! We are also going to add Javascript and CSS minification, which helps increase page load speeds and also make it harder for nosey people to examine your javascript! Lets go!

First up, lets install node.js by visiting http://nodejs.org/
Next, we install less and yuicompressor:

npm install -g less
 npm install -g yuicompressor

Also on Windows, everything cracks up unless you add a PATH environment variable for the modules. In Control Panel in System, click Advanced System Settings, click Environment Variables and add the node modules folder to the PATH variable, or add it if its not there:

C:\Users\your.username\AppData\Roaming\npm

Go to File > Settings, and under the project settings look for File Watchers. Click the green + to add a watcher. Select LESS.

All that is required is that you put the correct path into the program field. This may be slightly different depending on your setup. For windows users, the modules can usually be found in :

C:\Users\your.username\AppData\Roaming\npm\lessc.cmd
 C:\Users\your.username\AppData\Roaming\npm\yuicompressor.cmd

And on linux machines, you can find it elsewhere. I cant remember offhand, but just take note of the output while you are installing it and you wont go far wrong.

Now you can edit the head section of your website, replacing style.css with style.min.css, and the same also for your javascript! Awesome 🙂

CSS – Why Less is MORE

There’s absolutely NO point of me rewriting a perfectly good article thats already out there, but I will tell everyone:

STOP USING CSS!

START USING LESS!!!

It is absolutely incredible. I’m ditching all my current CSS files and refactoring them to use this stuff! There’s no turning back from this yeehah!

http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive#comment-2268

 

Here’s how to install the LESS Compiler and set up auto compiling of CSS in PHPStorm:

http://trevweb.me.uk/configuring-less-on-mac-os-x-and-phpstorm-6-0/

Coda Slider and dynamic CSS

My shiny new website uses an awesome jquery tool called Coda Slider. It’s really good, but I kind of left the old fashioned people with a 1024×768 resolution behind, as my sites default width (and my slider image widths) are  1200px!

Anyway, I couldn’t have cared less, everyone uses a laptop or widescreen monitor anyway! Until that is the feedback started coming back. Looks like I need to fix this then :-s

First up, here’s the way the coda slider works:

<script src="/js/coda/jquery.coda-slider-3.0.min.js" type="text/javascript"></script>
 <link href="/js/coda/coda-slider.css" rel="stylesheet" />

..in the head, obviously. In your body, you set it out like this:

<div class="coda-slider-wrapper">
 <div class="coda-slider preload" id="coda-slider-1">
   <div class="panel">
     <div class="panel-wrapper">
       <img src="/img/coda/banner1.png" />
     </div>
   </div>
   <div class="panel imagepanel">
     <div class="panel-wrapper" style="text-align: center;">
       <img src="/img/coda/ddale.jpg" />
     </div>
     <div class="panel-wrapper" style="text-align: center;">
       <img src="/img/coda/let-your-property.png" />
     </div>
     <div class="panel-wrapper" style="text-align: center;">
       <img src="/img/coda/mobile.jpg" />
     </div>
   </div>
  </div>
 </div>

And in your <script> :

var slide = $('#coda-slider-1').codaSlider({
 autoHeight : false,
 autoSlide : true,
 dynamicArrows : false
 });

Now we have an awesome slider!

However, the guys with the 1024x768px monitors are crying in pain! So we can hack a quick fix for them:

if (screenwidth <= 1024) 
{
    $('div.panel-wrapper img').css('width','1000');
    $('.coda-slider-wrapper .coda-slider').css('width','1000');
    $('.coda-slider-wrapper .coda-slider').css('height','291');
    $('.coda-slider-wrapper .coda-slider .panel').css('width','1000');
}

That shrinks the image width and panel containers to fit 🙂 A bit hacky, but I still like it. Next time though, I’ll do my CSS in em’s and %ages!