Salve a tutti, rieccomi con un nuovo problema :P
Nel mio forum ho installato questa (https://custom.simplemachines.org/mods/index.php?mod=1295) shoutbox ma più precisamente la versione Pro, la quale ha delle opzioni in più, tra cui poter inserire un immagine di sfondo alla chat.
Funziona tutto correttamente, tranne proprio la funzione dell'immagine di sfondo, perchè non riesco a regolarla come vorrei e vi spiego il perchè...
Di default, ogni immagine inserita viene ripetuta quindi, per aggirare il problema, si deve usare un immagine abbastanza grande, solo che anche con immagini grandi il ripetersi avviene sempre, anche se più contenuto... Vi mostro qualche esempio:
Questa è con un'immagine 200x200
(https://i.postimg.cc/mtr9K1yD/Screen-Shot-04-21-21-at-02-13-PM.png) (https://postimg.cc/mtr9K1yD)
Mentre questa è con un immagine 1280x427
(https://i.postimg.cc/YvWvw6Gp/Screen-Shot-04-21-21-at-01-56-PM.png) (https://postimg.cc/YvWvw6Gp)
Come noterete, questa si ripete una sola volta ed inizia da dove ho messo la riga rossa, facendomi di fatto comparire al centro la scritta, che io vorrei tutta a destra, come è nell'immagine originale
(https://i.postimg.cc/FdmdpYKh/a.png) (https://postimg.cc/FdmdpYKh)
Ho fatto molte prove, creando immagini molto più lunghe ma il risultato è sempre lo stesso, si ripetere sempre allo stesso punto.
Ovviamente ho chiesto supporto a chi ha scritto sto mode mi disse che potevo regolare tutto tramite il css, ma le mie conoscenze non me lo permettono. Gli ho anche chiesto supporto pubblicamente sul suo forum, sollecitandolo più volte, ma dopo circa un mese non ho ricevuto nessuna risposta >:(
Potrei anche lasciarla così, al centro, solo che spesso le scritte in chat vanno a sovrapporsi sopra diventando poco leggibile e brutto esteticamente perciò vorrei che andasse tutta a destra... Avete dei suggerimenti ?
Allego il css della chat, se serve altro ditemelo :)
Grazie
Mi son dovuto registrare ;D
Aggiungi:
div#shoutbox { background-repeat: no-repeat;
background-size: contain;
background-position-x: right;
background-color: #000; }
Alla fine del file :) (aggiusta l'indentazione del testo, lo sto facendo di fretta e tab non funziona qui)
E' responsive, per quanto possibile.
Se per aggiustarlo intendevi renderlo così ?
div#shoutbox {
background-repeat: no-repeat;
background-size: contain;
background-position-x: right;
background-color: #000;
}
Purtroppo il posizionamento non cambia, rimane come prima :( Altre idee ?
Non vedo il codice aggiunto al file infatti...
L'ho rimesso ;)
Se ti scrivo alla fine del file, intendo proprio ALLA FINE del file, non prima dell'ultima parentesi :)
div#shoutbox {
background-repeat: no-repeat;
background-size: contain;
background-position-x: right;
background-color: #000;
}
}
Questo non è ciò che ho scritto :P
Credevo che l'ultima parentesi doveva restare :P
Cmq l'ho tolta ora, ma rimane sempre così...
Ma te mi vuoi far impazzire...
Se ti scrivo AGGIUNGILO ALLA FINE è diverso da CANCELLA LA PARENTESI!!! :-[
Te lo allego :-X
Oh pardon... Avevo pensato diversamente ;D
L'ho messo su e ora il risultato è quello che volevo, ora devo solo giocare un pò per migliorare il posizionamento della scritta.
Grazie mille Flavio, avanzi un caffè ;)
L'immagine si allinea col bordo a destra, vedi tu di quanti pixel la vuoi far spostare basta che avvicini il testo al bordo ;)
E menomale ora funziona ;D
Si ho visto, ed infatti alla fine vi si sovrappone la barra come puoi vedere. Credo che spostarla un pò verso sinistra risolverà il problema.
Grazie ancora
La soluzione più elegante sarebbe stata fare un'immagine solo con la scritta e la trasparenza, inserire lo sfondo nero (come ho fatto), e regolare i margini con quello, ma è un po' più complicato. E' un problema annoso lo sfondo con le immagini...
Per ora sono riuscito ad inserirla come volevo, ma cmq farò altre prove, anche come dici tu. Alla fine dovrò pur trovare il posizionamento giusto ;D
Riesumo questo topic per un altro aiuto al riguardo...
Il codice che mi scrisse Flavio funziona bene per quello che chiesi, ora invece si è presentata la possibilità di inserire un immagine per lo sfondo di tutta la finestra della chat, ho fatto alcune prove e ci sono riuscito modificando il valore background-position-x: right in center.
L'immagine viene centrata come volevo ,però ho il problema che, se vado a ridimensionare la finestra del browser, l'immagine si restringe nella parte inferiore e ai lati e si vede uno spazio nero ,perciò vi chiedo, come evitare di farla restringere e renderla "fissa" ?
Così la vedo a browser tutto aperto
(https://i.postimg.cc/PPMgKHKy/Screen-Shot-01-27-22-at-10-05-PM.png) (https://postimg.cc/PPMgKHKy)
Così è quando lo ridimensiono
(https://i.postimg.cc/7CJQvr1p/Screen-Shot-01-27-22-at-10-07-PM.png) (https://postimg.cc/7CJQvr1p)
Grazie
Potresti con background-size: cover, ma si distorcerebbe l'immagine. Ti serverebbe un'immagine con una proporzione migliore.
E non ho visto la risposta fino all'aggiornamento... Boh.
Se non ricordo male, già provai il "cover" con risultati cmq deludenti.
Come dovrei calcolarmi le proporzioni ?
Ehhhh le immagini come sfondo sono un po' PITA perchè a seconda del dispositivo che utilizzi si vedono più o meno bene... Se hai un 16:9 su un monitor si vedranno bene, ma su un cellulare meno. Se usi un 4:3 su un monitor faranno schifo ma saranno più fruibili su un cellulare ;D
Il miglior compromesso, credo, sarebbe un'immagine bella grossa in 16:9, con un'altezza decente che riesca a coprire senza stirarla. Occhio però a non caricare un'immagine troppo pesante (diversi MB) oppure ti rallenta il caricamento.
Come dicevo, PITA >:D