Archivio

Posts Tagged ‘CSS’

Come creare un template con PHP, CSS e XHTML

8 novembre 2009 Sergejpinka 1 commento

php Come creare un template con PHP, CSS e XHTMLSu 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

Immagine anteprima YouTube

Parte seconda

Immagine anteprima YouTube

Parte terza

Immagine anteprima YouTube

Search and replace: modificare vecchio codice negli artcoli

19 luglio 2009 Sergejpinka Nessun commento

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 ;-)

Azzerare il CSS dei browser

1 gennaio 2009 Sergejpinka Nessun commento

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;
}
Categorie:blog Tag: ,

Didascalia ad un’immagine in un blog wordpress

16 luglio 2008 Sergejpinka Nessun commento
Aldrin con Armstrong riflesso nel proprio casco

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. ;-)