allineare a destra un bottone e cambiargli colore

**daniele95** · 23-08-2012, 15:45

ciao a tutti, come da oggetto vorrei allineare a destra il bottone del login e farlo bianco con scritta nera quando non è selezionato e verde con scritta bianca quando è selezionato. inoltre quando effettui il login restail modulo nero con lo stesso bottone ma cons critto esci... anche quello dovrebbe essere uguale... come posso fare?? sto modificando qualche codice con firebug ma non trovo quelli giusti.. altrimenti dovrei riesportare il template da artisteer ma dovrei rimodificare mille cose...

(( help meeeee

grazie a tutti

**testapazza** · 23-08-2012, 18:26

Ciao, questa è la mia soluzione:
per quanto riguarda il css:

Codice PHP:


<style> 

.right{float:right;} 

.button{ color:#000; background-color:#fff; border:none;}

.button:hover{ color:#fff; background-color:green; border:none;} 

</style>

naturalmente il button deve avere class="right button" altrimenti non funzia.

P.s. Probabilmente saranno da correggere i margini, padding font-size, ecc...

**daniele95** · 23-08-2012, 20:16

grazie dell'aiuto però se cambio classe al bottone se dovessi metterlo in altre pagine con altri usi il template non lo troverenne più giusto?

**rinaldi** · 23-08-2012, 20:43

Crea un foglio di style cosi lo puoi usare in tutte le pagine che vuoi.

codice:

 style.css

codice:

<head>
<link  href="cartella/style.css" type="text/css" rel="stylesheet" />
</head>

**daniele95** · 23-08-2012, 21:21

mmm il sito è fatto con joomla... non credo di avere questo livello di personalizzazione... poi comunque il modulo di login sta in tutte le pagine....

**testapazza** · 23-08-2012, 21:35

Basta che incolli il codice CSS senza i tag style all'interno del file style.CSS del template e, presumendo che il form di login si trovi dentro un modulo, dopo che hai individuato la posizione devi aggiungere le due classi al button.
Ciao

**daniele95** · 24-08-2012, 00:56

grazie mille a tutti ma purtroppo non sono capace a lavorare con i css... quel poco che faccio vado a tentativi...allora: cosa devo mettere dove in questo codice secondo voi?

Codice PHP:


/* begin Button */

.art-button-wrapper a.art-button,

.art-button-wrapper a.art-button:link,

.art-button-wrapper input.art-button,

.art-button-wrapper button.art-button

{

  text-decoration: none;

  font-family: Arial, Helvetica, Sans-Serif;

  font-style: normal;

  font-weight: normal;

  font-size: 13px;

  position:relative;

  top:0;

  display: inline-block;

  vertical-align: middle;

  white-space: nowrap;

  text-align: center;

  color: #ffffff !important;

  width: auto;

  outline: none;

  border: none;

  background: none;

  line-height: 26px;

  height: 26px;

  margin: 0 !important;

  padding: 0 6px !important;

  overflow: visible;

  cursor: pointer;

}



.art-button img, .art-button-wrapper img

{

  margin: 0;

  vertical-align: middle;

}



.art-button-wrapper

{

  vertical-align: middle;

  display: inline-block;

  position: relative;

  height: 26px;

  overflow: hidden;

  white-space: nowrap;

  width: auto;

  margin: 0;

  padding: 0;

  z-index: 0;

}



.firefox2 .art-button-wrapper

{

  display: block;

  float: left;

}



input, select, textarea

{

  vertical-align: middle;

  font-family: Arial, Helvetica, Sans-Serif;

  font-style: normal;

  font-weight: normal;

  font-size: 13px;

}



.art-block select 

{

    width:96%;

}



.art-button-wrapper.hover .art-button, .art-button-wrapper.hover a.art-button:link, .art-button:hover

{

  color: #FFFFFF !important;

  text-decoration: none !important;

}



.art-button-wrapper.active .art-button, .art-button-wrapper.active a.art-button:link

{

  color: #FFFFFF !important;

}



.art-button-wrapper .art-button-l, .art-button-wrapper .art-button-r

{

  display: block;

  position: absolute;

  height: 88px;

  margin: 0;

  padding: 0;

  background-image: url('../images/button.png');

}



.art-button-wrapper .art-button-l

{

  left: 0;

  right: 0;

}



.art-button-wrapper .art-button-r

{

  width: 401px;

  right: 0;

  clip: rect(auto, auto, auto, 401px);

}



.art-button-wrapper.hover .art-button-l, .art-button-wrapper.hover .art-button-r

{

  top: -31px;

}



.art-button-wrapper.active .art-button-l, .art-button-wrapper.active .art-button-r

{

  top: -62px;

}



.art-button-wrapper input

{

  float: none !important;

}

/* end Button */

per cambiargli colore mi è venuta un'idea.... ho trovato l'immagine che usa:

http://www.frantoiocesarebattisti.it...ges/button.png

se cambio i colori qua e poi metto su tutti i color il colore bianco dovrei esserci... giusto?? per allinearlo a destra aspetto vostre idee !!!!! grazie millee

**testapazza** · 24-08-2012, 08:17

Ciao,
le modifiche ai css vanno inserite sempre alla fine del file perchè altrimenti rischi che qualche altra regola sovrascriva le tue.

quindi fai così:

codice:

.art-button-wrapper{float:right} /*per spostare a destra il pulsante*/

mentre per il colore visto che artister fa così

ti conviene cambiare il colore dall'immagine...

**daniele95** · 24-08-2012, 12:26

ho provato e funziona grazie mille!!! l'unica cosa non so se si potesse distanziare di più dall'alto... se si come??

**rinaldi** · 24-08-2012, 13:15

Originariamente inviato da daniele95
ho provato e funziona grazie mille!!! l'unica cosa non so se si potesse distanziare di più dall'alto... se si come??

Puio usare queste propietà margin, margin-left,margin-right,margin-bottom,margin-top

codice:

margin-left:10px

Discussione: allineare a destra un bottone e cambiargli colore

Strumenti discussione

Ricerca discussione

Visualizza

allineare a destra un bottone e cambiargli colore

Permessi di invio