Ставим Рамку Под Категории
и Статистику
И объявление
В HTML низ
<!-- Рамки Под Категории -->
<style>
.punbb table.frameCategor{
width:100%;
margin-top:10px!important; /* Расстояние между соседними рамками по вертикали */
}
.punbb .frameCategor h2,
.punbb .frameCategor .category,
.punbb .frameCategor #pun-stats {
margin:0!important;
}
.announcement #pun-announcement,
.announcement #pun-crumbs1,
.announcement #pun-break2,
table.frameCategor,
table.frameCategor tr,
table.frameCategor td {
table-layout: auto!important;
padding:0!important;
margin:0!important;
border-collapse:collapse!important;
border:none 0 transparent!important;
}
table.frameCategor td.AvrImd img {
display:block;
padding:0!important;
margin:0!important;
border:none 0 transparent!important;
}
table.frameCategor td.W2,
table.frameCategor td.W3 {
width:10px!important;/*Ширина Подрамника cлево-справо*/
}
table.frameCategor tr.z1,
table.frameCategor tr.z3 {
height:10px!important;/*Высота Подрамника cнизу-сверху*/
}
table.frameCategor td.AvrImd {
padding:0!important;
margin:0!important;
width:auto; /*Ширина таблички*/
}
table.frameCategor tr.z1 {/* Cтавим верхнюю часть Рамки */
background:url(http://savepic.org/1993003.gif) repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
background:url(http://savepic.org/1993003.gif) repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
background:url(http://savepic.org/1993003.gif) repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */
background:url(http://savepic.org/1993003.gif) repeat-x bottom center;
}
</style>
<script><!-- Рамки Под Категории -->
if($(".punbb").attr("id")=="pun-index"){
var z1='<tr class="z1"><td class="W1" colspan="3"></td></tr>'
var z3='<tr class="z3"><td class="W4" colspan="3"></td></tr>'
$("#pun-status").wrap('<div class=announcement></div>') // часть скрипта для рамки под Объяву
$("#pun-break1").appendTo(".announcement");
$("#pun-crumbs1").appendTo(".announcement");
$("#pun-break2").appendTo(".announcement");
$("#pun-announcement").wrap('<div class=announcement></div>');//End// Части скрипта для рамки под Объяву
$(".announcement,div.category,#pun-stats").each(function () {
$(this).wrap('<table class="frameCategor" cols="3" rows="3" valign="top" cellspacing="0" cellpadding="0" class="frameCategor"><tr class="z2"><td class="AvrImd"></td></tr></table>')
});
$(".frameCategor ").each(function () {
$(this).find(".z2").prepend('<td class="W2"></td>')
$(this).find(".z2").append('<td class="W3"></td>')
$(this).prepend(z1)
$(this).append(z3);
});
}
</script><!-- Конец//Рамки Под Категории -->1.*Сейчас рамка под категории строится из отрезов полосок(шириной по 10 пиксел) по краям всех четырёх сторон данной картинки,
2. размножение картинки - от центральной части сторон
(*Если картинка по ширине равна категории - полоска вставляецо без размножения
3. Расстояние между рамками тож 10
НЕКИЕ ПОЯСНЕНИЯ:
1. - Картинку с рамками делаем полностью прозрачной внутри > http://savepic.org/1993003.gif (всё кроме рамок)
2. Картинка на все рамки одна;(Ссылок в скрипте на одну и ту же картинку - четыре)
3. Мон взять картинку рамки по-более: рамка будет четче(Оптимально брать картинку с рамкой шириной - по ширине категории и высотой: существенно-важного и повторяющегося фрагмента (*либо высотой заведомо больше любой самой высокой категории
При последнем варианте плюс тот, что в этом случае можно экспериментировать с угловыми арнаментами рамки: Они не будут повторяться в обрамлении по боковым подрамникам и будут стоять точно как у исходника в углах обрамления - карочь экспериментируем сами)
Остальные пояснения(*если нужны) есть внутри скрипта
Зы: Если не нужно включать объявление в обрамление рамкой:
Эту часть скрипта - выкидываем:
$("#pun-status").wrap('<div class=announcement></div>') // часть скрипта для рамки под Объяву
$("#pun-break1").appendTo(".announcement");
$("#pun-crumbs1").appendTo(".announcement");
$("#pun-break2").appendTo(".announcement");
$("#pun-announcement").wrap('<div class=announcement></div>');//End// Части скрипта для рамки под Объяву
Что бы не обрамлять статистику - удаляем из скрипта подстроку красным
$(".announcement,div.category,#pun-stats").each(function () {
Подвижку иконок(если они с левого края) вправо от границ рамки можно попробовать таким кодом
<style type="text/css">
#pun-index .tcl .intd {
margin-left:30px;
}
</style>
Cовет: - не спешите сразу всё править - Поставьте скрипт как есть -убедитесь в работоспособности, и только потом меняете значения на свои(начните с картинки
Теги: Новые Скрипты
Отредактировано Deff (2011-07-16 13:09:24)
