Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Корзина » Оформление постов на новый лад
Возможно ли сделать посты "пузырями"? Чтобы обрамлялось только сообщение, а остальное было прозрачным. Нужно придать бэкгаунд тексту? как это сделать грамотно?
Вот примерно так чтобы выглядело
Картинку не предлагать. Посты должны быть разными по длине и форме, в зависимости от количества слов, высоты и ширины сообщения.
Отредактировано Finka (Пн, 25 Июн 2012 12:09:15)
В HTML верх
<style type="text/css">
.punbb .post-content p,.punbb .fs-box .post-box p {
width:80%;
display:block;
margin:20px;
background-clip:padding-box;
border-width:15px 15px 15px 19px;
-moz-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Firefox 4 */
-webkit-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Safari 5 и Chrome */
-o-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Opera 10.5 */
}
.punbb .post-content .post-sig p{
border-width:0;
-moz-border-image: none; /* Firefox 4 */
-webkit-border-image: none; /* Safari 5 и Chrome */
-o-border-image: none; /* Opera 10.5 */
}/* конец Обрамления */
</style>Отредактировано Deff (Пн, 25 Июн 2012 14:48:38)
Deff
Спасибо!
А можно изменить ширину, чтобы она не была фиксированной, а пузырь обрамлял именно ширину текста, как длинного, так и короткого?
Finka
бу не симпатично - поскольку отступы от <p> сверху и снизу не регулируюцо, коротки и толстые будут
проще тогда уж на span ставить (выбрать тег с малоиспользуемым цветом и под него забодать
[color=#0000001]Тут обрамление(если это желают обрамлять)[/color]
Отредактировано Deff (Вт, 26 Июн 2012 02:26:33)
Напоминает модераторские теги от rps http://forum.mybb.ru/viewtopic.php?id=27275 , если делать не картинкой, а css.
Меня смущает, что при разрыве строк, каждая строка обрамляется в отдельный пузырь. Можно пофиксить, чтобы раздельные строки находились в одном пузыре?
И сразу вопрос вдогонку: можно чётным и нечётным постам придать разные цвета, в данном случае пузыри?
И третий вопрос: существуют два вида отображения профиля, слева и справа. Можно чётным и нечётным постам придать разное расположение?
И перламутровые пуговицы, да, я знаю! 
Отредактировано Finka (Вт, 26 Июн 2012 09:05:21)
И сразу вопрос вдогонку: можно чётным и нечётным постам придать разные цвета, в данном случае пузыри?
И третий вопрос: существуют два вида отображения профиля, слева и справа. Можно чётным и нечётным постам придать разное расположение?
<style type="text/css">
.punbb .post-content p:not(.NoObram),.punbb .fs-box .post-box p:not(.NoObram) {
width:87%;
display:block;
margin:20px auto 20px 0;
background-clip:padding-box;
border-width:15px 15px 15px 19px;
-moz-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Firefox 4 */
-webkit-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Safari 5 и Chrome */
-o-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Opera 10.5 */
}
.punbb .post.altstyle .post-content p:not(.NoObram),.punbb .fs-box .post-box p:not(.NoObram) {
width:80%;
display:block;
margin:20px 0 20px auto;
background-clip:padding-box;
border-width:15px 15px 15px 19px;
-moz-border-image: url(http://s1.uploads.ru/i/1/m/I/1mIjT.png)15 15 15 19 repeat; /* Firefox 4 */
-webkit-border-image: url(http://s1.uploads.ru/i/1/m/I/1mIjT.png)15 15 15 19 repeat; /* Safari 5 и Chrome */
-o-border-image: url(http://s1.uploads.ru/i/1/m/I/1mIjT.png)15 15 15 19 repeat; /* Opera 10.5 */
}
width:80%;
display:block;
margin:20px;
background-clip:padding-box;
border-width:15px 15px 15px 19px;
-moz-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Firefox 4 */
-webkit-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Safari 5 и Chrome */
-o-border-image: url(http://s1.uploads.ru/i/F/G/K/FGKYJ.png)15 15 15 19 repeat; /* Opera 10.5 */
}
.punbb .post-content .post-sig p{
border-width:0;
-moz-border-image: none; /* Firefox 4 */
-webkit-border-image: none; /* Safari 5 и Chrome */
-o-border-image: none; /* Opera 10.5 */
}/* конец Обрамления */
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.post .post-content p strong img.postimg').each (function() {
$(this).parents('p').addClass("NoObram")
});});
</script>Плюс выключение картинок, если они одеты в теги Жирности
==============================================================
Меня смущает, что при разрыве строк, каждая строка обрамляется в отдельный пузырь. Можно пофиксить, чтобы раздельные строки находились в одном пузыре?
Лень всё переделывать - и не симпатично, поскольку один толстый пузырь на сообщение, проще тады ставить на .post-box - будет ровно тот жа эффект (и картинки не выключишь
Отредактировано Deff (Вт, 26 Июн 2012 10:04:32)
Плюс выключение картинок, если они одеты в теги Жирности
а видео?
Отредактировано Finka (Вт, 26 Июн 2012 11:52:25)
Лень всё переделывать - и не симпатично, поскольку один толстый пузырь на сообщение
Это для кого как. По мне, так несколько пузырей в одном посте выглядит некрасиво. А сделаешь, когда будет не лень?
А чередование постов с профилями справа-слева это тяжело сделать или теоретически возможно?
Или так: все посты зелёного цвета, а только свои - серого, чтобы отличались. И если к тебе отбращаются по имени, то этот пузырь тоже другого цвета, допустим, оранжевого. Сразу видно, что обратились к тебе. Видела такое на юкозе.
Отредактировано Finka (Вт, 26 Июн 2012 16:05:28)
Вы здесь » Единый форум поддержки » Корзина » Оформление постов на новый лад