Sfondo cliccabile

[Klaudius]

Ciao ragazzi, come da titolo vorrei rendere lo sfondo (pubblicitario) cliccabile, come posso fare?
Io lo sfondo l'ho inserito da Proprietà di Stile>Generale>HTML, però da li non c'è modo di inserire un <a href>

 

[Kintaro]

Hai qualche esempio già esistente di quel che vuoi fare?

 

[Klaudius]

Hai qualche esempio già esistente di quel che vuoi fare?

sicuramente mi sono spiegato male
tantissimi siti usando questo modo per fare pubblicità, ecco alcuni esempi:

www.spaziogames.it
www.everyeye.it

come vedi lo sfondo è una sorta di bannerone pubblicitario

io vorrei sapere come rendere lo sfondo cliccabile, magari inserendo un <a href> o cose simili

 

[Kintaro]

Mi sembrava strano infatti... Su everyeye ad esempio lo sfondo non è cliccabile, è l'header che è fatto in modo che sembri lo sfondo. Infatti se clicchi all'estrema destra lo sfondo non è cliccabile.

 

[Klaudius]

qualche idea su come farlo?

 

[netkingZ]

Questa è facile da risolvere.
Andiamo per passi:

1. In Aspetto-->Proprietà di stile --> Generale -->HTML (Varie) inserisci:

cursor : pointer;

2. In Aspetto-->Proprietà di stile --> Generale -->Contenuto(Varie) inserisci:

cursor : default;

3. In Aspetto -->Template-->PAGE_CONTAINER inserisci qui:

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>

modifica con

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'} onclick="window.location='http://www.Google.com';">

Per modificare l'URL di destinazione una volta cliccato basta che cambi l'indirizzo URL ( nell'esempio è inserito http://www.Google.com).
Se vuoi inserire un immagine basta che vai a In Aspetto-->Proprietà di stile --> Generale -->HTML e alla voce Sfondo --> immagine inserisci un immagine.

Adesso hai il tuo "sfondo pubblicitario".

P.S.: Nel pannello di controllo di XenForo la voce Proprietà di Stile fa riferimento ai CSS quindi non puoi inserire ne JavaScript ne HTML , ricordatelo .

 

[Klaudius]

ancora grazie, però mi da alcuni problemi, ad esempio rende impossibile utilizzare la barra di ricerca, cliccandoci per scrivere mi rimanda al collegamento dello sfondo

c'è modo di risolvere?

 

[netkingZ]

No , elimina quello che ti ho scritto prima , il codice comprendeva un altro concetto che per quello che vuoi realizzare te non va bene , quindi tutto il codice che ti ho fatto inserire eliminalo.
La soluzione giusta è questa :
1. In Aspetto -->Template-->Navigation scorri fino alla fine del codice ed inserisci :

<style>
.forum_list{
width:980px;
 
}
 
#headerMover3{
width:980px;
margin: auto;
}
 
.footer{
margin-top:auto;
 
}
</style>
<a href="http://www.Google.com">
<div style="background-color:#f09 ; height:200px ; width:100%; margin-top:-40px; cursor : pointer;z-index:0; margin-bottom:-200px " ></div>
</a>

ti devo un attimo spiegare però cosa ho fatto con questo codice.
Allora analizziamo la parte contenuta nei TAG <style></style>
sono andato a richiamare delle classi ed un id.

L'id #headerMover3 è il contenitore generale del contenuto centrale, dovrai variare il width in base alla larghezza del tuo forum , inteso come contenuto centrale ( nella prova che ho fatto la larghezza del mio contenuto centrale è di 980px). il margin:auto serve per centrare il tutto.

La classe forum_list deve avere il width identico a quello che metterai nell'id #headerMover3 ( se noti anche qui nel mio stile il width è 980px)

La classe footer invece è la parte in basso che va ricalibrata a seconda dell'altezza del div che conterrà la pubblicità.

in fine se noti ho inserito un <a href></a> che punta a Google come esempio e nello stile del div della pubblicità ho messo dei parametri che se vuoi puoi modificare , fai attenzione soprattutto al margin-bottom ed al margin-top del div pubblicità.

Spero comprenderai che senza avere davanti agli occhi il template che hai usato e le modifiche che hai fatto le cose sono più complicate. Spero che riuscirai a cavartela con questa spiegazione , in caso non capissi qualcosa basta che scrivi e cerco di darti una mano .

 

[Kintaro]

Non basta metterlo in EXTRA.css?

 

[Klaudius]

Non basta metterlo in EXTRA.css?

che codice ci metteresti?

 

[Lollo]

ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link
Vedi se ti può risultare utile.