Personalizzare box Risposta rapida

Ho utilizzato il codice presente su questo forum di supporto per aggiungere l'avatar di chi scrive accanto al box della risposta rapida e funziona.

Ho provato poi a personalizzare il resto del box ma con risultati non pienamente soddisfacenti ( non so se a causa del CSS personalizzato e/o versione del forum ).

Vorrei sapere quindi :

- Come modificare dimensioni e posizione del box ( area di testo e toolbar per mettere in fila tutti i pulsanti ).

- Come aggiungere colore o immagine di sfondo all'area di testo ed alla toolbar dove sono raggruppati i pulsanti ( c'ero riuscito in qualche modo ma rimanevano dei bordi bianchi ) nonché ai pulsanti stessi, sempre se possibile.

- Come modificare tipo e colore di font dell'area di testo ( non prende quelli inseriti nel PdA e provando con qualche codice rimaneva comunque nero ).

Grazie in anticipo.

Ciao @arkan

potresti fornirmi il link del tutorial che hai seguito?

Grazie mille

Ho parlato del tutorial dell'avatar giusto per completezza riguardo le modifiche che ho effettuato sulla risposta rapida ma già prima di seguire la guida avevo intenzione di personalizzarla secondo i colori del mio forum dato che me la sono ritrovata fin dall'inizio, di "default", con una certa dimensione/posizione, sfondo bianco e col font di colore nero.

Se comunque ti serve saperlo, è questo.

oh, perdonami avevo frainteso la domanda

mi sono registrato sul tuo forum, ma aspetto la tua attivazione

Attivato

dunque dunque,

Arkan ha scritto:- Come modificare dimensioni e posizione del box ( area di testo e toolbar per mettere in fila tutti i pulsanti ).

Penso che il problema sia che l'avatar resta in alto e l'editor va poi a capo, vero?
Se il problema è questo puoi aggiungere questo css:

Codice:

#av_quickreply  {
float: left;
margin-left: 8px;
}
.qreply {
position: relative;
left: 56px;
width: 84%!important;
}

diventerebbe così:

Arkan ha scritto:- Come aggiungere colore o immagine di sfondo all'area di testo ed alla toolbar dove sono raggruppati i pulsanti ( c'ero riuscito in qualche modo ma rimanevano dei bordi bianchi ) nonché ai pulsanti stessi, sempre se possibile.

Lo sfondo dell'editor:

Codice:

.sceditor-container iframe, .sceditor-container textarea {
background-color: black!important;
}

Sfondo dei bottoni:

Codice:

.sceditor-toolbar {
background-color: black!important;
}

Se dovessi avere problemi con le spaziature, aggiungi questo:

Codice:

.sceditor-toolbar {
position: relative;
left: 0px;
width: 689px;
top: -79px;
margin-bottom: -68px!important;
}

Arkan ha scritto:- Come modificare tipo e colore di font dell'area di testo ( non prende quelli inseriti nel PdA e provando con qualche codice rimaneva comunque nero ).

in questo caso vale solamente quando il WYSIWYG è disattivato

Codice:

.sceditor-container iframe, .sceditor-container textarea {
color: white!important;
font-family: comic sans-serif!important;
}

La modifica dell'editor con i css è un po' complessa purtroppo

Il risultato finale ottenuto è lo stesso a cui ero arrivato anche da solo purtroppo :



L'avatar, come ti ho scritto, è una cosa in più che ho aggiunto ma non è mai stato un problema tanto che anche togliendolo restano comunque gli altri problemi, ossia :

- Rimangono parti bianche.

- I pulsanti rimangono con sfondo grigio ma questo forse perchè è proprio la "pulsantiera" ad essere grigia e ci si può far poco.

- L'ultimo gruppo di pulsanti va accapo ma allargando manualmente ( tramite il bordo in basso a destra ) il box anche di poco, entrerebbero tutti sulla stessa riga. Immagino quindi si possa allargare in qualche modo anche tramite CSS.

- Tipo e colore di font quando il WYSIWYG è disattivato. Non c'è soluzione?. E' veramente scomodo così.
Non si può agire sui valori di default a seconda della modalità di modifica selezionata?.
Non so, agendo su questa parte :

Codice:

.sceditor-container ltr wysiwygMode

o altrove o tramite template.

Anche tutte le altre modifiche, se fossero facilmente attuabili tramite template o altro piuttosto che tramite CSS che ritieni complesso da utilizzare in questo caso, mi andrebbe comunque bene.

Basta raggiungere lo scopo poi se si può fare con due righe di CSS tanto meglio

EDIT

Risolto un pò tutto, alla meglio, facendo una ricerca sui forum di supporto francese/inglese

Aggiungo quindi una domanda, avendoci fatto caso adesso, sempre inerente alla risposta rapida :

Come sposto verso il basso solamente i due pulsanti : "Anteprima" ed "Inviare" ( per staccarli un pò dal bordo dell'area di testo, insomma )?

Come sempre, individuo cosa toccare ma poi non riesco a "tradurlo" in CSS

Risolto un pò tutto, alla meglio, facendo una ricerca sui forum di supporto francese/inglese

Fantastico
se vuoi puoi fornire i codici che hai usato per risolvere, così da aiutare futuri membri che avranno la stessa richiesta

Aggiungo quindi una domanda, avendoci fatto caso adesso, sempre inerente alla risposta rapida :

Come sposto verso il basso solamente i due pulsanti : "Anteprima" ed "Inviare" ( per staccarli un pò dal bordo dell'area di testo, insomma )?

Dire che un css di questo tipo aiuterebbe

Codice:

#quick_reply > div.center > input {
margin-top: 15px;
}

Certo, ho utilizzato i codici indicati in questo topic

Il tuo codice funziona perfettamente, grazie