Custom CSS

[kurim]

Hi,

ich wäre dafür das man nicht das CSS vom jdownloader direkt ändert sondern ein "custom.css" läd denn bei jedem update zersägt es mir meinen neuen Style.
Also ein Css das beim Update nicht mit überschrieben wird.

[schmatzler]

Das geht bereits jetzt schon - du kannst die Klassen von JDownloader einfach in deinem Haupt-Template verwenden.

Ich habe den JDownloader so z.B. komplett auf schwarz gestylt:

http://www.i-war2.com/downloads/category/3-independence-war-i

Die CSS dazu (mit Kommentaren):

Code Select Expand

/*downloads*/
/*gradient black*/
table.jd_cat_subheader {
background: #515151; /* Old browsers */
background: -moz-linear-gradient(top, #515151 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #515151 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #515151 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #515151 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, #515151 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

/*gradient orange subcat*/
.subheadingtext {
background: #ffc227; /* Old browsers */
background: -moz-linear-gradient(top, #ffc227 0%, #ffb007 17%, #c68100 50%, #a87000 51%, #bc7100 59%, #d47100 71%, #a86500 84%, #785800 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc227), color-stop(17%,#ffb007), color-stop(50%,#c68100), color-stop(51%,#a87000), color-stop(59%,#bc7100), color-stop(71%,#d47100), color-stop(84%,#a86500), color-stop(100%,#785800)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc227', endColorstr='#785800',GradientType=0 ); /* IE6-9 */
color:#000;
}

/*gradient orange files*/
.subfilestext {
background: #ffc227; /* Old browsers */
background: -moz-linear-gradient(top, #ffc227 0%, #ffb007 17%, #c68100 50%, #a87000 51%, #bc7100 59%, #d47100 71%, #a86500 84%, #785800 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc227), color-stop(17%,#ffb007), color-stop(50%,#c68100), color-stop(51%,#a87000), color-stop(59%,#bc7100), color-stop(71%,#d47100), color-stop(84%,#a86500), color-stop(100%,#785800)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffc227 0%,#ffb007 17%,#c68100 50%,#a87000 51%,#bc7100 59%,#d47100 71%,#a86500 84%,#785800 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc227', endColorstr='#785800',GradientType=0 ); /* IE6-9 */
color:#000;
}

/*gradient green*/
table.downloadstable {
background: #309308; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #309308 0%, #326b06 25%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#309308), color-stop(25%,#326b06), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #309308 0%,#326b06 25%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #309308 0%,#326b06 25%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #309308 0%,#326b06 25%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #309308 0%,#326b06 25%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#309308', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*gradient download details*/
p.dwnldetails {
background: #515151; /* Old browsers */
background: -moz-linear-gradient(top, #515151 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #515151 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #515151 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #515151 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, #515151 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

/* things to align all the stuff in a row
* and make the button fonts readable */
table.jdtable {
  background-color:#000 !important;
}

.jddesc {
  margin-left:60px;
  margin-top:-40px;
  padding-bottom:15px;
}

.jdfiledesc {
  margin-left:35px;
  margin-top:-32px;
  padding-bottom:8px;
}

p.votingstars {
  margin-top:12px;
}

.jwajaxvote-box {
  margin-top:-8px;
}

p.jddwlbutton {
  margin-top:10px;
}

p.jddwlbutton a {
  color:#000 !important;
}

.detailvotingbox {
  margin-top:12px;
}

p.detaildwlbutton a {
  color:#000 !important;
}

p.detaildwlbutton {
  margin-top:15px;
}

/*search downloads*/
table.jd_top_navi,
fieldset.word,
fieldset.phrases,
fieldset.only,
form.searchForm,
.jd_footer,
.search {
  background-color:#000 !important;
}

[kurim]

Das ist aber nicht wirklich eine brauchbare Lösung,
denn ich will doch nicht jedes mal jdownloader CSS mit laden wenn ich es überhaupt nicht benötigte.

Und der Angebotene CSS editor nimmt ja nur die beiden die bei einem update überschrieben werden, leider...

[ColinM]

Yes I agree. Having a Custom css in jDownloads would be an enhancement.  It would need to be loaded after jdownloads_fe.css
But I do not think it will be until after we have first stable solution.

And by Google translate as my German is poor!

Ja, ich stimme. Nachdem eine benutzerdefinierte CSS in jDownloads würde eine Verbesserung sein. Sie müsste nach jdownloads_fe.css geladen werden
Aber ich glaube nicht, dass es, bis nach einer ersten stabilen Lösung sein.

[Arno]

Hi Colin,
maybe can you give me a hint what you need for this exactly.
So we can add it fast.

[kurim]

Hi,

ihr habt jetzt ne custom.css drin, schön wäre es wenn man die auch im Backend sehen würde damit man sich das bearbeiten via shell/ftp sparen kann.

gruß kurim

[ColinM]

Kurim,
Yes it would be nice to have the custom css available in the backend like the other css.  Think that will happen in due course.  Efforts at the moment are on a stable release.
Colin