Whenever you want to add a custom style to your's site CSS, I generally see the general "solution" to add the CSS to the template itself, eventually add some extra custom PHP inside your template from the templates folder. I dislike this solution, because then you need to remember that your template is actually tainted, and you can't just install the template and your CSS, you again need to fiddle with its internals.

Don't you just want a simple javascript to add custom CSS to your joomla site, without changing the template source, or dig to its settings?

Thus I preffer to add a module that will add some JavaScript (tested on IE7+, and all normal browsers). I also get for free fine grained control (not that's terribly useful) on where I want my custom CSS, and where not, since now it's just a module I can assign:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
(function() {
  
addCustomCss("my-custom.css");
 
function addCustomCss(name) {
    var css = document.createElement("link");
  
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", name);
  
    var html = document.body.parentNode;
    
    for (var i = 0; i < html.childNodes.length; i++) {
        if (html.childNodes[i].tagName == "HEAD") {
            html.childNodes[i].appendChild(css);
            break;
        }
    }
}
})();
</script>

Obviously it can be seen that I can add multiple custom CSSes, but generally I preffer only one. Since the node is appended to the head later that the head element that was outputted by Joomla, I also get my custom CSS last, which helps when it comes to CSS rules priorities, since the last rule wins for the same selector precision.

I hope it helps, and have fun designing your Joomla site.

 

Disqus Comments

comments powered by Disqus

Twitter

putraxor
putraxor In order to understand recursion, one must first understand recursion. (Anonymous)

14 hours ago via Twitter for Android • 5 retweets

bmst
bmst Seeing that i read about #vim amazon recommends me to read a book on #tmux. #allislostnow

14 hours ago via Twitter for Android

bmst
bmst Vimscript: Where "true" is False, and "false" is Still False. ciplogic.com/index.php/blog…

2 days ago via Twitter for Websites

Germanium

The one to rule them all. The browsers that is.

SharpKnight

SharpKnight is an Android chess game.

MagicGroup

MagicGroup is an eclipse plugin.

Go to top