Here is a tutorial on how to change the colours of jDownloads. Here we have a dark layout so this is what it looks like before. We will change the colour of the numbered elements.

Sin‌gleCategoryView Before

 

1) - General header - Components/jDownloads/Layouts/CSS-file/jdownloads_fe.css

In .jd_top_navi add:

background-color: #<whatever>;

 

2) - Category subheader - Components/jDownloads/Layouts/CSS-file/jdownloads_fe.css

In .jd_cat_subheader:

background-color: #F5F5F5;

 

3) - Footer - Components/jDownloads/Layouts/CSS-file/jdownloads_fe.css

 In .jd_footer, enable and set background colour:

/* background-color: #FFFFFF; */

 

4) - General background - Components/jDownloads/Layouts/CSS-file/jdownloads_fe.css

In .jd-item-page, add background colour:

.jd-item-page {
    position: relative;
    background-color: #<whatever>;
    z-index: 1;
}

 

5) - Table background - Components/jDownloads/Layouts/CSS-file/jdownloads_fe.css

table {
    border-collapse: separate !important;
    background-color: #<whatever>;
}

 

6) - Categories title - Components/jDownloads/Layouts/Categories/<active layout/EditLayout/Layout

{cat_title_begin}<div style="background-color:#EFEFEF; padding:6px;">{subcats_title_text}</div>{cat_title_end}

 

7) - Categories background - Components/jDownloads/Layouts/Categories/<active layout/EditLayout/Layout

Add background color to table and change, if you want, the color of the bottom border and the delimiting lines :

 <table width="100%" style="background-color:#<whatever>; border-bottom: 1px solid #cccccc;">

 

8) - Files title - Components/jDownloads/Layouts/Files/<active layout/EditLayout/Layout

{files_title_begin}<div style="background-color:#EF00EF; padding:6px;">{files_title_text}</div>{files_title_end}

 

9) - Files background - Components/jDownloads/Layouts/Files/<active layout/EditLayout/Layout

<table width="100%" style="padding:3px; background-color:#F5F5F5;">

 

Save jdownloads_fe.css file (the path will be shown in Components/jDownloads/Layouts/CSS-file) as this file will be overwritten upon jDownloads update, or copy these changes into jdownloads_custom,css.

 

For illustration, colours were set as follows:

1) - #000022

2) - #440000

3) - #000088

4) - #003300

5 ) - #444400

6) - #660000

7) - #330000 and #CCCC00

8) - #440044

9) - #220022

Here is how it looks like now:

Sin‌gleCategoryView After

 

Download Details:

DownloadDetails Before

1) - Download Details title - Components/jDownloads/Layouts/Download Details/<active layout/EditLayout/Layout

<table class="jdtable" style="border-style: solid; border-width: thin; border-color: #CECECE; padding: 5px; background-color: #efefef;" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
            <tr><td colspan="2" height="25" valign="top"><p style="background-color: #cecece; padding: 2px;" align="center"><strong>{details_block_title}</strong></p></td></tr>

(was set here set to #004444)

 

2) - Download Details background - Components/jDownloads/Layouts/Download Details/<active layout/EditLayout/Layout

<table class="jdtable" style="border-style: solid; border-width: thin; border-color: #CECECE; padding: 5px; background-color: #efefef;" border="0" cellpadding="0" cellspacing="0" width="100%">

(was set here set to #002222)

 

DownloadDetails After

 

 

 

Add comment


Security code
Refresh