Bir içeri türü için farklı css
preper, Çrş, 03/03/2010 - 15:32 tarihinde.
Ben bir içerik türü için farklı bir node-içerik-tpl.php dosyası oluşturdum ancak buna özel bir de css oluşturmak istiyorum. Yazı fontları, büyüklükler, borderlerın bu içerik türü için farklı olmasını istiyorun bunu nasıl yapabiliriz?
- Yeni yorum ekle
- 206 kez okundu
php dosyandan class veya id leri css dosyana ekleyerek kullanabilirsin.
Örnek olarak resimli bir içerik css'si. Senin içeriğine göre hatalar olabilir fakat örnek almanı önerebilirim.
.content .icerik_turu {
border: solid 2px black;
background-color: #e1e1e1;
font-size: 13px;
font-family: verdana;
}
.content .icerik_turu img {
float:left;
padding:1px;
margin:2px;
border: solid 1px red;
background-color: white;
}
style.css dosyasına ekledim bu şekilde ancak olmadı. Benim içerik türü ismi 'soru' kodları da şu şekilde denedim:
.content .soru {background-color:#ff0000;}
#content .soru {background-color:#ff0000;}
şeklinde iki kodu da denedim ama değişiklik olmadı. nerede hata yapıyorum?
sayfanın kaynak kodunu buraya koyarsan daha çok yardımcı olabilirim.
kaynak kodu için sayfayı sağla tıkla >> sayfa kaynağını göster de.
gönderiyorum ama boş mesaj çıkıyor. size tam olarak hangi bilgi lazım söylerseniz ben size söyleyebilirim.
Sayfan localhost değilse adres verebilirsin veya kodların resmini koyabilirsin.
Aradığım şeyse, içeriğine tpl dosyasında eklediğin class veya id.
bu tür için özel bir css dosyası atayamazmıyım? soru.css dosyası hazırlayıp bunu node-soru.tpl.php dosyasına nasıl tanıtabilirim?
tpl dosyanda theming yaparken css yi ataman lazım. < div class="content" > tagından sonra kendi class'ını atayabilirsin. Ardından sayfana istediğin .css dosyasını koyarsın.
node-soru.tpl.php dosyasının kodu bu:
/**
* @file node.tpl.php
*
* Theme implementation to display a node.
*
* @see template_preprocess()
* @see template_preprocess_node()
*/
?>
<div id="node-<?php print $node->nid; ?>" class="node <?php print $node_classes; ?>">
<?php if (!$page): ?>
<h7><a href="<?php print $node_url; ?>" rel="bookmark"><?php print $title; ?></a></h7>
<?php endif; ?>
<?php if ($unpublished): ?>
<div class="unpublished"><?php print t('Unpublished'); ?></div>
<?php endif; ?>
<?php if ($submitted): ?>
<h3 class="meta">
<abbr title="<?php print format_date($node->created, 'custom', "l, j F , Y - H:i"); ?>">
<?php print format_date($node->created, 'custom', "j F , Y"); ?>
</abbr>
<?php print t('by'); ?> <em><?php print $name; ?></em>
<span class="time-ago"><?php print t('!date ago', array( '!date' => format_interval(time() - $node->created))); ?></span><br />
</h3>
<?php endif; ?>
<?php if ($node->type != 'poll'): ?>
<?php print $picture; ?>
<?php endif; ?>
<?php print $content; ?>
<?php if ($terms): ?>
<div class="tags"><?php print $terms; ?></div>
<?php endif; ?>
<?php if ($links): ?>
<div class="actions"><?php print $links; ?></div>
<?php endif; ?>
<?php if ($node_region && $page): ?>
<div class="node-region"><?php print $node_region; ?></div>
<?php endif; ?>
</div> <!-- /node -->
şuda sanırım id ve class:
/**
* @file node.tpl.php
*
* Theme implementation to display a node.
*
* @see template_preprocess()
* @see template_preprocess_node()
*/
?>
<div id="node-<?php print $node->nid; ?>" class="soru node <?php print $node_classes; ?>">
<?php if (!$page): ?>
<h7><a href="<?php print $node_url; ?>" rel="bookmark"><?php print $title; ?></a></h7>
<?php endif; ?>
<?php if ($unpublished): ?>
<div class="unpublished"><?php print t('Unpublished'); ?></div>
<?php endif; ?>
<?php if ($submitted): ?>
<h3 class="meta">
<abbr title="<?php print format_date($node->created, 'custom', "l, j F , Y - H:i"); ?>">
<?php print format_date($node->created, 'custom', "j F , Y"); ?>
</abbr>
<?php print t('by'); ?> <em><?php print $name; ?></em>
<span class="time-ago"><?php print t('!date ago', array( '!date' => format_interval(time() - $node->created))); ?></span><br />
</h3>
<?php endif; ?>
<?php if ($node->type != 'poll'): ?>
<?php print $picture; ?>
<?php endif; ?>
<?php print $content; ?>
<?php if ($terms): ?>
<div class="tags"><?php print $terms; ?></div>
<?php endif; ?>
<?php if ($links): ?>
<div class="actions"><?php print $links; ?></div>
<?php endif; ?>
<?php if ($node_region && $page): ?>
<div class="node-region"><?php print $node_region; ?></div>
<?php endif; ?>
</div> <!-- /node -->
sayfana soru class'ını da ekledim. bundan sonra "soru" class'ı ile düzeltebilirsin istediklerini.
.soru { background-color: e1e1e1; border: solid 2px black;}
.soru img { float:left; border:solid 1px red; padding: 1px; margin; 2px;}
<div id="node-8369" class="node node-mine node-type-soru">.node-type-soru yeterliymiş sadece bu içerik için.
çok teşekkürler. peki reset.css html.css vb. diğer dosyalarda da aynı şekilde (.soru şeklinde) kullanabilir miyim?
evet istediğin css dosyasında kullanabilirsin.
Olajawun çok teşekkürler. Yalnız şöyle bir problemim var, bu içerik türü için node title'ı ve commentleri tam olarak nasıl değiştireceğimi çözemedim. örneğin #content .title {background:#ff0000;} için .node-type-soru içerik türü için nasıl düzenlemeliyim?
#content .node-type-soru .title {background:#ff0000;} şeklinde yazıyorum olmuyor. Birde bu contentin çevresine border çekmek istiyorum ama title'ın altından başlayarak border çekiyor sadece.
Commentler ve content için birkaç örnek verebilir misiniz?
#contentdeğil.contentolması lazım.Hangi temayı kullanıyorsun, onu söylersen sana bir kaç örnek verebilirim.
newswire temasını kullanıyorum. commentler için
font: bold 1.4em Arial, Helvetica, sans-serif;
border-bottom: 1px dotted #1D4364;
}
div.comment .title a:link,
div.comment .title a:visited,
div.comment .title a:active {
text-decoration: none;
color: #222;
}
div.comment .title a:hover {
text-decoration: underline;
color: #222;
}
div.comment .meta {
font-size: 0.9em;
height: 1.25em;
line-height: 1.25;
margin: 0.8em 0 2em;
}
div.comment div.picture {
float: left;
width: 85px;
margin: 0.3em 0.5em 0.1em 0;
}
div.comment span.username {
font-weight: bold;
}
div.comment span.date {
font-style: italic;
}
div.comment span.new {
font-weight: bold;
color: #FF6600;
}
div.comment img {
margin: 0;
border: none;
}
div.comment .links {
clear: both;
}
div.comment {
padding: 0.75em 1em;
margin: 1.5em 0;
}
div.comment.odd {
}
div.comment.even {
}
div.comment.comment-mine {
}
h3#comment-number {
margin-top: 1em;
}
div.indented {
margin-left:40px;
}
div.comment-unpublished {
background-color: #FFF4F4!important;
padding: 0.2em;
}
div.comment div.unpublished {
font: bold 3em Arial, Helvetica, sans-serif;
text-align: center;
color: #FFE9E7;
padding: 0.3em;
}
şeklinde mesela css.
Halen bu soruna bir çözüm bulabilmiş değilim. bir içerik türündeki başlığı (title) diğerlerinden nasıl farklı hale getirebiliriz css ile? bir örnek verebilmeniz mümkün mü?
Örnek olarak garland node.tpl.php:
// $Id: node.tpl.php,v 1.5 2007/10/11 09:51:29 goba Exp $
?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print $submitted; ?></span>
<?php endif; ?>
<div class="content clear-block">
<?php print $content ?>
</div>
<div class="clear-block">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>
Bu şekilde siz de içerik türünüz için node-icerikturu.tpl.php dosyası oluşturur:
// $Id: node.tpl.php,v 1.5 2007/10/11 09:51:29 goba Exp $
?>
<div id="node-<?php print $node->nid; ?>" class="icerikturum node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print $submitted; ?></span>
<?php endif; ?>
<div class="content clear-block">
<?php print $content ?>
</div>
<div class="clear-block">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>
şeklinde
<div class="icerikturum">den istifade ederekstyle.css'de:...
}
kodlarınızı kendinize göre ayarlarsınız.
teşekkürler bu şekilde deniyorum ancak node'un title'ını değiştiremiyorum. Sitedeki node titlelar h1 veya h2.
div.icerikturum h2 { font-size:24px;} şeklinde style.css'e girdiğimde hiçbir değişiklik olmuyor. Ancak h2 yerine h3 yazdığımda, node title'ın altında kalan bölümlerdeki h3'lerde değişiklik oluyor. Bunu anlayamadım, acaba node title içeriğe göre düzenlenemiyor olabilir mi? Bağımsız mı?
font-family:verdana;
font-size:14px;
font-weight:bold;
color:#fd9902;
}
Bu kodu başlık için kullanabilirsin. Birazdan da müsait olursam yorumlar için örnek koyarım.
style.css dosyasında değişiklik yaptığınız zaman değişiklikleri görebilmeniz için tarayıcı önbelleğini temizlemelisiniz.
Sayfa üzerinde F5 veya Yenile, tazele... yaparsanız .css, .js dosyalar yenilenir.
CTRL + F5 yaparsanız resimler dahil her şey yenilenir.
Çok teşekkürler. olajawun senin söylediğin şekilde yapınca tam istediğim gibi oldu. Commentler için de birkaç örnek verebilirsen çok sevinirim, o konuda da biraz zorlanıyorum.
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#E1E1E1 none repeat scroll 0 0;
border:1px solid black;
float:right;
margin:2px;
}
.comment .links ul li a {
color:#000000;
text-shadow:1px 1px 2px #666666;
}
.comment .links ul li a:hover {
color:red;
text-decoration:none;
text-shadow:1px 1px 2px #000000;
}
.comment .comment-id {
display:none;
}
.comment h4.meta {
border-left:5px solid black;
display:block;
margin:3px 0 0;
padding-left:3px;
font-style:italic;
color:#666;
}
.comment h4.meta a {
color:red;
}
.comment h4.meta .time-ago {
display:none;
}
div.comment.even, .book-navigation .page-links, .poll .bar, tr.odd {
border:2px dashed #000;
background:#ECDDC3;
}
div.comment.odd {
background-color:#f2deb7;
border:2px dashed #CC0000;
}
div.comment .title {
border-bottom:1px dotted #1D4364;
font-family:verdana;
font-size:13px;
font-weight:bold;
line-height:normal;
text-shadow:2px 2px 2px #999;
text-transform:capitalize;
}
div.comment {
margin:0.5em 0;
padding:0.5em;
}
Örnek olarak bunu kullanabilirsin, pek vaktim olmadığı için fazla uğraşamadım ama umarım işini görür.