Modo discussione | Modo lineare

**Luca P.** · 18-01-2009 19:43

Innanzi tutto, dobbiamo capire come creare un nuovo tema per poi poterlo modificare Biggrin

Andate in ACP--->Template e Temi--->Temi--->Crea un Nuovo tema e scegliamo il nome del futuro tema, modificabile in seguito. La seconda opzione lasciatela così com'è.

Ora vediamo da quali selettori è composto il nostro caro tema.

Ecco due screen che mostrano i selettori nell'index
[Immagine: 2ur2r9c.png]

Ecco uno screen che mostra i selettori di forumdisplay
[Immagine: 2koayd.png]

Ecco uno screen che mostra i selettori di showthread
[Immagine: 20iw669.png]

Questi sono i principali selettori da modificare. Per altre info basta chiedere Biggrin

CSS

Il CSS (Cascading Style Sheets) è un file in formato .css, per l'appunto, che definisce le varie proprietà degli elementi che dovranno apparire nella pagina web. Per creare questi fogli di stile non c'è bisogno di file avanzati ma solo il blocco note e un po' di pazienza.

COME RICHIAMARLO
Per includere un qualsiasi codice CSS ad una pagina web si possono scegliere due modi:

- includerlo tramite un altro file in estensione css;

- scrivere il codice direttamente nel file html, tra il tag head. In seguito vedremo come fare;

Seguendo il primo caso, dovremmo creare il file css che in questo caso chiameremo stile.css.

Come faccio a dare l'estensione .css al file? Prendiamo come esempio il blocco note. Una volta terminato il lavoro clicchiamo su salva con nome..., dal menù a tendina scegliamo Tutti i file e salviamo il file creato con il nome di stile.css

Ecco il codice per includere il file css nella pagina:

Codice PHP:

<html>
<head>
<title>Prova Guida</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>Ciao</body>
</html> 

Non credo ci sia da spiegare qualcosa in questo codice Biggrin

Ora vediamo il secondo codice, cioè, inserire il codice css direttamente nel file html/php

Codice PHP:

<html>
<head>
<title>Prova Guida</title>
<style type="text/css">
<!-- Nostro codice css -->
</style>
</head>
<body>Ciao</body>
</html> 

Anche qui non credo ci sia qualche problema Biggrin

Una volta incorporato il foglio di stile non ci resta che imparare a gestirlo nel file html.

Iniziamo col dire che i selettori del CSS (li vedremo più in là) possono essere definiti anche classi o ID.
Per richiamare un selettore del CSS nel file html bisogna usare questi codici:

Codice PHP:

<div class="nomeselettore">Contenuto</div>
<div id="nomeselettore">Contenuto</div> 

Ora vi chiederete perchè due stringhe. Per spiegarvelo devo cominciare a spiegare il CSS e quindi iniziamo

Il foglio di stile è diviso in selettori. Questi selettori servono per definire le proprietà del blocco.

Ecco un esempio di selettore

Codice PHP:

.selettore {proprietà1: definizione1;} 

Analizziamo questo codice.
Prima del nome selettore va inserito un punto o un cancelletto (#). Questi due segni stanno ad indicare se il selettore è un classe o un ID e qui si ritorna al concetto dei div. Quando è presente il punto, il selettore è una classe, quindi si userà <div class="nomeselettore"></div>, mentre con il # si userà ID.

selettore è quello che verrà inserito qui: <div class="selettore"></div>. Non ha molta importanza. Proprietà1 sta ad indicare una proprietà del selettore.

Delle proprietà possono essere:

- font-family; (tipo del carattere, es: verdana, comic sans ms, ecc...)
- background-color; (colore che farà da background al contenuto del div)
- color; (colore del font contenuto nel div)
- height/width; (altezza/larghezza)
- border; (bordo del contenuto)
- float; (posizione del div)

Questi sono i più importanti, vediamo come usarli.

Background-Color

Codice PHP:

.selettore {background-color: #123456} 

Si può anche definire un'immagine

Codice PHP:

.selettore {background-image: url(indirizzoimmagine);} 

Questa immagine si può ripetere in orizzontale, verticale o in tutti e due i modi.

Codice PHP:

.selettore {background-image: Url(indirizzoimmagine); background-repeat: repeat-x} 

Al posto di repeat-x si possono inserire

repeat-y per far ripetere l'immagine in verticale
repeat-x per far muovere l'immagine in orizzontale
repeat per far muovere l'immagine in tutti e due i sensi

Robertof · 19-01-2009 16:28

Grazie, mi sarà utile quando tenterò di creare un tema per il mio sito Biggrin

**Luca P.** · 19-01-2009 16:36

Di niente. Se volete aggiungo una parte in cui spiego un po' il CSS.

Dvdxseo · 19-01-2009 20:00

Aggiungi aggiungi asd

**Luca P.** · 20-01-2009 14:54

(19-01-2009 20:00)dvd_xseo Ha scritto: Aggiungi aggiungi asd

Aggiunta

Dvdxseo · 20-01-2009 15:15

Bravo *patpat*
aumentategli la rep così posso aggiungergli un altro punto! Biggrin

edoardol · 20-01-2009 17:52

per aggiungere quello che chiedevo nell altro post???

lyllo · 26-05-2009 22:11

ciao, sto provando a modificare il tema del sito.

1) ho un problema: se fisso la dimensione della tabella a 780px va tutto bene tranne la finestra degli smiley che si ingrandisce drammaticamente.
c'è un modo per evitarlo?

2) mi sapreste spiegare anche come inserire eventualmente due altri div in tutte le pagine?
al #container ho applicato uno sfondo uguale al container che ho nel mio sito.
vorrei però aggiungere un header ed un footer a completare l'immagine.
dove devo andare a smanettare?

3) non riesco a spostare il menu superiore con i link "cerca calendario etc", .menu NON esiste Sad

grazie.

Dvdxseo · 27-05-2009 12:28

4) Potresti aprire una discussione in problemi generici? Biggrin

lyllo · 27-05-2009 19:38

scusate, cambio domanda.

come faccio a cambiare lo stile dei pulsanti?
l'input textbox ed il select li ho modificati.

grazie.

Modo discussione \| Modo lineare [Tema] Creare il vostro primo tema
Autore	Messaggio