"Уши" - прозрачные части слево - справо

от Romych:

Давно хотел оформить эту тему, наконец-то добрался,
про цветовыделение ников, на форуме поддержки создано уже сотня тем и написана куча скриптов, но я озаботился вопросом работы этого цветовыделения при любых обстоятельствах, в том числе и при тех, когда пользователь отключает в браузере поддержку java script, делается это по разным причинам, например, пользователь хочет обойти скрипт запрета просмотра определённой темы и т.д., в этот момент естественно ни один скрипт на вашем форуме не работает,
предложенный мной в этой теме способ даёт возможность выделять ники администраторов и модераторов ВСЕГДА, при любых осбтоятельствах, (разве что только не в совсем древних версиях браузеров)
итак, принцип таков, у каждого пользователя есть его id, который отображается в адресной строке его профиля,
css нам позволяет отслеживать ссылки по номерам определённых id и манипулировать их стилем
например у админа форума id, таков -/profile.php?id=2 и ник Ромыч
в css через селекторы атрибутов можно обратиться к этим данным так:

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

цветовыделение происходит в списке посещавших форум за сутки, в списках активных на данный момент, выделяется ник над аватаром и в описании форумов цвет ников модераторов
не забываем заключать css коды в теги <style> </style>
надеюсь объяснение получилось доходчивым ))
Romych ++ Оч Актуально для скриптов "Статистики пользователи за сутки" от JS-конструктор(Да и вообще подобной статистики скриптом на Всех партнёрках!
Поскольку Скриптами (*даже дожидаясь полной загрузки документа) - не всегда получаецо( особенной если в конце висит скрипт какой нидь статистики - которая не подгружаецо или гифка банера с битым кодом

от Romych:

Визуальное оформление опросов

Как-то я тут уже давал скрипт визуального оформления опросов, теперь тоже самое только без использования javascript,
применяем только css, что естественно предпочтительнее, поскольку надёжнее

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

можно расписать буквально для каждого процента и составить градацию как будет меняться цвет строки от процента к проценту, но как человек ленивый пошёл упрощённым путём и опираюсь только на первую цифру в параметре ширина и их получается 1-9,
если кто-то распишет более подробный вариант, логичный и приятный для глаза,
лично наставлю ему кучу плюсов

<style type="text/css">
#poll-special .poll2 td h1[style*='width:'] {background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 11px; -webkit-border-radius: 11px; -khtml-border-radius: 11px; -moz-border-radius: 11px; -o-border-radius: 11px;
box-shadow: 5px 5px 5px #9C9C9C; -moz-box-shadow: 5px 5px 5px #9C9C9C; -webkit-box-shadow: 5px 5px 5px #9C9C9C; filter: progid:DXImageTransform.Microsoft.Shadow(color='#9C9C9C', direction=145, strength=7); 
padding: 1px;margin: 0 50px;}
#poll-special .poll2 td h1[style*='width:1'] {background-color: #8A2BE2;}
#poll-special .poll2 td h1[style*='width:2'] {background-color: #4682B4;}
#poll-special .poll2 td h1[style*='width:3'] {background-color: #63B8FF;}
#poll-special .poll2 td h1[style*='width:4'] {background-color: #4EEE94;}
#poll-special .poll2 td h1[style*='width:5'] {background-color: #00EE00;}
#poll-special .poll2 td h1[style*='width:6'] {background-color: #C0FF3E;}
#poll-special .poll2 td h1[style*='width:7'] {background-color: #EEC900;}
#poll-special .poll2 td h1[style*='width:8'] {background-color: #FF8C00;}
#poll-special .poll2 td h1[style*='width:9'] {background-color: #FF4500;}
#poll-special .poll2 td h1[style*='width:100%'] {background-color: #FF0000;}
</style>

Не скрипт, но часто спрашивают:

Обрамление Профиля своими фоновыми картинками

В Конец Второго окна стиля, картинки меняете на свои

Отредактировано Deff (Пт, 29 Ноя 2013 18:39:58)

Fover
Да собственно тут ток правка css к стандартному коду Выпадающее меню для форума

Я тут недавно узнал, что Мозилла не понимает позиционирование для таблиц - все браузеры понимают, он нет, но если очень надо, то есть способ его пофиксить. Расскажу каким образом я вывернулся, может кому пригодится мое извращение..))
Задача отцентровать таблицу по вертикали в резиновом дизайне на фоне вставленной картинки (<img src="ссылка на картинку" width=100%>) и все это находится тоже в таблице (говорю же извращение)). Вначале я пробовал способ с оберткой и vertical-align: middle; , но способ оказался откровенно так себе, нашел способ классику:
Сама таблица:

Классика заключается в том, что ячейке внешней таблицы (.td_obschee) задаем position: relative; и высоту 100%, а обертке (.obertka) position: absolute; и половину высоты в процентах, а margin выставляем в auto то бишь вот так:

И все бы хорошо, но как я уже говорил Мозилла не понимает позиционирование таблицы, зато он понимает высоту строки, что другие браузеры игнорируют. И вот, что мы делаем: ставим высоту строки в 1 пиксель (зачем мы это делаем - мы привязываем Мозиллу к таблице), и задаем ячейке таблицы свойство display:block;, но и тут не без ложки дегтя - в других браузерах структура таблицы при этом рушится, поэтому это мы делаем только для Мозиллы, собственно вот он фикс:

Я дал ячейке еще один класс и для Мозиллы прописал ей свойство display:block;, и теперь Мозилла, думает, что это не таблица, а блок, и другие браузеры тоже довольны)) Что интересно - этот способ имеет еще и дополнительный эффект - не надо напрягаться с Мозиллой, чтобы еще и для нее отцентрировать по вертикали внутреннюю таблицу, с такой вариацией фикса .obertka работает так же как и в других браузерах. Надеюсь эта информация кому нибудь поможет))

А, да, еще добавлю, что с высотой обертки можно играть - не обязательно ставить 50% можно и больше, в зависимости от контента..

Отредактировано kolobdur74 (Сб, 16 Ноя 2013 23:24:28)

Неа, бо для разного разрешения background-size:100%; часто коверкает картинку, я с этим уже неоднократно сталкивался, особенно если картинки надо подгонять при сложных извратах,  поэтому с фоном и при резиновости дизайна наиболее адекват:

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

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

Администрирование - Настройки - НТМЛ верх.