This site currently uses the JSN Epic template by JoomlaShine. While I’m normally allergic to spending money I felt I had to cough up some cash and buy this template as I use it in a few places and a good amount of work has clearly gone into it.

For the most part the template is perfect straight out of the box. The look is clean and crisp and there are enough variables available that you can give your site it’s own look. I’d like a bit more control over the colours, there are only eight colour schemes to choose from, but other than that I’m a happy shopper (to be honest if I could chose my own scheme I’d probably screw it up as I have no eye for design).

Menu Style

There is just one thing about the template that I don’t like, the way it deals with icons in the main menu. By default the icon is rammed hard up against the title which just looks awful. I much prefer the style that you see here with the icon above the title. It makes the menu a little taller but I think that’s a small price to pay for improved look. Unfortunately to make the change you have to hack on the stylesheet in the template. The locations and styles below are good for version 4.3.3 of the JSN Epic template but these things tend to change fairly quickly with with releases so you’ll probably need to dig in with FireBug or similar to find the correct style to change. The actual modification you need to make will probably not change with releases though.

You want to edit the span that contains the title of the menu to make it display as a block. This causes it to drop down below the image. Current that is the style on line 1046 of template.css which looks like this:

div.jsn-modulecontainer ul.menu-mainmenu.menu-richmenu.menu-iconmenu > li > a span {
    line-height: 1.5;
}

Change it to this:

div.jsn-modulecontainer ul.menu-mainmenu.menu-richmenu.menu-iconmenu > li > a span {
    display: block;
    line-height: 1.2;
}

Notice that I also reduced the line height a little. The 1.5 that it was originally set to is fine for small icons but looks excessive with the slightly larger icons I use.

NOTE: This change can now be made more simply. Create a style sheet (called something obvious like additional.css) in the template/css directory. On the templates SEO and System Settings you can specify additional CSS files to include.

MathJax Addition

This site makes use of the MathJax maths rendering library which is best installed using a script link placed in the head of the page.  As with the style change above this requires a minor change to the template. This time the change is to insert the following line somewhere in the head element (in my case line 25) which is defined in index.php.

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

I notice that the template now comes with jsn_head.php as an include so presumably you could also put the above line in there if you so wanted.

NOTE: I realized this can actually be added to the site much more easily than through a template modification. The Google Analytics code needs to be added to the head of each page and the template supports that on the SEO and System Settings page. The analytics box just accepts a block of JavaScript and passes it through to the page verbatim so adding the above script tag in that box (after the analytics if you are using that) adds it to every page.