Aggiungere delle Immagini in Body

[pokemon3dsgo]

Ciao a tutti!
Probabilmente il titolo è poco chiaro, vedo di spiegarmi meglio.
Io al momento uso wordpress col tema Keith. La mia idea sarebbe quella di inserire in formato png e quindi a sfondo trasparente, delle immagini (come un personaggio degli anime o uno slogan tanto per fare un esempio), collocate in punti specifici della pagina. Ecco una foto per intenderci:



Il mio dilemma principale non sono tanto i codici CSS, con quelli riesco più o meno ad arrangiarmi, bensì l'impossibilità di aggiungere al tema Keith un semplice tag div dotato di attributi quali id e/o class, che possa fungere da contenitore, al quale io poi andrei a collocare l'immagine, formattandola a sua volta tramite editor CSS.

Leggendo qua sul forum, mi sembra di capire che Keith è un tema creato da Altervista stesso. Ciò dovrebbe significare che gli script che lo costituiscono, non sono in alcun modo modificabili. Correggetemi se sbaglio. Ho utilizzato anche i Widget, ma il tutto lascia a desiderare in realtà. Pertanto, esiste una scappatoia?

In alternativa, esiste un tema simile a Keith pienamente editabile? E quali sono gli svantaggi nel non utilizzare un tema Altervista?

[alemoppo]

bensì l'impossibilità di aggiungere al tema Keith un semplice tag div dotato di attributi quali id e/o class, che possa fungere da contenitore, al quale io poi andrei a collocare l'immagine, formattandola a sua volta tramite editor CSS.

Puoi modificare "content" e "sidebar" con l'attuale tema che stai utilizzando andando a selezionare rispettivamente #site-content e #sidebar-primary

Leggendo qua sul forum, mi sembra di capire che Keith è un tema creato da Altervista stesso. Ciò dovrebbe significare che gli script che lo costituiscono, non sono in alcun modo modificabili. Correggetemi se sbaglio.

Esatto, non sono modificabili.

esiste un tema simile a Keith pienamente editabile? E quali sono gli svantaggi nel non utilizzare un tema Altervista?

Non ci sono svantaggi nel non utilizzare un tema non Altervista. Purtroppo non conosco temi editabili come vuoi tu.

Ciao!

[pokemon3dsgo]

Grazie per le delucidazioni :)

Puoi modificare "content" e "sidebar" con l'attuale tema che stai utilizzando andando a selezionare rispettivamente #site-content e #sidebar-primary

Scusa l'ignoranza, ma da dove posso modificare quei file e quindi aggiungere ad essi dei DIV?
Oppure intendi "modificarli" tramite Editor CSS? Per intenderci ecco cosa ho fatto...

Ho inserito un'immagine come widget (quindi in sidebar-primary) e ho affibbiato ad essa la classe "img-logo-10".
Ho poi modificato il suo posizionamento. Purtroppo riscontro sempre lo stesso problema: al ridimensionamento della pagina l'immagine slitta un po' ovunque. Il codice che ho utilizzato è il seguente, avrei dovuto aggiungere altro forse per mantenerla fissa?

.img-logo-10 {
        background-repeat: no-repeat;
        display: block;
	position: absolute;
	bottom: 129%;
	right: 245%;
	left: auto;
	top: auto;
	z-index: 1000;	
}

[alemoppo]

Oppure intendi "modificarli" tramite Editor CSS? Per intenderci ecco cosa ho fatto...

Tramite "custom css". Non è possibile modificare l'html.

Ho inserito un'immagine come widget (quindi in sidebar-primary) e ho affibbiato ad essa la classe "img-logo-10".
Ho poi modificato il suo posizionamento. Purtroppo riscontro sempre lo stesso problema: al ridimensionamento della pagina l'immagine slitta un po' ovunque. Il codice che ho utilizzato è il seguente, avrei dovuto aggiungere altro forse per mantenerla fissa?

.img-logo-10 {
        background-repeat: no-repeat;
        display: block;
	position: absolute;
	bottom: 129%;
	right: 245%;
	left: auto;
	top: auto;
	z-index: 1000;	
}

Non trovo alcun elemento con classe img-logo-10. Stai probando in una pagina particolare? Comunque modifiche al css spesso sono complicate da fare se non sono previste dal tema. Se stai usando un'altra pagina di test, puoi linkarmela che vedo se posso suggerirti qualche regola css? (non posso assicurarti nulla).

Ciao!

[pokemon3dsgo]

Oh perdonami, ma non salvo mai se il codice non mi convince xD

Allora, al momento ho inserito l'immagine in widget tramite l'opzione HTML. Ho così aggiunto in un tag img il link dell'immagine. Ho infine smanettato col codice CSS affinché trovassi la soluzione. #custom_html-3 è l'id sui cui sto procedendo. Scordiamoci "img-logo-10".
L'immagine è al posto giusto. Purtroppo succede che al minimo ridimensionamento della pagina, l'immagine (come dicevo prima) va fuori posto.

#custom_html-3 {
	background-color: rgba(0,0,0,0);
        background-repeat: no-repeat;
	position: absolute;
	bottom: 1740px;
	left: -900px;
	z-index: 1000;

Prima dell'update, rovistando nell'html di Keith, avevo inserito quell'immagine in hgroup. Mi era bastato poco quella volta per piazzare la medesima immagine, fissa in un punto. Ora purtroppo sembra che quella funzione sia obsoleta/insesistente :(

[alemoppo]

Oltre al css che hai, aggiungi:

@media (max-width: 1422px)
{
	#custom_html-3
	{
		position: absolute;
		bottom: 1650px;
		left: -800px;
	}
}

Vedi se ti può andar bene.

Ciao!

[pokemon3dsgo]

Ciao!
Grazie tante per il codice. Può decisamente andare, però... sembra funzionare solo se la pagina google è in ridimensionamento. In altre parole, se la pagina copre tutto lo schermo, l'immagine torna alla posizione nativa (come widget in sidebar) perdendo tutti i valori attribuiti ad essa in CSS.
Dimentico forse qualcosa?

Grazie ancora per il supporto, davvero.

EDIT: il codice sembra funzionare solo in fase di personalizzazione (editor CSS) :(

[alemoppo]

EDIT: il codice sembra funzionare solo in fase di personalizzazione (editor CSS) :(

In che senso?

Hai provato a svuotare la cache?

Ciao!

[pokemon3dsgo]

In che senso?

Hai provato a svuotare la cache?

Ciao!

Ho trovato l'errore!
Io possiedo un monitor full HD, infatti impostando 1920px anziché 1422px in max-width, non ottengo errori.
A questo punto ti domando, se impostassi 8000px, compierei una sorta di sbaglio o non dovrebbero esserci problemi di alcuna natura?

EDIT: mi auto-rispondo. Sembra che impostando valori così alti, il problema si ripresenti.
Leggendo un po' ho saputo che spesso conviene inserire l'absolute all'interno di un box "parent" impostato su relative.

In ogni caso non voglio abusare della tua disponibilità ulteriormente, pertanto grazie. Ripristinerò il codice ad 1 versione fa.
Certo che vedere un logo che si muove non è il massimo ma mi accontenterò xD ciau!

[alemoppo]

Leggendo un po' ho saputo che spesso conviene inserire l'absolute all'interno di un box "parent" impostato su relative.

Probabile, occorre far un po' di tentativi, sopratutto con il CSS.

In ogni caso non voglio abusare della tua disponibilità ulteriormente, pertanto grazie.

Se posso aiutarti lo faccio volentieri, non preoccuparti.
Comunque immagino tu abbia capito che con il css bisogna andar un po' a tentativi per trovare la soluzione migliore, specialmente sei si tratta di modificare siti già esistenti come il tuo caso.

Ciao!

[pokemon3dsgo]

Probabile, occorre far un po' di tentativi, sopratutto con il CSS.



Se posso aiutarti lo faccio volentieri, non preoccuparti.
Comunque immagino tu abbia capito che con il css bisogna andar un po' a tentativi per trovare la soluzione migliore, specialmente sei si tratta di modificare siti già esistenti come il tuo caso.

Ciao!

Eh si, il CSS è così. Ed è per questo che mi piace... non sai mai se quella cosa si sistemerà o meno :)

Attualmente, credo di aver trovato un buon compromesso. Servendomi del codice che mi hai fornito, ed aggiungendo un max-width all'id page, ho constatato che nel ridimensionare/rimpicciolire sempre più la pagina, l'immagine resta buona lì dov'è. Raggiunta invece una certa dimensione della nostra pagina (credo intorno i 1200px), l'immagine comincia a spostarsi, fino a sparire dalla visuale, lasciando spazio solo all'header, al menu di nav. e al contenuto.
E ragionandoci un attimo, forse la ragione è proprio questa. Mi spiego meglio: Considerando che la Sidebar viene eliminata e ricollocata in fondo alla pagina e, considerando che l'immagine discussa non è altro che un widget posto in Sidebar, probabilmente questo "riposizionamento forzato" è in grado di annullare la posizione assoluta/absolute dell'immagine stessa. Il che, se tu ieri non mi avessi risposto, a quest'ora starei a domandarmi semmai ci fosse la possibilità di inserire un div con id/class sotto il nav, visualizzabile in tutte le pagine, così da piazzare tutte le picture che voglio xD