Sergejpinka

Su Youtube, ho trovato questo interessante tutorial video che mostra come creare un template per Web Design basandosi sul PHP, il CSS e l’XHTML.

Parte prima

Parte seconda

Parte terza

Il plugin di Wordpress Search and replace permette di modificare il codice inserito in uno o più articoli scritti in passato dei quali si conosce il codice XHTML o CSS e al quale si vuole apportare qualche modifica.

Per esempio, io l’ho usato modificare il codice XHTML da

1

<p align="justify"></p>

a

1

<p class="justify"></p>

Quel che è possibile fare con Search and replace è nelle vostre mani e nella vostra immaginazione

Come eliminare il codice CSS che i vari browser (FF, IE, Safari, Opera, ecc.ecc.) aggiungono automaticamente al codice CSS delle agine da noi creata?

Semplice! basta aggiungere il codice seguente all’inizio del proprio file .css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* Don't forget to set a foreground and background color
on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}

Fonte | meyerweb.com

Per far si che che i codici XHTML si comportino esattamente come si desidera (allineare il testo a sinistra mediante appropriato comando ecc.) suggerisco di aggiungere:

1
2
3
4
5
6
7
8
9
10
11
12

*[align=left] {
text-align: left;
}
*[align=right] {
text-align: right;
}
*[align=center] {
text-align: center;
}
*[align=justify] {
text-align: justify;
}

Aldrin con Armstrong riflesso nel proprio casco

Nella versione Wordpress 2.6 ho notato finalmente che vi è la possibilità d inserire una didascalia (detta anche caption) ad una immagine. La didascalia di una immagine altro non è che una breve descrizione dell’immagine stessa.

Come inserire il testo della didascalia

1. Clicca su Scrivi
2. clicca su Articolo
3. Sulla destra di Aggiungi media, clicca su Aggiungi immagine
4. nella finestra che si presenterà, scrivi il testo in Didascalia immagine

Eventuale modifica del CSS del tema

Se non vi piace come il vostro tema wordpress restituisca visivamente un’immagine con didascalia consiglio di utilizzare il seguente codice CSS mediante questa procedura:

1. cliccate su Design
2. cliccate su Editor temi
3. nel form del “Foglio di stile” fate il copia/incolla del CSS (lo trovate più sotto)
4. cliccate su “Aggiorna file“

Testo del CSS per didascalia:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* CAPTION */
.wp-caption img {
border:0pt none;
margin:0pt;
padding:0pt;
}
.wp-caption p, .wp-caption-text {
font-size:11px;
line-height:17px;
margin:0pt;
padding:0pt 4px 5px;
}
.wp-caption {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin:10px;
padding-top:4px;
text-align:center;
}

Se riscontrate problemi lasciate un commento vi darò una mano appena possibile.