Codice database #4

« Older Newer »

» Fyan

Posted on 3/12/2023, 17:40

Senior Member

Group: Staff

Posts: 21,524

Location: Bari

Status: Anonymous

BREVE GUIDA

- Il codice si regge sui trampoli, quindi potrebbe scoppiare, probabilmente. Se avete difficoltà, potete contattarmi e cercherò di capire dove è scoppiato così lo sistemo! Se avete abbastanza capacità, sentitevi liberi di modificarlo come vi piace! Mi sta bene che manipoliate i miei codici.

- Le sezioni e le informazioni che ho inserito sono quelle che interessano a me da lasciar segnate per ogni pg, ma potete modificarle liberamente, aggiungere o togliere sezioni (accoppiate oppure una lunga intera). Se sapete farlo, procedete pure! Altrimenti, non sentitevi in imbarazzo a contattarmi! Mi ci vuole davvero pochissimo, quindi vi aiuto con piacere.

- Compilate prima di tutto i campi testuali, li ho lasciati vuoti o al massimo con riempitivi come "nome cognome".

- I tre riquadri di sopra sono tre immagini, sono impostati per contenere automaticamente e adattare qualsiasi immagine e centrarla sia verticalmente che orizzontalmente. Se volete modificare la dimensione, dovete sostituire al background-size:cover una percentuale, come per esempio background-size: 80% per farle meno zoommate o 120% per aumentare lo zoom. Se volete modificare la posizione, cambiate i background-position-x: center e background-position-y: center con questi comandi:

CITAZIONE

background-position-x: left > allinea a sinistra
background-position-x: right > allinea a destra

background-position-y: top > allinea in alto
background-position-y: bottom > allinea in basso

Queste tre immagini, nel codice si chiamano IMMAGINE 1, IMMAGINE PG, IMMAGINE 2, dovete sostituire queste diciture al link dell'immagine. Potete caricarle gratuitamente su https://imgur.com/.
A "IMMAGINE PG" è associato il link alla scheda, nel codice ha questa dicitura:

CODICE

[URL=https://LINK%20SCHEDA]

- I due riquadri di sotto sono per ospitare la cronologia delle role e dei racconti, vi basta compilarli con link e informazioni che desiderate.
Fate sempre attenzione a non cancellare i ; o le parentesi uncinate dei div, perché potrebbe scoppiare tutto.

- Quando in codice trovate PATTERN significa che lì potete inserire un pattern, che ho previsto per la scheda (se volete esempi, guardate pure il mio database pre-compilato). Potete trovare dei pattern carini su questo sito qui: Colourlovers. Attenzione agli ad-blocker, perché se ne avete il sito non funziona. Potete metterlo tranquillamente in lista bianca, perché lo ho io: assicuro che non ci sono problemi di sorta.
Nel codice troverete PATTERN due volte.

- Dopodiché troverete due riquadri per le affiliazioni e le relazioni sentimentali. Ho segnato dei campi che potete seguire o ignorare. Per quanto riguarda le affiliazioni, ho lasciato il codice della barra che si riempie e ora vi aiuto a compilarlo.
Il codice nello specifico è questo:

CODICE

<div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px; overflow:auto"><div style="font-family:playfair display; font-size:18px; text-align:center">Nome PG</div>
<div style="display:block;background:#000; width:200px; height:15px; padding:3px"><div style="display:block;background:#fff; width:100px; height:13px; line-height:13px; float:left; font-size:13px; text-align:center; padding-bottom:2px; text-transform:uppercase; letter-spacing:1px">Stato</div></div>
Descrizione

Cambiate prima di tutto "Nome PG" col nome del pg di cui parlate; "stato" con il tipo di affiliazione che il vostro pg ha col pg e "descrizione" con una breve descrizione dell'affiliazione. Consultate sempre il mio database per avere riferimento.
Dopodiché, potete cambiare il colore della barra di sfondo: il codice è #000, che è il colore nero. Per cercare colori, potete sceglierli cercando su google il colore che vi piace e aggiungendo alla ricerca "html", vi darà una sequenza di 6 caratteri preceduta da un #, che è un codice che crea il colore. Potete anche usare questo sito nel caso.
Per cambiare la lunghezza della barra, dovrete cambiare la lunghezza del codice background:#fff; width:100px; height:13px; sostituendo a 100 un numero diverso. La barra può raggiungere 200px, che è il massimo, e 1px che è il minimo. Scegliete voi, ma ricordate che dopo un po' la scritta di "stato" potrebbe non entrare. Nel caso fatemi un fischio che vi aggiusto tutto.

- Trovate poi il riquadro della playlist (potete tenerlo o modificarlo) e dell'icona. La playlist può essere banalmente una lista coi link, oppure potete farvi aiutare da youtube o spotify, che danno il codice html in iframe (significa che crea una finestra dei loro programmi da incorporare) e inserirla. Io ce l'ho di youtube per Amelie, ad esempio.
Per l'icona, è un piccolo vizio che mi sono presa io. Le creo da questo sito. Vi basta salvare l'immagine e caricarla in un host (come imgur) e poi inserire il link.

- Alla fine c'è una barra dove inserire la vostra citazione preferita che parli del pg o di una role che sentite particolarmente legata al pg. Il testo si allinea automaticamente al centro e la barra aumenta in maniera automatica all'ampliarsi del testo!

Per qualsiasi dubbio, sono disponibile! ♥

Nome Cognome


Razza	Allineamento ✦ mbti	Classe

Database Role	Dentro il background
Campagna: Nome campagna 01) ...	01) ...

Affiliazioni	Relazioni sentimentali
Nome PG Stato Descrizione	Orientamento: orientamento sessuale Ruolo: (Dominant/Submissive/Switch - Bottom/Top/Vers) In coppia con: PG con cui è in coppia Relazioni passate: Relazioni passate del PG. In programma: Eventuali relazioni in programma

Playlist	Icona
Temi Principali In lavorazione...	[IMG=]LINK IMMAGINE ICONA[/IMG]
Citazione lunga lunghissima molto bella e sentita.

SPOILER (clicca per visualizzare)

CODICE

<div align="center" style="width:605px; padding: 5px; border: 2px solid #dbdbdb; background: #eee; font-family:calibri; font-size: 13px; line-height:1.2; text-align:justify; color: #000"><div style="background: #fff; border: 2px solid #dbdbdb; font-family: playfair display; font-size:25px; text-align:center; text-transform: uppercase; padding:5px">Nome Cognome</div><table cellspacing="2">

<tr>
<td><div style="width: 194px; height:194px; background: url(IMMAGINE 1); background-size:cover; background-position-x:center; background-position-y:center; border:2px solid #dbdbdb"></div></td>
<td>[URL=https://LINK%20SCHEDA]<div style="width: 193px; height:193px; background: url(IMMAGINE PG); background-size:cover; background-position-x:center; background-position-y:center; border:2px solid #dbdbdb"></div>[/URL]</td>
<td><div style="width: 193px; height:193px; background: url(IMMAGINE 2); background-size:cover; background-position-x:center; background-position-y:center; border:2px solid #dbdbdb"></div></td>
</tr>

<tr>
<td><div style="width:184px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Razza</div></td>
<td><div style="width:183px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Allineamento ✦ mbti</div></td>
<td><div style="width:183px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Classe</div></td>
</tr>

</table><table cellspacing="2">

<tr>
<td><div style="width:282px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Database Role</div></td>
<td><div style="width:282px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Dentro il background</div></td>
</tr>

<tr>
<td><div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px; overflow:auto"><b>Campagna:</b> <b>Nome campagna</b>
01) ...</div></td>
<td><div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px; overflow:auto">01) ...</td>
</tr>

<tr>
<td colspan="2"><div style="width:595px; height:30px; background: url(PATTERN);border:2px solid #dbdbdb"></div></td>
</tr>

<tr>
<td><div style="width:282px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Affiliazioni</div></td>
<td><div style="width:282px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Relazioni sentimentali</div></td>
</tr>

<tr>
<td><div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px; overflow:auto"><div style="font-family:playfair display; font-size:18px; text-align:center">Nome PG</div>
<div style="display:block;background:#000; width:200px; height:15px; padding:3px"><div style="display:block;background:#fff; width:100px; height:13px; line-height:13px; float:left; font-size:13px; text-align:center; padding-bottom:2px; text-transform:uppercase; letter-spacing:1px">Stato</div></div>
Descrizione

</div></td>
<td><div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px; overflow:auto"><b>Orientamento:</b> orientamento sessuale
<b>Ruolo:</b> (Dominant/Submissive/Switch - Bottom/Top/Vers)

<b>In coppia con:</b> PG con cui è in coppia
<b>Relazioni passate:</b> Relazioni passate del PG.
<b>In programma:</b> Eventuali relazioni in programma
</div></div></td>
</tr>

<tr>
<td colspan="2"><div style="width:595px; height:30px; background: url(PATTERN);border:2px solid #dbdbdb"></div></td>
</tr>

<tr>
<td><div style="width:282px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Playlist</div></td>
<td><div style="width:282px; background:#fff; border:2px solid #dbdbdb; padding:5px; font-family: playfair display; font-size:15px; text-align:center; text-transform: uppercase;">Icona</div></td>
</tr>

<tr>
<td><div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px; overflow:auto"><b>Temi Principali</b>

<i>In lavorazione...</i>
</div></td>
<td><div style="width:282px; height:150px; background:#fff; border:2px solid #dbdbdb; padding:5px" align="center"><div style="width:150px">[IMG=]LINK IMMAGINE ICONA[/IMG]</div></div></td>
</tr>

<tr>
<td colspan="2"><div style="width:585px; height:autopx; background: #fff;border:2px solid #dbdbdb; padding:5px; font-size: 12px; text-align:center; font-family: cambria"><i>Citazione lunga lunghissima molto bella e sentita.</i></div></td>
</tr>

</table></div>

Edited by » Fyan - 3/12/2023, 18:51

Web

0 replies since 3/12/2023, 17:40 89 views