Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Корзина » Дизайн категорий


Дизайн категорий

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

1

Создам еще одну тему, ибо хоть и вопрос по тому же форуму, но совсем с другой проблемой. а в той теме мне вряд ли ответят.
Итак, есть форум http://designworld.rolka.su/
Есть фон стекла http://i014.radikal.ru/1107/d9/43a89dc09ab0.jpg
есть серый фон http://s51.radikal.ru/i131/1107/ec/731583a017b5.jpg
Хотим разделить серый фон под категории. Теперь вопрос, как это сделать?
Хотели сделать его заменив название категорий картинками http://s57.radikal.ru/i157/1107/8d/a02f5206eee2.png
и таким скриптом

Код:
<style type="text/css">
.category h2 span{
display: none;
}

#pun-category1 h2 {
height: 81px; 
background-image: url(Адрес изображения для первой категории) !important; 
background-repeat: no-repeat;  
background-position: top center;
}

#pun-category2 h2 {
height: 81px; 
background-image: url(Адрес изображения для второй категории) !important; 
background-repeat: no-repeat;  
background-position: top center;
}

#pun-category3 h2 {
height: 81px; 
background-image: url(Адрес изображения для третьей категории) !important; 
background-repeat: no-repeat;  
background-position: top center;
}

#pun-category4 h2 {
height: 81px; 
background-image: url(Адрес изображения для четвёртой категории) !important; 
background-repeat: no-repeat;  
background-position: top center;
}

#pun-category5 h2 {
height: 81px; 
background-image: url(Адрес изображения для пятой категории) !important; 
background-repeat: no-repeat;  
background-position: top center;
}

#pun-category6 h2 {
height: 81px; 
background-image: url(Адрес изображения для шестой категории) !important; 
background-repeat: no-repeat;  
background-position: top center;
}

</style>

но, фоновая картинка стекла неоднородная, и наши картинки категорий ее перекрывают, получается не очень красиво.
Тогда возник вопрос, как сделать прозрачность под категориями, чтобы был виден фон стекла? Например можем вставить http://i047.radikal.ru/1107/b2/7f640cd99047.png вот такие закругленные рамочки с прозрачностью посередине НО тогда у нас в прозрачности будет виден серый фон - а НУЖЕН фон стекла.
Как так сделать, подскажите???
Думаем уже весь день над этим.. перебрали множество форумов с примерами.. было бы проще если бы у нас фон вместо стекла был простой однотонной картинкой и тогда бы не заморачивались над прозрачностью, а наклепали бы картинки категорий такого же цвета как фон, но хочется именно наш стеклянный фон.
Помогите, пожалуйста осуществить прозрачноть, чтобы "стеклышко" было видать!

Отредактировано Somik in Wonderland (Пт, 15 Июл 2011 22:02:14)

0

2

Somik in Wonderland :glasses:
В HTML низ

Код:
<!--  Рамки Под Категории -->
<style>
#pun {
 background:none transparent!important;
}
.punbb table.frameCategor{
width:100%;
 background:url(http://savepic.org/1978519.png) repeat top center;
margin-top:20px!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><!-- Конец//Рамки Под Категории -->

Отредактировано Deff (Сб, 16 Июл 2011 01:10:55)

+1

3

Deff
Премного благодарна! Это то, что нужно! Да и на главной странице все встало так, как нужно, даже пользовательские ссылки вылезли за фон, как мы хотели. Вы экстрасенс?
http://designworld.rolka.su/viewtopic.php?id=3#p13 вот только где фон в темах? ничегошеньки ведь не видно.. верните, пжлста!

0

4

Somik in Wonderland написал(а):

вот только где фон в темах

Поменяйте скрипт

Код:
<!--  Рамки Под Категории -->
<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%;
 background:url(http://i071.radikal.ru/1107/7e/6dec02ba1184.png) repeat top center;
margin-top:20px!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://s014.radikal.ru/i329/1107/75/84c30d5c5616.png) repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
 background:url(http://s014.radikal.ru/i329/1107/75/84c30d5c5616.png) repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
 background:url(http://s014.radikal.ru/i329/1107/75/84c30d5c5616.png) repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */   
 background:url(http://s014.radikal.ru/i329/1107/75/84c30d5c5616.png) 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><!-- Конец//Рамки Под Категории -->

Отредактировано Deff (Вс, 17 Июл 2011 00:09:04)

0

5

Deff
поменяла.. фон появился, прозрачность между категориями снова пропала...(
вот все с нашими картинками

Код:
<!--  Рамки Под Категории -->
<style id=Somik>#pun{background:none transparent!important;}</style>
<script>if($(".punbb").attr("")!="pun-index")$("style.#Somik").replaceWith("");</script>
<style>
.punbb table.frameCategor{
width:100%;
 background:url(http://i51.tinypic.com/2yv8kzo.png) repeat top center;
margin-top:20px!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://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */   
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) 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><!-- Конец//Рамки Под Категории -->

0

6

Somik in Wonderland Поправил

Код:
<!--  Рамки Под Категории -->
<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%;
 background:url(http://i51.tinypic.com/2yv8kzo.png) repeat top center;
margin-top:20px!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://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */   
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) 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><!-- Конец//Рамки Под Категории -->

(И предыдущий тоже

Отредактировано Deff (Вс, 17 Июл 2011 00:09:56)

0

7

Deff
теперь все ок! Спасибо за труд!   http://mybb.ru/f/collection/0211.gif  http://mybb.ru/f/collection/0230.gif  http://mybb.ru/f/collection/0211.gif  http://mybb.ru/f/collection/0230.gif

0

8

Deff
можно еще небольшой вопросик?
сейчас рамочка выглядит вот так http://s013.radikal.ru/i322/1107/3b/08b0872718e7.png
а можно сделать так? http://s55.radikal.ru/i149/1107/4a/8d7e8b31c158.png
Чтобы обрамление рамкой проходило под названием категории?
И заодно не подскажете, появилась какая то пустота в первом форуме "Для гостей" (красным обвела) это что вдруг и как убрать?

0

9

Somik in Wonderland написал(а):

И заодно не подскажете, появилась какая то пустота в первом форуме "Для гостей" (красным обвела) это что вдруг и как убрать?

:glasses: Понятия не имею - эт в стиле чот напудренно - вспоминайте чо ставили последнее -

Могу сказать, что в данном коде есть pun-category1 и что он в одном из окон стиля

(Может - что с планками под категории намудрили ...

Отредактировано Deff (Вт, 19 Июл 2011 18:39:48)

0

10

Somik in Wonderland написал(а):

а можно сделать так? http://s55.radikal.ru/i149/1107/4a/8d7e8b31c158.png

Не наю - вот несколько иначе

Код:
<!--  Рамки Под Категории -->
<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:20px!important; /* Расстояние между соседними рамками по вертикали */
}
.punbb table.frameCategor .container{
 background:url(http://i51.tinypic.com/2yv8kzo.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: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://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-x top center;
}
table.frameCategor td.W2 {/* Cтавим Рамку Слева */
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-y left center;
}
table.frameCategor td.W3 {/* Cтавим Рамку Справо */
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) repeat-y right center;
}
table.frameCategor tr.z3 {/* Cтавим Рамку Снизу */   
 background:url(http://s41.radikal.ru/i092/1107/5a/d22837c806ff.png) 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><!-- Конец//Рамки Под Категории -->

0

11

Deff
кажется не в планках.. до установления обрамления категорий вроде бы уже была это пустота, хотя могу ошибаться...
Поставила, теперь на этом месте фон видать..

-1


Вы здесь » Единый форум поддержки » Корзина » Дизайн категорий