Come faccio a mettere uno sfondo di 3 gif sulle cat?

Visualizzazione Stampabile

02-09-2006, 13:47
Demo16

Come faccio a mettere uno sfondo di 3 gif sulle cat?

salve a tutti ragazzi,
ho appena comprato il favoloso Vbullettin e sto personalizzandolo.

Vorrei personalizzare la riga delle categorie.
L'originale è come ben saprete è così:

#869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left

con un gradiente di 100x100px in gif che viene ripetuto.

Io vorrei ripetere un altro file sempre di 100x100gif ma vorrei che l'inizio e la fine avessero una chiusura diversa fatta da altri 2 files

ho pensato di impostarla così ma non ha funzionato:

transparent url(images/gradients/gradient_tcat_01.gif) url(images/gradients/gradient_tcat_02.gif) repeat-x top left url(images/gradients/gradient_tcat_03.gif)

dove sbaglio?:(
02-09-2006, 14:36
Enzo

Citazione:

Originariamente Scritto da Demo16

salve a tutti ragazzi,
ho appena comprato il favoloso Vbullettin e sto personalizzandolo.

Vorrei personalizzare la riga delle categorie.
L'originale è come ben saprete è così:

#869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left

con un gradiente di 100x100px in gif che viene ripetuto.

Io vorrei ripetere un altro file sempre di 100x100gif ma vorrei che l'inizio e la fine avessero una chiusura diversa fatta da altri 2 files

ho pensato di impostarla così ma non ha funzionato:

transparent url(images/gradients/gradient_tcat_01.gif) url(images/gradients/gradient_tcat_02.gif) repeat-x top left url(images/gradients/gradient_tcat_03.gif)

dove sbaglio?:(

Devi modificare il CSS.Ciao
02-09-2006, 14:46
Demo16

come? da dove? aiutoooo
02-09-2006, 16:46
Sergio

Citazione:

Originariamente Scritto da Demo16

salve a tutti ragazzi,
ho appena comprato il favoloso Vbullettin e sto personalizzandolo.

Vorrei personalizzare la riga delle categorie.
L'originale è come ben saprete è così:

#869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left

con un gradiente di 100x100px in gif che viene ripetuto.

Io vorrei ripetere un altro file sempre di 100x100gif ma vorrei che l'inizio e la fine avessero una chiusura diversa fatta da altri 2 files

ho pensato di impostarla così ma non ha funzionato:

transparent url(images/gradients/gradient_tcat_01.gif) url(images/gradients/gradient_tcat_02.gif) repeat-x top left url(images/gradients/gradient_tcat_03.gif)

dove sbaglio?:(

Il Gradiente è Uno solo, poi se vuoi mettere delle immagini devi proprio modificare lo Style :)
02-09-2006, 17:07
Demo16

Citazione:

Originariamente Scritto da Sergio

Il Gradiente è Uno solo, poi se vuoi mettere delle immagini devi proprio modificare lo Style :)

Si grazie ho capito ma da dove lo modifico e come?
02-09-2006, 17:17
Enzo

Citazione:

Originariamente Scritto da Demo16

Si grazie ho capito ma da dove lo modifico e come?

Se vuoi fare un lavoro come da screenshot allegato DEVI modificare il CSS.Ciao

PS

non posso allegare la foto e ti lascio il link.

www.chatomeka.com/screeshot.gif
02-09-2006, 17:18
Enzo

Citazione:

Originariamente Scritto da Enzo

Se vuoi fare un lavoro come da screenshot allegato DEVI modificare il CSS.Ciao

PS

non posso allegare la foto e ti lascio il link.

www.chatomeka.com/screenshot.gif

Cambiato il link.Ciauz
02-09-2006, 17:40
Demo16

grazie enzo mi hai capito alla perfezione mi daresti l'esempio del tuo css? non risco a capire dove e come editare
02-09-2006, 18:41
neonix

secondo me ti converrebbe usare i div e mettere un'immagine a sinistra (piccola) e poi uno sfondo che si ripete, anche perchè potresti avere dei problemi dopo quando la cella viene auto ridimensionata dallo script per certi tipi di tabelle...
02-09-2006, 18:46
Enzo

Citazione:

Originariamente Scritto da neonix

secondo me ti converrebbe usare i div e mettere un'immagine a sinistra (piccola) e poi uno sfondo che si ripete, anche perchè potresti avere dei problemi dopo quando la cella viene auto ridimensionata dallo script per certi tipi di tabelle...

Assolutamente NO,io ho modificato inserendo il tutto in un foglio di blocco notes e poi l'ho rinominato vbitalia.css.Ti lascio un esempio di CSS per poterlo studiare e adattarlo al tuo skin.Ciao

Citazione:

ody
{
background: #FFFFFF url(bg.gif);
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
}
a:link, body_alink
{
color: #000000;
text-decoration: none;
}
a:visited, body_avisited
{
color: #000000;
text-decoration: none;
}
a:hover, a:active, body_ahover
{
color: #C6C6C6;
text-decoration: none;
}
.page
{
background: #FFFFFF url(bg.gif);
color: #000000;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background: url(gradient_tcat.gif);
color: #000000;
border: 0px solid ;
}
.tcat
{
background: #000000 url(tcat.gif) repeat-x top left;
color: #000000;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
color: #000000;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #000000;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #DEDEDE;
text-decoration: none;
}
.thead
{
background: url(images/gradients/gradient_tcat.gif) repeat-x top left;
color: #000000;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
text-decoration: none;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #DCDCDC;
text-decoration: none;
}
.tfoot
{
background: #000000 url(tcat.gif) repeat-x top left;
color: #FFFFFF;
}
.tfoot a:link, .tfoot_alink
{
color: #FFFFFF;
text-decoration: none;
}
.tfoot a:visited, .tfoot_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
color: #DEDEDE;
text-decoration: none;
}
.alt1, .alt1Active
{
background: #FBFBFB;
color: #000000;
}
.alt2, .alt2Active
{
background: #ffffff;
color: #000000;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
background: #F5F5FF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
color: #000000;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjsel
{
background: #3E5C92;
color: #FFFFFF;
}
.fjdpth0
{
background: #F7F7F7;
color: #000000;
}
.panel
{
background: #F5F5F5 repeat-x top left;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
background: #E0E0E0 repeat-x top left;
color: #000000;
}
legend
{
color: #000000;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #000000 url(tcat.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #D3D3D3;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
color: #000000;
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
color: #000000;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite
{
background: #8A949E;
color: #FFFFFF;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
color: #FFFFFF;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
.banner1{background: url(banner1.gif) top left no-repeat ; height:157px}
.banner2{background: url(banner2.gif) top left repeat-x ; height:157px}
.banner3{background: url(banner3.gif) top right no-repeat ; height:157px}
.footer1{background: url(footer1.gif) top left repeat-x ; height:23px}
.footer2{background: url(footer2.gif) top right no-repeat ; height:23px}
.b1{background: url(b1.gif) top left no-repeat ; height:28px}
.b2{background: url(b2.gif) top left repeat-x ; height:28px}
.b3{background: url(b3.gif) top right no-repeat ; height:28px}
.boxd{ background: #000000 url(boxduoi.gif) repeat-x ; height:8px }

.tcat2
{
color: #000000;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding-left: 70px;
padding-top: 3px;
}
.tcat2 a:link, .tcat2_alink
{
color: #000000;
text-decoration: none;
}
.tcat2 a:visited, .tcat2_avisited
{
color: #000000;
text-decoration: none;
}
.tcat2 a:hover, .tcat2 a:active, .tcat2_ahover
{
color: #878787;
text-decoration: none;
}
02-09-2006, 19:59
neonix

allora forse non ho capito cosa intendeva -.-
03-09-2006, 01:20
Sergio

Citazione:

Originariamente Scritto da neonix

secondo me ti converrebbe usare i div e mettere un'immagine a sinistra (piccola) e poi uno sfondo che si ripete, anche perchè potresti avere dei problemi dopo quando la cella viene auto ridimensionata dallo script per certi tipi di tabelle...

Esattamente, devi modificare l'HTML dello style, non è una cosa semplicissima.
03-09-2006, 01:45
Demo16

ragazzi mi state confondendo. in una pagina html metterei un table con 3 layou dentro il primo ed il terzo con delle immagini fisse ed il secondo con un immagine che si ripete.
Ma qui non capisco cosa e dove editare nel pannello di controllo penso che edito lo stile css giusto?
03-09-2006, 10:42
Enzo

Citazione:

Originariamente Scritto da Enzo

Assolutamente NO,io ho modificato inserendo il tutto in un foglio di blocco notes e poi l'ho rinominato vbitalia.css.Ti lascio un esempio di CSS per poterlo studiare e adattarlo al tuo skin.Ciao

In questo CSS sono racchiuse tutte le informazioni dello stile e quindi puoi modificarle a tuo piacimento prendendo spunto dal tuo syile che vuoi modificare.Una volta modificato lo inserisci nella cartella "Images" del forum,fai degli esperimenti sino ad arrivate al tuo obbiettivo.Ciao
03-09-2006, 13:36
Demo16

Allora cerchiamo di capirci meglio, io al momento sto lavorando sul pannello di controllo del VBulletin e da li posso variare i parametri del file css per ogni style che creo. Ho creato uno style ma non trovo il file css corrispondente. Ad ogni modo cosa dovrei mettere nel parametro "sfondo" della sezione "Righe delle categorie"?

e più che altro in quale file trovo l'HTML di quella sezione?
Cavolo ma una guida non esiste? Vorrei fare molte altre modifiche ma non trovo i files corrispondenti
03-09-2006, 16:12
Sergio

Citazione:

Originariamente Scritto da Demo16

Allora cerchiamo di capirci meglio, io al momento sto lavorando sul pannello di controllo del VBulletin e da li posso variare i parametri del file css per ogni style che creo. Ho creato uno style ma non trovo il file css corrispondente. Ad ogni modo cosa dovrei mettere nel parametro "sfondo" della sezione "Righe delle categorie"?

e più che altro in quale file trovo l'HTML di quella sezione?
Cavolo ma una guida non esiste? Vorrei fare molte altre modifiche ma non trovo i files corrispondenti

Ripeto, configurare il vBulletin con le sue mille opzioni in modalità standard non è semplicissimo, volerlo anche modificare è ancora più complesso ed ogni modifica rischia poi di non essere compatibile con le versioni successive del vBulletin.
Ora ci guardo e mi riprometto di dirti esattamente come fare :)
03-09-2006, 22:46
Demo16

Tnx Sergio!
03-09-2006, 22:53
Enzo

Per piacere vedete di non cancellare i miei post visto che sono fatti per aiutare questo utente.Cera scritto di inviarmi la skin che l'avrei modificata e poi spedita.Demo16 inviami una mail che ti spiego,la trovi nel mio profilo.Ciao
03-09-2006, 23:56
Demo16

Cancellano i post??? ahy ahy ahy. Grazie enzo ti scrivo domani mattina!!
04-09-2006, 10:08
mossss

Citazione:

Originariamente Scritto da Demo16

Cancellano i post??? ahy ahy ahy. Grazie enzo ti scrivo domani mattina!!

non è una moda del forum cancellare post, qui cancelliamo solo quelli contro il regolamento.
04-09-2006, 17:03
Demo16

la mia era ovviamente una battua :-D
Comunque attendo ansioso una risposta non è semplice in effetti la mia richiesta