Customise jDownloads front end with jdownloads_custom.css
One of the features of jDownloads is the ability to retain your own css style rules across different jDownloads releases and upgrades. This uses a css file called jdownloads_custom.css which is located in the component assets directory, /components/com_jdownloads/assets/css along with the main css file, jdownloads_fe.css, and the button css, jdownloads_buttons.css.
When being installed or upgraded jDownloads checks to see if file /components/com_jdownloads/assets/css/jdownloads_custom.css exists. If it does not then it loads in a 'blank' jdownloads_custom.css file, otherwise it leaves the existing one in place.
When jDownloads items are being loaded in the active website by the active template then jdownloads_custom.css is loaded last. Thus any css statement in jdownloads_custom.css will override or add to any corresponding css in either jdownloads_fe.css or jdownloads_buttons.css or, usually, in the site template as well. This applies to both the Component and to the Content Plugin.
To access and edit the existing jdownloads_custom.css file please see the Appendix.
Before continuing the explanation it is helpful to see some examples..
This is an example of a category sub header styled with css from jdownloads_fe.css
The particular css code used is
By putting the css below in jdownloads_custom.css the result is as shown opposite, maybe not desirable but it illustrates the point
The standard button from jdownloads_button.css is shown opposite, and the relevant css is
Putting css below in jdownloads_custom.css gives a '3D' like button
Part of the css code controlling the styling of the tool tips is given below, with the result shown opposite
/* ++++++++++++++ .tooltip-inner for v3.x series ++++++++++++++ */
Perhaps the tool tip should be more transparent as opposite so put the lines below in jdownloads_custom.css
Maybe you do not want to see tool tips any way so just use
The statements added into jdownloads_custom.css will remain across updates. If you were to change jdownloads_fe.css then it may well be overwritten on each update. Hence in this way you can maintain your customising without it being changed by jDownloads updates.
Sometimes however the template may load in some of its css last. In general the last ccs statement loaded replaces or adds to any existing css. The exception to this is if an earlier css statement had the shrike or exclamation character ,!.
The priciples of which css applies is quite complex. It is called CSS specificity and is calcuated as a numeric value with the highest value taking precedence. There are numerous references on the web and a few useful ones are listed below for a better explanation However as a simple approximate working guide in the present context, the CSS rules are essentially that preference is given, in order, as noted below.
- Inline CSS statements have top priority.
- The next priority is the last loaded CSS attribute with the Shrike '!important' qualifier.
- The lowest priority is the last loaded attribute without a Shrike.
To illustrate consider the following. Suppose the generated code contained an html statement such as
<div style="padding-bottom: 3px; text-align: left;">.
Because the CSS is inline then there is nothing we can do to either the padding-bottom or text-align by changing anything in any of the css files. Because of this over the next few months, after stable jD2.5 and 3.2 releases, it is planned to use more css classes in the generated code to enable even more customising.
From the examples above it is clear one can both change existing attributes and add new ones. Looking at the first example the effective css as collated by the browser is
The third example about the tooltips needs to use the !important as the css used is within jQuery and in most site Templates; it is not readily accessible so using the !important qualifier is essential here. But always try first without the !important .and use it as sparingly as possible.
This does bring out another requirement. You need to check out the result on several browsers, with special attention to different versions of Internet Explorer (IE). Earlier versions of IE were definitlely non standard! The above examples were checked on:
- Firefox 34.0.5
- IE 11.0.15
- Chrome 39.0
- Opera 26.0
References to CSS specificity
- A good general article http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
- Specificity Calculator - a visual aid http://specificity.keegan.st/
- Definition from w3 http://www.w3.org/TR/css3-selectors/#specificity
There are several ways in which you can access jdownloads_custom.css. We will note three of them here.
- Directly in jDownloads Admin
- Using your cPanel
- Using ftp
Note After editing jdownloads_custom.css you will almost certainly need to clear both your browsers cache and if you use it the Joomla! cache. This is because there is a high probability that the pre-edited version is cached. So if you do not clear your caches then you will not see the effect.
Accessing directly in jDownloads Admin
|First go to Layouts in the jDownloads Control Panel and select CSS|
There are three css files listed.
jdownloads_custom.css is the third one so scroll down to view and edit.
You can edit this directly and then Save.
Note the editor is a very simple text editor.
|A larger view of the file is shown opposite.|
Accessing with cPanel
Using the regular cPanel File Manager navigate to <site-root>/components/com_jdownloads/assets/css where you will find the three css files
Select jdownloads_custom.css and choose to edit with either the code-editor or the simple editor
Save and close afterwards.
Accessing with ftp
In this case the sheme is to use ftp to download the jdownloads_custom.css file.
Then edit it using a text editor such as Notepad++, remember css is simple text.. Actually it is probably wise to keep a copy of the originl version.
Upload to overwrite existing jdownloads_custom.css
Colin Mercer January 2015, updated Jan 2016.