Tips Css WordPress 2.6

August 28, 2008

Reading time ~1 minute

Wordpress logoWordpress logo

Text editor yang ada pada WordPress 2.6 memiliki sesuatu tampilan yang baru, khususnya saat anda memasukan images kedalam content tersebut, sekarang anda dapat menampilkan gambar bersamaan dengan text wraps yang ada di bagian gambar secara rapih dan benar.
Untuk hal ini anda dapat juga mengatur posisi align pada gambar anda apakah dia akan ke “left”, “right” atau “centered”.

Pada saat menggunakan text editor untuk mengatur align dari posisi gambar, WordPress akan menambahkan class=”alignleft”, class=”alignright” atau class=”aligncentered” kedalam ‘img’ tags atau disekitar ‘div’ element, pada saat anda memilih left, right atau center alignment pada posisi gambar anda.

Postingan ini akan membuat gambar yang anda posting akan megikuti alignment yang dibuat oleh WordPress admin area, namun ketika anda melihat postingan anda di site anda,mungkin saja ini tidak akan bekerja dengan benar. Hal ini terjadi karena theme yang anda gunakan tidak memiliki classes yang di add di WordPress admin area.

Bagaimana cara menambahkanya?

Bukalah style.css pada Theme Editor anda [Login dan klik pada Design -> Theme Editor].
dan tambahkan beberapa code CSS ini pada bagian akhir dari style.css.

[sourcecode language=’css’].alignleft
{
float:left;
margin:0 0.5em 0.5em 0;
}
.alignright
{
float:right;
margin:0 0 0.5em 0.5em;
}
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}[/sourcecode]

Bagaimana dengan CAPTIONS pada gambar nya ?

Lakukan cara yang sama dengan memasukan code berikut ini:

[sourcecode language=’css’].wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}[/sourcecode]

comments powered by Disqus