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

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

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



CSS трюки

Сообщений 21 страница 40 из 108

1

Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов


Дополнения к текущей темеИнтересные решения для форумов

+2

21

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

то изображение ближе к тексту

В ИЕ оно всё равно далеко...

0

22

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

В ИЕ оно всё равно далеко...

Да у меня тож подальше и в Ие6 и в Ие7

0

23

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

Да у меня тож подальше и в Ие6 и в Ие7

Всё-таки способ Ромыча оказался лучше, признаю.

0

24

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

Всё-таки способ Ромыча оказался лучше, признаю.

да ладно вам парни, 2 способа это лучше чем один,
тем более оба на css ;)

0

25

Romych
Но мой-то всё равно применить нельзя.

0

26

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

единственный минус у такого метода, это что не удалось пока осуществить отступ между изображением и названием категории

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

Ну для рисунков просто уши побольше оставлять, в счёт отступа

тут обнаружил немного извращенский способ, свойство content позволяет в ставить в одно и то же место и 2-3 изображения подряд или слово, символ после изображения,
так что если лень ковыряться с иконкой и оставлять прозрачный хвост справа, то можно вставить и пустую прозрачную картинку 3х3 px. например,
тогда получится требуемый отступ
на примере иконки icq в профиле под аватаром http://testing.1bb.ru/uploads/000b/89/6b/242-1.png

Код:
<style>
li.pa-icq:before{content:url(http://testing.1bb.ru/uploads/000b/89/6b/242-1.png)url(http://s59.radikal.ru/i164/1101/b4/c45d9da5ce49.gif);}
</style>

0

27

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

свойство content позволяет в ставить в одно и то же место и 2-3 изображения подряд или слово, символ после изображения

А оно КСС 2.1 или КСС 3.0? Если первое, то должно поддерживаться старыми браузерами и, значит, можно попробовать решить проблему наложения нескольких изображений на один элемент...

0

28

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

Пример как на этом форуме  http://i045.radikal.ru/1103/1d/b9f9335b3fb3t.jpg

0

29

Ну помогите плиз очень надо.
Что я только не делаю,у меня меняются кнопки (нов.собщ и тд),а мне нужно что бы кроме этих кнопок были ещё и иконочки.Как на  скрине выше.

0

30

Мафика
Здравствуйте.

Мафика написал(а):

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

Если я правильно понял то, что Вы хотите - Администрирование---Форумы---Редактировать---В поле "Описание" вставите код:

Код:
<img src="Адрес изображения" alt="Описание" />

Или, если речь всё-таки про иконки форумов - то таким кодом в ХТМЛ-верх:

Код:
<style type="text/css">
.punbb div.icon {
float: left; 
display: block; 
border-style: none none none none; 
position: relative !important;
height: 50px; 
width: 50px;
}
.punbb td div.tclcon {
margin-left: 50px;
}

Div.icon {
background-image : url(адрес иконки темы без новых сообщений);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(адрес иконки темы с новыми сообщениями);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(адрес иконки выделенной темы);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(адрес иконки закрытой темы);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(адрес иконки переадресации с форума);
background-repeat: no-repeat;
}
</style>

0

31

Замена плюса и минуса в Уважении
http://s2.uploads.ru/1UqJY.png
В HTML верх

Код:
<style type="text/css">
.pa-respect a[href*="&v=0&cod"],
.pa-respect a[href*="&v=1&cod"]{
   display:inline-block;
   margin-top:-7px;
}
.pa-respect a[href*="&v=1&cod"] img,
.pa-respect a[href*="&v=0&cod"] img {
  visibility:hidden;
  /*размеры для картинок  +/- */
  height:34px;
  width:34px;
}
.pa-respect a[href*="&v=1&cod"]{
   background:url(http://s3.uploads.ru/cyQa5.png) center 100% no-repeat; /*картинка для +*/
}
.pa-respect a[href*="&v=0&cod"] {
   background:url(http://s2.uploads.ru/ijAu3.png) center  100% no-repeat; /*картинка для  - */
}
</style>

+2

32

Иконки в списке видеохостингов

есть идея сделать список доступных видеохостингов в форме ответа визуально более привлекательными
чтоб вместо старого вида:
http://s2.uploads.ru/t/pOKJL.png
получился такой
http://s2.uploads.ru/t/rVSef.png

делаю спрайт с иконками (фавиконами) характерными для видеохостингов (знак вопроса для тех, которые не имеют своего лейбла)
http://forumfiles.ru/files/0012/b1/41/42036.png

далее расписываем каждой иконке своё место вот таким кодом:

Код:
<style type="text/css">
.tipsy-inner {font-size:14px!important;}
#video-host-list a.turn_link {
color: transparent !important;
font-size: 6px;
letter-spacing: -2.5px;
margin-left: 5px;
padding: 9px;
}
a.turn_link[href$="#youtube.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll 5px 3px transparent;}  
a.turn_link[href$="#video.yandex.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -16px 3px transparent;}  
a.turn_link[href$="#video.mail.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -37px 3px transparent;}  
a.turn_link[href$="#rutube.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -58px 3px transparent;}  
a.turn_link[href$="#vkontakte.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -76px 3px transparent;}  
a.turn_link[href$="#smotri.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -96px 3px transparent;}  
a.turn_link[href$="#ivi.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -118px 3px transparent;}  
a.turn_link[href$="#myvi.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -136px 3px transparent;}  
a.turn_link[href$="#zoomby.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -156px 3px transparent;}  
a.turn_link[href$="#video.bigmir.net"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -176px 3px transparent;} 
a.turn_link[href$="#play.ukr.net"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -328px 3px transparent;}  
a.turn_link[href$="#video.i.ua"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -369px 3px transparent;}  
a.turn_link[href$="#video.google.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -194px 3px transparent;}  
a.turn_link[href$="#vimeo.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -214px 3px transparent;}  
a.turn_link[href$="#metacafe.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -233px 3px transparent;}  
a.turn_link[href$="#vids.myspace.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -254px 3px transparent;}  
a.turn_link[href$="#dailymotion.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -274px 3px transparent;}  
a.turn_link[href$="#facebook.com"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -292px 3px transparent;}  
a.turn_link[href$="#24video.net"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -312px 3px transparent;}  
a.turn_link[href$="#ustream.tv"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -328px 3px transparent;}  
a.turn_link[href$="#kiwi.kz"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -348px 3px transparent;}  
a.turn_link[href$="#1tv.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -388px 3px transparent;}  
a.turn_link[href$="#ntv.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -409px 3px transparent;}  
a.turn_link[href$="#rutv.ru"] {background: url("http://forumfiles.ru/files/0012/b1/41/42036.png") no-repeat scroll -328px 3px transparent;}
</style>

и совсем для красоты добавляем всплывающую подсказку с названием хостинга:

Код:
<script type="text/javascript">
$('a.turn_link').tipsy({live:true, gravity:'s', fade : true});
$('#video-host-list a.turn_link').map(function () {
var label=$(this).text();
$(this).attr('title',label);
});
</script>

p.s.
спрайт с иконками я бы сделал крупнее (хотя бы 24х24), но к сожалению не нашёл подходящего размера, особенно отечественных видеохостингов,
может быть кто-нибудь займётся?

p.p.s.
коды выдаваемые некоторыми видеохостингами из списка изменились, поэтому неизбежно на сервисе будут соответствующие правки, не исключено, что вид списка тоже изменится, так что предлагайте ваши варианты оформления ;)

+4

33

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

спрайт с иконками я бы сделал крупнее (хотя бы 24х24), но к сожалению не нашёл подходящего размера, особенно отечественных видеохостингов,
может быть кто-нибудь займётся?

А так подойдет:
http://s2.uploads.ru/t/JSOCt.png
Поправил:
http://s2.uploads.ru/t/TXYH0.gif
Или:
http://s2.uploads.ru/t/qimxL.gif

Отредактировано kolobdur74 (Вт, 11 Июн 2013 22:14:12)

+1

34

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

А так подойдет:

фон за иконками должен быть прозрачным, а сами они соответственно чётко прорисованными (желательно)

0

35

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

Поправил:

скопировал твой исправленный вариант, но подожду ещё варианты от других желающих )
кстати, спрайт можно замутить и по сложнее, сделать например все иконки серыми, а при наведении курсора цветными, подобие такого

http://s2.uploads.ru/t/sl6oa.png

0

36

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

скопировал твой исправленный вариант

Я еще один там выложил - с поправкой на пробелы, к сожалению более четко у меня не вышло((

Отредактировано kolobdur74 (Вт, 11 Июн 2013 22:32:50)

0

37

Romych
А сильно будут нагружать форум?  у нас многие с мобилок- часто отключают картинки(

0

38

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

Я еще один там выложил - с поправкой на пробелы, к сожалению более четко у меня не вышло((

По идее нун точно разметить спрайт на секции - типично скриншотим таблицу с бордерами с нужным размером ячеек(обычно ячейки предварительно заливают ярким фоновым цветом, дабы потом очистить до прозрачки, бордеры каким нидь светлосерым) очищаем от фона, бордеры оставляем, потом вклеиваем в ячейки в ФШ иконки

Отредактировано Deff (Ср, 12 Июн 2013 00:07:41)

0

39

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

А сильно будут нагружать форум?  у нас многие с мобилок- часто отключают картинки(

Не сильно - картинка весит 5-6 килобайт от силы до 10..

0

40

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

Не сильно - картинка весит 5-6 килобайт от силы до 10..

всё верно, и при желании можно ещё ужать без потери качества - http://tinypng.org/

+2