jDownloads Support Forum

Older Versions => jDownloads 3.2 (Support ended) => General => Topic started by: sakis on 08.11.2015 17:57:18

Title: Speichern und Abbrechen Buttons verändern
Post by: sakis on 08.11.2015 17:57:18
Hallo,

wie kann ich die Buttons vom Upload Modul verändern? Ich möchte diese gerne gegen die von bootstrap tauschen. Ich habe (glaube ich) alles notwendige gefunden, doch weiß nicht wie ich das umsetzen soll.

(http://abload.de/thumb/unbenanntuosvi.png)



Danke
LG
Sakis
Title: Re: Speichern und Abbrechen Buttons verändern
Post by: ColinM on 08.11.2015 19:51:06
Hi
jD does not style those buttons.
They are taken from your template

for example the html <button  tag is styled in the default Joomla! template as below.

input, button, select, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
    cursor: pointer;
}


So you need to put some styling in jdownloads_custom.css for example adding
button {
  color: green;
}

should turn the text to a green colour

Colin
Title: Re: Speichern und Abbrechen Buttons verändern
Post by: sakis on 09.11.2015 01:12:22
danke für deine Antwort. Leider tut sich nichts wenn ich den code von dir in der custom.css von jdownloads einfüge.
Title: Re: Speichern und Abbrechen Buttons verändern
Post by: ColinM on 09.11.2015 11:02:09
Hmm!
Maybe we need to force it  with an !important so try code
button {
  color: green !important;
}


Have looked at html and css, and it seems the template loads its css last, which jD cannot get around except by being more specific or using an !important
So another way that avoids using !important is in this instance the restricted range and more specific css

.jd_fieldset_outer button {
color: green
}

That makes it specific to where jD uses buttons. 
But if the template css has an !important then it will also need an !important to override the override
The better css is the restricted range one.
How familiar with css are you?

Colin
PS I have to use Google Translate so please excuse if I misunderstand sometimes
Title: Re: Speichern und Abbrechen Buttons verändern
Post by: sakis on 10.11.2015 20:02:31
folgender code funktioniert super

.jd_fieldset_outer button {
color: green
}


vielen dank dafür.
Gibt es eine möglichkeit dort die bootstrap buttons zu nutzen? wenn ja wie ?

Vielen Dank
saki
Title: Re: Speichern und Abbrechen Buttons verändern
Post by: ColinM on 11.11.2015 16:02:07
Hi
Using the bootstrap style buttons is just a function of the applied css so you would need to add a basic css such as below - note some of the css could be removed as it is covering a lot of older browsers  for instance a leading * such as *display is for IE6 and IE7

.jd_fieldset_outer button {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #007000;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    *background-color: #e6e6e6;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #bbb;
    *border: 0;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    *margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

It can get quite 'interesting'

Colin
Title: Re: Speichern und Abbrechen Buttons verändern
Post by: sakis on 11.11.2015 17:29:10
Vielen Dank. Wenn ich das mit Firebug eintrage geht es, aber wenn ich es in meiner Custom.css eintrage, geht es nicht. Naja nicht schlimm, wäre vielleicht gut wenn man in den nächsten versionen bootstrap mit einbaut.