Messaggi Staff

[Teodor]

https://aiuto.forumattivo.it/t18354-messaggi-speciali-staff


Salve, per quanto riguarda i famosi Messaggi Staff, volevo chiedervi se sapevate dirmi come ottenere una specie di "Vignetta" utilizzando un codice CSS.
Sapreste aiutarmi??

[MattiaDes]

Prova a guardare qui: http://jsfiddle.net/gabrieleromanato/NSaM8/

[Teodor]

ciao @kaselli ho scelto la terza vignetta. puoi verificare se il CSS é corretto??

Codice:

.speech-bubble-top:after {
  border-bottom-color: #000;
 
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #000;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;
}

Grazie mille

[MattiaDes]

Come codice HTML:

Codice:

<div class="speech-bubble speech-bubble-left">Hi there</div>

Nel CSS:

Codice:

.speech-bubble {
  position: relative;
  background-color: #000;
  width: 200px;
  height: 150px;
  line-height: 150px;
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
    margin: 2em auto;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}

 .speech-bubble-left:after {
  border-right-color: #000;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}


[Teodor]

Nel codice HTML posso modificare 

Codice:

speech-bubble speech-bubble-left

o solo speech-bubble


Nel CSS invece modifico allo stesso modo vero??


Speech-bubble quindi dovrebbe essere la variabile??


@kaselli

[MattiaDes]

Sì esatto è la variabile, il codice HTML non modificarlo, se ci devi scrivere qualcosa dentro, fai così:

Codice:

    <div class="speech-bubble speech-bubble-left">TESTO</div>

Modificando il codice CSS riesci a cambiare il colore e altre cose

[wdi]

Ciao @kaselli il CSS lo inserito modificando il colore dello sfondo e invece il codice HTML  ho provato ad inserirlo in un topic per una prova, ma non funziona.

[Teodor]

Neanche a me funziona. Come mai??

[MattiaDes]

Faccio una prova:

Come mai a me funziona?

A me va.. ho inserito il codice HTML e CSS in questo messaggio

[Teodor]

@kaselli io ho messo il CSS bei CSS e invece il codice HTML nel post. .... Ho sbagliato qualcosa??

[Niko]

@teo puoi fornirci i css e html esatti (così come sono) che hai inserito?

[Teodor]

@Niko ma con le modifiche che io ho fatto?

[Niko]

se preferisci non condividerle qui metti l'html qui e il css mandamelo pure per messaggio privato

[Teodor]

Nel CSS ho modificato solo background-color

Codice:

<div class="speech-bubble speech-bubble-left">Hi there</div>

Codice:

.speech-bubble {
  position: relative;
  background-color: #FF99PP;
  width: 200px;
  height: 150px;
  line-height: 150px;
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
    margin: 2em auto;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}

 .speech-bubble-left:after {
  border-right-color: #000;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}


[Niko]

@teo penso che manchi una parte di codici css

qualcosa del tipo:

Codice:

.speech-bubble-left {
[...]
}

[Teodor]

@Niko dove esattamente?? [...]---> ad esempio staff. ???

[Niko]

[...] è per dire che c'è qualcosa in mezzo

il css con quell'intestazione è quello che manca (secondo me)

[Teodor]

@Niko scusami tanto ma dove é la parte che manca qualcosa esattamente???
Non ho ben capito: [...] potrebbe essere qualcosa a mio piacere o manca proprio qualcosa (un errore quindi)

[Niko]

manca un pezzo di css, mettila così

[Teodor]

@Niko ma allora prima @MattiaDes come ha fatto???
@MattiaDes potresti passarmi i codici CSS e HTML che hai inserito te??? Visto che i tuoi funzionano..... Grazie mille.

[Niko]

@teo in effetti

i suoi codici erano:

Codice:

<style>.speech-bubble {position: relative;background-color: #000;width: 200px;height: 150px;line-height: 150px;color: white;text-align: center;border-radius: 10px;font-family: sans-serif;margin: 2em auto;}

.speech-bubble:after {content: '';position: absolute;width: 0;height: 0;border: 15px solid;}

.speech-bubble-left:after {border-right-color: #000;top: 50%;right: 100%;margin-top: -15px;}</style>

<div class="speech-bubble speech-bubble-left">TESTO</div>

prova a inserire i suoi
i css non sono sempre una scienza esatta

[MattiaDes]

Come ha detto Niko, ti eri dimenticato di inserire questo:

Codice:

 .speech-bubble-left:after {
  border-right-color: #000;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

[MattiaDes]

@teo novità?

[Teodor]

@MattiaDes oggi provo perché in questi giorni non riesco ad accendere il PC mi connetto sempre dal cellulare

[Teodor]

ciao @MattiaDes ho provato ad inserire come hai fatto tu il CSS e HTML in un unico post per vedere se funziona, ma niente!!!
Se provo a metterlo qui sul forum invece funziona.
Come mai??