modifica css template joomla

[daniele95]

salve a tutti, è un bel po' che mi assento dal forum e sono sempre felice di ritrovarvi tutti qui ogni volta che torno. questa vlta ho un problema un po' complesso da spiegare... cercherò di essere il più chiaro possibile. ho fatto un template per joomla tramite il programma artisteer 3.0. il template è una bozza e lo ho installato su un sito di prova:

http://uxxo.it/prova

per fare delle prove ho lavorato usando firebug per mozilla. il mio scopo è mettere l'immagine png senza sfondo, ritraente un ombra, page_g1.png sopra al footer ma senza creare uno spazio(div) tra il footer e il foglio principale del sito. il template di partenza mi posizionava l'immagine in alto a sinistra vicino il banner... io ho modificato l'html del template spostando il div contenitore sopra il footer e togliendo la proprietà position al css. il risultato è quello che potete vedere. l'ombra dovrebbe stare anche sopra la colonna, come nella parte alta quando va sotto il menù, ma anche sopra il foglio della pagina.

è un pomeriggio che faccio prove e questo è il risultato che si avvicina di più.

allego il template i versione provvisoria. grazie a tutti dell'aiuto!

PS: allego anche uno screen di come dovrebbe venire finito più o meno con evidenziata l'ombra in questione:

http://www.robodaniele.net/img/preview.jpg

grazie ancora ciao ciao

[KillerWorm]

Ciao,
sostanzialmente puoi usare "position" per piazzare al meglio il div.

Dovrai comunque spostare questo:

<div id="art-page-background-glare">
<div id="art-page-background-glare-image"> </div>
</div>

e metterlo dentro il div art-main. Puoi metterlo in un punto qualunque, poi sul css aggiungi queste regole oltre a quelle che ci sono già per questo elemento:

#art-page-background-glare {
    position: absolute;
    bottom: 70px; /* regola tu la posizione dal fondo come meglio credi */
    z-index: 999;
    pointer-events: none;
}

[daniele95]

ti ringrazio della risposta... il mio problema principale è che se lo metto con i pixel la posizione mi cambia in base alla lunghezza della pagina... se il cliente ha bisogno di scrivere 3 kilometri di cose sarebbe tutto sballato... non so se mi sono spiegato... comunque ora provo come hai scritto se funziona diventi il mio idolo *_* ahahah scherzi a parte vi faccio sapere tra poco!!

[daniele95]

FUNZIONAAAAAAAAAAAAA!!!!!!!! sei grande

mi potresti spiegare il significato del css che mi hai fatto aggiungere? position absolute più o meno lo conosco... e anche bottom... quelli che non conosco sono z-index e pointer events... grazie mille

un'altra cosetta già che ci sono... esiste anche un modo per lasciare una sorta di spazio per evitare che l'ombra vada sopra ai contenuti? per esempio nella pagina news va sopra ai bottoni... si può evitare?


ancora grazie

[KillerWorm]

http://www.w3.org/wiki/CSS/Properties/z-index
Specifica la "profondità" dell'elemento.

http://www.w3.org/TR/SVG/interact.ht...EventsProperty
In parole povere permette di interagire col mouse sugli elementi che si trovano "coperti" dall'elemento a cui è stata annullata questa proprietà
Il div ombra copre alcuni bottoni e li rende poco funzionali, per questo motivo ho inserito quella regola.

Per distanziare i bottoni dal footer puoi impostare dei margin o dei padding agli stessi, o agli elementi della pagina che ne sono coinvolti... fai qualche prova

[daniele95]

ho capito ti ringrazio... questo però non è il sito a cui verrà attribuito questo template... lo ho caricato qui soltanto per poterci fare delle prove per sistemare quel problema... quando lo caricherò sul sito definitivo cercherò delle soluzioni!! grazie ancora!

[daniele95]

ciao,ho installato il template sul dominio vero e proprio(http://frantoiocesarebattisti.it)ma ho bisogno ancora del tuo aiuto... l'ombra che abbiamo inserito in basso in teoria dovrebbe esserci anche in alto però meno accentuata... lungo quello che divenetrà il menù c'è... mentre sulla colonna no. nel css c'è... infatti:

.art-sidebar1 .art-layout-glare-image {     background-image: url("../images/sidebar_g.png");     background-repeat: no-repeat;     display: block;     height: 23px;     left: 0;     position: absolute;     top: 0;     width: 100%; }

però non si vede...cosa devo fare?

grazie mille dell'aiuto

[daniele95]

risolto

[daniele95]

rispolvero questa discussione per apportare un'altra modifica al css...

vorrei trasformare il modulo di login da come è ora(http://frantoiocesarebattisti.it) a come è in questa immagine... http://frantoiocesarebattisti.it/images/fcb-lm.jpg

ovviamente ho l'immagine di sfondo pronta... che se servirà vi darò... dovrei scrivere una nuova regola css credo... grazie mille dell'aiuto!!!

[vannisca86]

in informazione.. ma il template l'hai creato con artisteer ?