Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1 2

Светлый вид материалов для мини чата

Иль_я

  • Свой человек
  • Юзер
  • 128
  • Репутация:5 
  • Предупреждения: 0 
  • Регистрация:
    5 Июн 2011
#1
Т.к. на сайте я еще не видел каких либо изменений внешнего вида для чатов решил сделать :)
Если нужно, что-то подобное буду делать, если нет... Сами делайте gg)
Вообщем то вид простейший, но имеет красивый скролл :) Так же в отличае от стандартного тут нету "бага" когда кидаешь длинную ссылку или набор букв без пробелов:) Сделан под версию 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 %}

Так же можете установить его скачав прикрепленный архив :)
1. Скачать архив.
2. Файл лежащий в архиве (list.htm) копировать в директорию сайта: сайт/template/ваш шаблон/html/chat/
Прикрепленные файлы:
Прикрепление2: Открыть файл 0.716 Kb
Отредактировано автором 6 Янв 2013
4esTer.Ru :)

vladevakz

  • Атомовед
  • Юзер
  • 179
  • Репутация:2 
  • Предупреждения: 0 
  • Регистрация:
    6 Фев 2012
#2
Иль_я пишет:
Если нужно, что-то подобное буду делать, если нет...
Конечно делай.
Иль_я пишет:
красивый скролл
Скролл для вебкитовского движка браузеров а есть ли общее решение какое нибудь?
Пару дней назад искал но так и ни чего толкового не нашел.

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#3
1. Ты пишешь сначала безпрефиксное свойство, затем с префиксами. Так делать нельзя. Пиши так:
Code:
-moz-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;">

почему нельзя обойтись одним дивом? И зачем вообще сюда пихать свойства элемента, задавай их в css который выше

4. О ужас, табличная вёрстка!

Иль_я

  • Свой человек
  • Юзер
  • 128
  • Репутация:5 
  • Предупреждения: 0 
  • Регистрация:
    5 Июн 2011
#4
Всё збс, не плачь :)

4esTer.Ru :)

vladevakz

  • Атомовед
  • Юзер
  • 179
  • Репутация:2 
  • Предупреждения: 0 
  • Регистрация:
    6 Фев 2012
#5
Сашка_из_Шебекино пишет:
Используй js плагины для кроссплатформенного изменения скроллбара
Есть примеры?Так как я ни чего не нашел толкового.

Иль_я

  • Свой человек
  • Юзер
  • 128
  • Репутация:5 
  • Предупреждения: 0 
  • Регистрация:
    5 Июн 2011
#6
vladevakz пишет:
Есть примеры?
где то видел, но когда искал не смог найти, решил сделать как вот сейчас...

4esTer.Ru :)

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#7
vladevakz, раз два

Иль_я пишет:
Всё збс, не плачь [smile]
вот это и пугает

Иль_я

  • Свой человек
  • Юзер
  • 128
  • Репутация:5 
  • Предупреждения: 0 
  • Регистрация:
    5 Июн 2011
#8
Сашка_из_Шебекино пишет:
вот это и пугает
главное работает! :0

4esTer.Ru :)

jevgenj

  • Истенный Атомовод
  • Пользователь
  • 344
  • Репутация:24 
  • Предупреждения: 0 
  • Регистрация:
    4 Фев 2012
#9
ВОТ ОН http://jamesflorentino.github.com/nanoScrollerJS/ scroller js

шаблоны потихоньку адаптирую
хостинг для сайта идеальный вариант за бесплатно http://api.3owl.com/redir/3710254/

vladevakz

  • Атомовед
  • Юзер
  • 179
  • Репутация:2 
  • Предупреждения: 0 
  • Регистрация:
    6 Фев 2012
#10
Короче отказался я от этой идеи вес страницы увеличился в 2.5 раза
Насчет скроллов nano как то пробовал что то не встал он у меня,первый вариант Сашка_из_Шебекино, даже и не пробовал слишком большой,второй вариант встал нормально.
Жду html 6 может там придумают кроссбраузерное решение.

1 2
Сейчас online: 34. Зарегистрированных: 1. Гостей: 33.