Custom css in Layouts
To access the existing jdownloads_custom.css file please see the Appendix below.
In this example the background colour of the subheader is changed by just including the css opposite in jdownloads_custom.css
The change maybe not desirable but it illustrates the point!
The additional css added to jdownloads_custom.css is shown opposite.
CSS in jdownloads_custom.css
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 !important text added to the css statement.
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.
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.
From the examples above it is clear one can both change existing attributes and add new ones.
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
Appendix Accessing jdownloads_custom.css
- Directly in jDownloads Admin
- Using your cPanel
- Using ftp - recommended
Accessing directly in jDownloads Admin
Accessing with cPanel
Select jdownloads_custom.css, apply any edits then Save.
Accessing with ftp
Actually it is probably wise to keep a copy of the original version you have downloaded!
It is also useful to download jdownloads_fe.css so you can use it as a reference.
Then edit jdownloads_custom.css using a text editor such as Notepad++.
NB. Notepad++ may be found here. (opens in a new window/tab)
Upload to overwrite the existing jdownloads_custom.css file. And remember to clear the cache or otherwise reload the page.
Personally I prefer this way as I can then use the Notepad++ editor which will highlight the code and make finding "mistakes" easier.
ColinM January 2020, updated May 2023.