Murat Çeşmecioğlu

Kişisel Web Sitesi

Uzun süredir iş-güç derken yazamadığımın farkındayım. Bu yüzden sitenin kodlarını tekrar elden geçirip en azından biraz ilgi göstermeye başlarım diye düşündüm. Bu arada sitenin teması olan Simple5’i bir gece yarısı tekrar elden geçirip Simple 5.1’i hazırlamış bulunuyorum. Daha esnek bir tasarıma sahip, gereksiz javascript, css ve resimlerden arındırılmış bir hale geldi.

Bu süreçte karşılaştığım sorunlardan birisi ise responsive tasarımda yazılara eklediğim resimlerin tarayıcı genişliğine göre büyüyüp küçülmemesi oldu. Bunun sebebi WordPress’in resim eklerken, resmi çevreleyen wp-caption class’ına sahip div’e style etiketiyle css kodu ile genişlik belirtmesiydi. Benim ihtiyacım olan width yerine max-width olmasıydı. Bunun için hemen temanın kodlarına aşağıda paylaştığım kodu ekledim. Böylece WordPress’in caption shortcode’unu yöneten fonksiyonunu kendi isteğime göre şekillendirdim.

function sp5_img_caption_shortcode_filter($val, $attr, $content = null)
 {
 extract(shortcode_atts(array(
 'id' => '',
 'align' => 'aligncenter',
 'width' => '',
 'caption' => '',
 'class' => ''
 ) , $attr));
 if (1 > (int)$width || empty($caption)) {
 return $val;
 }
 if ($id) {
 $id = esc_attr($id);
 }
 $siteclass = trim('wp-caption ' . $align . ' ' . $class);
 return '<div id="' . esc_attr($id) . '" class="' . esc_attr($siteclass) . '"  style="max-width: ' . (0 + (int)$width) . 'px">' . do_shortcode($content) . '<p class="wp-caption-text">' . $caption . '</p></div>';
 }
 add_filter('img_caption_shortcode', 'sp5_img_caption_shortcode_filter', 10, 3);

Winamp için yaptığım ilk tasarım. Minimal ve şık bir tasarım oldu. İsminin anlamı selobant :) Albüm kapaklarının gösterildiği yerden aklıma geldi :)

Kurulum:

Sıkıştırılmış dosyanın içinden çıkan klasörü Winamp’ın yüklü olduğu yerdeki Skins klasörü içine atın.

İndirme:

DeviantArt hesabı açtım. Artık  tasarımları oraya yüklemeyi düşünüyoruım. Aşağıdaki adresten ya da sağdaki sosyal medya ikonlarından DeviantArt sayfama ulaşıp temayı indirebilirsiniz.

http://muratcesmecioglu.deviantart.com/art/Scotch-Tape-Winamp-Skin-205755259

Bir stil dosyasını incelerken bulduğum kodları paylaşmak istiyorum: Köşe Yuvarlatma.

Kodlarınızdaki bir div’in köşelerini yuvarlatmak isterseniz, o div’e bir class eklemeniz yeterli oluyor. Internet Explorer’da çalışmıyor fakat Opera, Chrome ve Firefox’ta mükemmel çalışıyor.

Hangi köşeyi yuvarlatmak isterseniz ona göre class ekleyin.

CSS:

[css wraplines=”false”]
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }[/css]

HTML:

[html]<div class=”ui-corner-top”>
Bu div’in üst köşeleri yuvarlatılmış
</div>[/html]