Форум поддержки пользователей ZeroParking

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки пользователей ZeroParking » Заказ скриптов » Ставим Рамку Под Категории, Статистику, Объявление


Ставим Рамку Под Категории, Статистику, Объявление

Сообщений 1 страница 10 из 10

1

Ставим Рамку Под Категории
  и Статистику
И объявление

В 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. Мон взять картинку рамки по-более:  рамка будет четче(Оптимально брать картинку с рамкой шириной - по ширине категории и высотой: существенно-важного и повторяющегося фрагмента (*либо высотой заведомо больше любой самой высокой категории
При последнем варианте плюс тот, что в этом случае можно экспериментировать с угловыми арнаментами рамки: Они не будут повторяться в обрамлении по боковым  подрамникам и будут стоять точно как у исходника в углах обрамления - карочь экспериментируем сами)
http://savepic.org/2006335.gif
Остальные пояснения(*если нужны)  есть внутри скрипта


Зы: Если не нужно включать объявление  в обрамление рамкой:
Эту часть скрипта - выкидываем:

$("#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>



http://savepic.org/2017627.png

Cовет: - не спешите сразу всё править - Поставьте скрипт как есть -убедитесь в работоспособности, и только потом меняете значения на свои(начните с картинки

Теги: Новые Скрипты

Отредактировано Deff (2011-07-16 13:09:24)

+1

2

Найс, интересная вещица

0

3

Спасибо очень пригодилось

0

4

Здравствуйте, поставили такую рамку, только немного изменили код:

Код:
<!--  Рамки Под Категории -->
<style id=Somik>#pun{background:none transparent!important;}</style>
<script>if($(".punbb").attr("id")!="pun-index")$("style.#Somik").replaceWith("");</script>
<style>
.punbb table.frameCategor{
width:100%;
margin-top: 0px!important; /* Расстояние между соседними рамками по вертикали */
}
.punbb table.frameCategor .container{
 background:url(http://i41.tinypic.com/k04os5.png) repeat top center;
}
.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:0px!important;/*Ширина Подрамника cлево-справо*/
}
table.frameCategor tr.z1,
table.frameCategor tr.z3 {   
 height:0px!important;/*Высота Подрамника cнизу-сверху*/
}
table.frameCategor td.AvrImd {
 padding:0!important;
 margin:0!important;
 width:auto;	/*Ширина таблички*/
}
table.frameCategor tr.z1 {/* Cтавим верхнюю часть Рамки */
 background:url() repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
 background:url() repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
 background:url() repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */   
 background:url() 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><!-- Конец//Рамки Под Категории -->

в итоге вышла вот такая вот проблемка:
http://uploads.ru/?v=XH6P5.jpg

Кто-нибудь может подсказать, как исправить? (((

0

5

Лори написал(а):

Кто-нибудь может подсказать, как исправить? (((

Лори Nfv

Deff написал(а):

Зы: Если не нужно включать объявление  в обрамление рамкой:

Не включайте Объявление в рамку, поставьте бекграунд к #pun

#pun {
  background:url() no-repeat 0 700px;
}

так чтобы он был схож с категориями и накрывал эти ненакрытые секции вместе с объявлением

красным отступ начала бекграунда от верха экрана

0

6

Изменили вот так:

Код:
<!--  Рамки Под Категории -->
<style id=Somik>#pun{background:none transparent!important;}
<script>if($(".punbb").attr("id")!="pun-index")$("style.#Somik").replaceWith("");</script>
<style>
.punbb table.frameCategor{
width:100%;
margin-top: 0px!important; /* Расстояние между соседними рамками по вертикали */
}
.punbb table.frameCategor .container{
 background:url(http://i41.tinypic.com/k04os5.png) repeat top center;
}
.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:0px!important;/*Ширина Подрамника cлево-справо*/
}
table.frameCategor tr.z1,
table.frameCategor tr.z3 {   
 height:0px!important;/*Высота Подрамника cнизу-сверху*/
}
table.frameCategor td.AvrImd {
 padding:0!important;
 margin:0!important;
 width:auto;	/*Ширина таблички*/
}
table.frameCategor tr.z1 {/* Cтавим верхнюю часть Рамки */
 background:url() repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
 background:url() repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
 background:url() repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */   
 background:url() 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>'


  
    $(".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><!-- Конец//Рамки Под Категории -->

попробовали так....

Код:
<!--  Рамки Под Категории -->
<style id=Somik>#pun {
  background:url(http://i41.tinypic.com/k04os5.png) no-repeat 0 590px;
}

но тогда рамки  получаются такими http://s017.radikal.ru/i417/1111/94/88be0f5563b7.png а фон форумов таким http://s017.radikal.ru/i424/1111/2f/2ad568d309ec.png, получается что размер фона полностью завист от залитого изображения...а это ужасно неудобно и совместить размер форумов и объявлений в одном исходники не имеем понятия.

0

7

Лори
1. Вы можете не меняя графики выложенной в коде в сообщении 4  - исключить  из скрипта обрамление Объявления ?[1]

2. Снять Скриншот верней части форума и создать в ФШ фон для необрамленного куска

3. Выложить созданную фоновую картинку сюда и ссылку на форум с установленным кодом из пункта [1]

Отредактировано Deff (2011-11-05 10:54:59)

0

8

1. Убрали.

2. Скрин (http://s016.radikal.ru/i336/1111/91/3c97c6edff89.png), фон (http://i41.tinypic.com/k04os5.png).

3. Ссылка на форум http://tukstuks.rolka.su.

0

9

Лори
Пробуйте в HTML верх поставить такой код

<style>
#pun_wrap {
width:100%;
  background:url(http://savepic.su/628484.jpg) no-repeat 349px 700px!important;
}
</style>

0

10

Лори Совет - не делайте фоновые изображения в png - если можно сделать в jpg, поскольку они весьма громоздки по объёму и долго грузятся!

0


Вы здесь » Форум поддержки пользователей ZeroParking » Заказ скриптов » Ставим Рамку Под Категории, Статистику, Объявление


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC