Speichern und Abbrechen Buttons verändern

[sakis]

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.





Danke
LG
Sakis

[ColinM]

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.

Code Select Expand

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

Code Select Expand

button {
  color: green;
}
should turn the text to a green colour

Colin

[sakis]

danke für deine Antwort. Leider tut sich nichts wenn ich den code von dir in der custom.css von jdownloads einfüge.

[ColinM]

Hmm!
Maybe we need to force it  with an !important so try code

Code Select Expand

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

Code Select Expand

.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

[sakis]

folgender code funktioniert super

Code Select Expand

.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

[ColinM]

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

[sakis]

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.