Ответить
Конечно делай.
Скролл для вебкитовского движка браузеров а есть ли общее решение какое нибудь?
Пару дней назад искал но так и ни чего толкового не нашел.
Есть примеры?Так как я ни чего не нашел толкового.
где то видел, но когда искал не смог найти, решил сделать как вот сейчас...
1 2
Светлый вид материалов для мини чата
Отправлено: 6 Янв 2013#1
Т.к. на сайте я еще не видел каких либо изменений внешнего вида для чатов решил сделать 
Если нужно, что-то подобное буду делать, если нет... Сами делайте
Вообщем то вид простейший, но имеет красивый скролл Так же в отличае от стандартного тут нету "бага" когда кидаешь длинную ссылку или набор букв без пробелов Сделан под версию Fapos 2.1
Скрин
Установка:
1. Заходим в Админку
2. Дизайн > общий дизайн и css
3. Чат > Список материалов / превью
4. Туда вставляем код:
Так же можете установить его скачав прикрепленный архив
1. Скачать архив.
2. Файл лежащий в архиве (list.htm) копировать в директорию сайта: сайт/template/ваш шаблон/html/chat/
Если нужно, что-то подобное буду делать, если нет... Сами делайте
Вообщем то вид простейший, но имеет красивый скролл
Так же в отличае от стандартного тут нету "бага" когда кидаешь длинную ссылку или набор букв без пробелов Сделан под версию Fapos 2.1Скрин
Установка:
1. Заходим в Админку
2. Дизайн > общий дизайн и css
3. Чат > Список материалов / превью
4. Туда вставляем код:
Code:
<style>
a.ipbavatar {
width: 40px;
height: 40px;
}a.ipbavatar {
display: block;
float: left;
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.linnov {
overflow: hidden;
border-bottom: 1px dotted #D7D9DB;
}
a.ipbavatar img {
width: 40px;
height: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;float: left;
width: 40px;
height: 40px;
}
#body{}
::-webkit-scrollbar
{
width: 5px;
height: 9px;
}
::-webkit-scrollbar-track-piece
{
background-color: #ffffff;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 9px;
background-color: #666;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #666;
-webkit-border-radius: 5px;
}
</style>
{% if messages %}
{% for message in messages %}
<div id="iChat-messages" align="left" style="padding-top:2px;">
<div style="word-wrap:break-word;">
<div style="background:#ffffff;padding:1px;border:1px solid #cfcece;border-radius:2px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:10pt; color:#666; padding-left:4px;">
<b>
<span style="color:#808080">{{ message.name }}</span></b>
<span style="font-size:7pt">{{ message.date }}</span>
<br>
</td>
</tr>
</tbody>
</table>
<div style="padding:3px; text-align:left;">
{{ message.message }}
</div>
</div></div>
</div>
{% endfor %}
{% endif %}
a.ipbavatar {
width: 40px;
height: 40px;
}a.ipbavatar {
display: block;
float: left;
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.linnov {
overflow: hidden;
border-bottom: 1px dotted #D7D9DB;
}
a.ipbavatar img {
width: 40px;
height: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;float: left;
width: 40px;
height: 40px;
}
#body{}
::-webkit-scrollbar
{
width: 5px;
height: 9px;
}
::-webkit-scrollbar-track-piece
{
background-color: #ffffff;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 9px;
background-color: #666;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #666;
-webkit-border-radius: 5px;
}
</style>
{% if messages %}
{% for message in messages %}
<div id="iChat-messages" align="left" style="padding-top:2px;">
<div style="word-wrap:break-word;">
<div style="background:#ffffff;padding:1px;border:1px solid #cfcece;border-radius:2px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:10pt; color:#666; padding-left:4px;">
<b>
<span style="color:#808080">{{ message.name }}</span></b>
<span style="font-size:7pt">{{ message.date }}</span>
<br>
</td>
</tr>
</tbody>
</table>
<div style="padding:3px; text-align:left;">
{{ message.message }}
</div>
</div></div>
</div>
{% endfor %}
{% endif %}
Так же можете установить его скачав прикрепленный архив
1. Скачать архив.
2. Файл лежащий в архиве (list.htm) копировать в директорию сайта: сайт/template/ваш шаблон/html/chat/
Отредактировано автором 6 Янв 2013
4esTer.Ru :)
Отправлено: 6 Янв 2013#2
Иль_я пишет:
Если нужно, что-то подобное буду делать, если нет...
Иль_я пишет:
красивый скролл
Пару дней назад искал но так и ни чего толкового не нашел.
Отправлено: 6 Янв 2013#3
1. Ты пишешь сначала безпрефиксное свойство, затем с префиксами. Так делать нельзя. Пиши так:
2. Новый скроллбар только в вебките, а значит твой код не кроссбраузерный. Вебкит не пуп земли.
Используй js плагины для кроссплатформенного изменения скроллбара
3. Зачем
почему нельзя обойтись одним дивом? И зачем вообще сюда пихать свойства элемента, задавай их в css который выше
4. О ужас, табличная вёрстка!
Code:
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
2. Новый скроллбар только в вебките, а значит твой код не кроссбраузерный. Вебкит не пуп земли.
Используй js плагины для кроссплатформенного изменения скроллбара
3. Зачем
Code:
<div id="iChat-messages" align="left" style="padding-top:2px;">
<div style="word-wrap:break-word;">
<div style="background:#ffffff;padding:1px;border:1px solid #cfcece;border-radius:2px;">
<div style="word-wrap:break-word;">
<div style="background:#ffffff;padding:1px;border:1px solid #cfcece;border-radius:2px;">
почему нельзя обойтись одним дивом? И зачем вообще сюда пихать свойства элемента, задавай их в css который выше
4. О ужас, табличная вёрстка!
Отправлено: 6 Янв 2013#5
Сашка_из_Шебекино пишет:
Используй js плагины для кроссплатформенного изменения скроллбара
Отправлено: 6 Янв 2013#6
vladevakz пишет:
Есть примеры?
4esTer.Ru :)
Отправлено: 6 Янв 2013#9
ВОТ ОН scroller js
шаблоны потихоньку адаптирую
хостинг для сайта идеальный вариант за бесплатно http://api.3owl.com/redir/3710254/
хостинг для сайта идеальный вариант за бесплатно http://api.3owl.com/redir/3710254/
Отправлено: 6 Янв 2013#10
Короче отказался я от этой идеи вес страницы увеличился в 2.5 раза
Насчет скроллов nano как то пробовал что то не встал он у меня,первый вариант Сашка_из_Шебекино, даже и не пробовал слишком большой,второй вариант встал нормально.
Жду html 6 может там придумают кроссбраузерное решение.
Насчет скроллов nano как то пробовал что то не встал он у меня,первый вариант Сашка_из_Шебекино, даже и не пробовал слишком большой,второй вариант встал нормально.
Жду html 6 может там придумают кроссбраузерное решение.
1 2
Зарегистрируйтесь или авторизуйтесь что бы писать
Сейчас online: 160. Зарегистрированных: 0. Гостей: 160.