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

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

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



CSS трюки

Сообщений 61 страница 80 из 113

1

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


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

+3

61

Заметил что часто забывают ставить фон под всплывающие контейнеры кнопок в форме ответа:

Код проставляет фон к контейнерам кнопок (Стиль шрифта, размер, загрузка картинок, цвет текста, вставка таблиц, смайлы и иконка треугольник вниз), контейнеры всплывают и появляются при клике этих кнопок.
http://s0.uploads.ru/t/BxTRW.jpg

Нужность в данном коде возникает когда дизайнер прочищает все контейнеры и они становятся полностью прозрачными(изначально в стиле от сервиса они уже окрашены)
Цвет можно подобрать

В Конец Второго Окна Стиля

/*Фон под контейнеры в форме Ответа*/
#pun_wrap #post .container[id$="-area"]{
border: outset 2px #895D39!important;
border-radius: 10px;
background: rgba(181,148,100,0.89); /*Можно добавить фон картинкой url(Ccылка на картинку)*/
padding: 9px;
font: normal normal 400 11px/normal Verdana;
}

Красным - изменяемые цвета
Про rgba http://qps.ru/rwoQn

+3

62

Многие запрещают скролл по горизонтали из-за чрезмерной шапки, - минусы - на мелких экранах тяжело прокрутить сообщения топика по ширине, как Вариант:
В конец Первого Окна Стиля:

@media screen and (min-width: 900px) {
html,body {overflow-x:hidden;}
}

Красным - ширина Полотна форума

+1

63

Здравствуйте.
Хочу поделиться наработкой, которую хорошо использовать на форумах с простым (родным) стилем майбб.

С помощью стилей css можно очень много сделать с фотографиями в постах и с аватарами.
Например - Эффект сепии для картинки в посте.

Код:
<style>
li.pa-avatar img:hover{
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
}

li.pa-avatar img{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
}
</style>

Также можно делать рамки, увеличение при наведении и прочие вещи с помощью css.

+2

64

Кнопка "Новые сообщения" картинкой на чистом CSS

http://savepic.net/7172389.png

В HTML верх (или конец Второго окна стилей без <style></style> ):

<style type="text/css">
.punbb .newtext {
  font-size: 0;
}
.punbb .newtext > a {
  content: url(http://forumfiles.ru/files/0014/cf/dd/42490.gif);
  float: left;
  margin-right: 5px;
  margin-left: -3px;
  margin-top: 1px;
}
.punbb .newtext a:hover {
  opacity: 0.7;
}
</style>


Красным выделена ссылка на картинку

0

65

Замена ссылок "Удалить", "Редактировать", "Цитировать" на картинки - CSS

В HTML-верх (или в конец Второго окна стилей без тегов <style> </style>):

<style type="text/css">
/* "Удалить" */
li.pl-delete a { content: url(Ссылка на картинку); }
li.pl-delete a:hover { content: url(Ссылка на картинку при наведении); }

/* "Редактировать" */
li.pl-edit a { content: url(Ссылка на картинку); }
li.pl-edit a:hover { content: url(Ссылка на картинку при наведении); }

/* "Цитировать" */
li.pl-quote a { content: url(Ссылка на картинку); }
li.pl-quote a:hover { content: url(Ссылка на картинку при наведении); }
</style>


Дополнение для форумов Rusff и ZeroParking:

Замена ссылок "Поделиться", "Пожаловаться" картинками

<style type="text/css">
/* "Поделиться" */
li.pl-share a { content: url(Ссылка на картинку); }
li.pl-share a:hover { content: url(Ссылка на картинку при наведении); }

/* "Пожаловаться" */
li.pl-reports a { content: url(Ссылка на картинку); }
li.pl-reports a:hover { content: url(Ссылка на картинку при наведении); }
</style>

+1

66

Расширяем текстовые поля в Админке
(HTML верх, HTML низ, Дополнительные пункты меню, Правила, Текст приветствия, Объявление, HTML в форме ответа, Структура style.css, Цвета style_cs.css)

http://savepic.net/7347405m.png  http://savepic.net/7399628m.png(Кликабельно)

Код неактуален, расширение полей реализовано от сервиса

В конец Первого окна стилей:

/* Расширяем текстовые поля в Админке */
#o-essentials p:nth-of-type(6),
#o-essentials p:nth-of-type(7),
#o-form-reply p,
#o-features p:last-child,
#o-announcement p:last-child,
#o-registration p:nth-of-type(8),
#o-registration p:nth-of-type(10),
.adcontainer[action^="admin_style"] p:not(:nth-of-type(1)) {
  border-left-width: 0px !important;
}

#o-essentials p:nth-of-type(6) .adinput,
#o-essentials p:nth-of-type(7) .adinput,
#o-form-reply p .adinput,
#o-announcement p:last-child .adinput,
#o-features p:last-child .adinput,
#o-registration p:nth-of-type(8) .adinput,
#o-registration p:nth-of-type(10) .adinput,
.adcontainer[action^="admin_style"] p:not(:nth-of-type(1)) .adinput {
  margin-top: 2.2em !important;
}

#o-essentials p:nth-of-type(6) .adlabel,
#o-essentials p:nth-of-type(7) .adlabel,
#o-form-reply p .adlabel,
#o-features p:last-child .adlabel,
#o-announcement p:last-child .adlabel,
#o-registration p:nth-of-type(8) .adlabel,
#o-registration p:nth-of-type(10) .adlabel,
.adcontainer[action^="admin_style"] p:not(:nth-of-type(1)) .adlabel {
  margin-left: 0px !important;
  width: auto !important;
}


Для форумов Rusff и ZeroParking код неактуален  - есть функция от сервиса

+3

67

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

Расширяем текстовые поля в Админке

Позволю себе маленькую поправку.
Для партнёрки rusff этот код не актуален. Там это уже реализовано.

0

68

Счётчик Участников

Код:
#pun-userlist .usertable  tbody {counter-reset: section; } 
#pun-userlist .usertable  tbody td.tcl:before {
    counter-increment: section; 
    content: counter(section) ". "; 
   }

пример: http://forum-people.ru/userlist.php

+1

69

Счётчик ЛС

Код:
#pun-messages #profile fieldset tbody {counter-reset: section; } 
#pun-messages #profile fieldset tbody td.tcl:before {
    counter-increment: section; 
    content: counter(section) ". "; 
   }

+1

70

Оформление элементов выбора в Админке в виде переключателейhttp://savepic.org/8116764.png

В конец Второго Окна стилей:

/* Оформление переключателей в Админке */
#pun-admain .adinput label {display: none;}
#pun-admain .adinput input[type="radio"][value="1"] {
  margin-left: 15px;
}
#pun-admain .adinput input[type="radio"][value="0"] {
  margin-left: -15px;
}
#pun-admain .adinput input[type="radio"] {
  border: 0px none transparent;
  color: transparent !important;
  cursor: pointer;
  font-size: 0px !important;
  outline: medium none transparent !important;
  -webkit-appearance: none !important;
  padding: 0px !important;
  position: absolute;
}
#pun-admain .adinput input[type="radio"]:checked {
  width: 12px;
  height: 15px;
  border-radius: 3px;
  margin-top: -1px;
  z-index: 99;
  box-shadow: inset 0 0 4px rgba(255,255,255,.5);
}
#pun-admain .adinput input[type="radio"][value="1"]:checked {
  background: #50AD0A;
}
#pun-admain .adinput input[type="radio"][value="0"]:checked {
  background: #777777;
}
#pun-admain .adinput input[type="radio"]:not(:checked) {
  width: 20px;
  height: 8px;
  background: #aaaaaa;
  box-shadow: inset 0 0 4px rgba(0,0,0,.2);
  border-radius: 2px;
  margin-top: 2.9px;
}
#pun-admain .adinput input[type="radio"][value="1"]:not(:checked) {
  margin-left: 7px !important;
}


Данный код работает корректно только в браузерах на движке Webkit (Google Chrome, Opera новых версий и т.п.)

+2

71

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

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

в общем пришёл к выводу, что картинкой всё таки проще и красивее

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

результат:
http://s2.uploads.ru/0zKxj.jpg

код простейший:

#poll-special .poll2 td h1 {
    background: url("ссылка на картинку цветовой шкалы") repeat-x scroll 0 0  / cover !important;;
}


ДЕМО

+2

72

Удаляем лишние строки после цитаты и кода на CSS
В HTML верх (или Конец Первого окна стилей без тегов <style>):

<style>
.post-content div + p::first-line {line-height: 0;}
.post-content div + p::first-letter {line-height: 1;}
.post-content div + p > br {
  display:block;
  height:0;
  line-height:0;
  font-size:0;
}
</style>

0

73

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

Удаляем лишние строки после цитаты и кода на CSS

Это вместо этого скрипта?

<!-- Удаляем лишние строки после цитаты и кода // v.3 © Alex_63 -->
<script type="text/javascript">
$('.post-content').each(function() {
    var CNT = $(this).html();
    CNT = CNT.replace(/<p><br><\/p>/img,'');
    CNT = CNT.replace(/<p><br><br>(.*?)<\/p>/img,'<p>$1</p>');
    CNT = CNT.replace(/<p><br>(.*?)<\/p>/img,'<p>$1</p>');
    $(this).html(CNT);
});
</script>

0

74

Падающий снег в шапке форума. CSS

css анимация, без применения js и flash
одинаково смотрится во всех современных браузерах, включая мобильные

http://s6.uploads.ru/t/2o7pJ.jpg
 
ДЕМО

Код:
/* зимнее оформление шапки */
#pun-title table {
	-webkit-animation : dropFlowParticles 2s linear infinite;
	-o-animation : dropFlowParticles 2s linear infinite;
    animation: dropFlowParticles 2s linear infinite;
    background: rgba(0, 0, 0, 0) url("http://petushki-city.ru/files/0002/10/47/35447.png") repeat scroll 0 0;
}

#title-logo-table > tbody {
	-webkit-animation : dropFlowParticles 12s linear infinite;
	-o-animation : dropFlowParticles 12s linear infinite;
    animation: dropFlowParticles 12s linear infinite;
    background: rgba(0, 0, 0, 0) url("http://petushki-city.ru/files/0002/10/47/64450.png") repeat scroll 0 0;
}

tr#title-logo-tr {
	-webkit-animation : dropFlowParticles 27s linear infinite;
	-o-animation : dropFlowParticles 27s linear infinite;
    animation: dropFlowParticles 27s linear infinite;
    background: rgba(0, 0, 0, 0) url("http://petushki-city.ru/files/0002/10/47/50326.png") repeat scroll 0 0;
}

@-webkit-keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}
@keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}

в коде 3 изображения снега, падающих с разной скоростью из-за чего создаётся впечатление плотного снегопада
изображения присваиваются 3 дочерним элементам блока pun-title
последовательность элементов  получается такая: #pun-title --> #pun-title table --> #title-logo-table > tbody --> tr#title-logo-tr
у меня в примере основной фон присвоен блоку pun-title, а падающий снег, трём последующим #pun-title table, #title-logo-table > tbody и tr#title-logo-tr
вот так визуально выглядит структура шапки:
http://s2.uploads.ru/t/nDjM7.jpg
1. ярко красным таблица (#pun-title table)
2. она является дочерним элементом div блока #pun-title (слева от неё голубым цветом)
3. справа от таблицы идёт её дочерний элемент tbody (#title-logo-table > tbody) тёмно-серым цветом
4. и уже затем бледно красным идёт строка таблицы (tr#title-logo-tr)
это я всё к тому что вариантов оформления фона и избражений с анимацией несколько, там ещё ячейки есть td.title-logo-tdl и td.title-logo-tdr

p.s. изображения со снежинками рекомендуется перезалить к себе на форум

+2

75

ПЕРЕЛИВАЮЩИЕСЯ ССЫЛКИ на CSS
В HTML верх или Конец Второго окна стилей без тегов <style></style>

<!-- Переливающиеся ссылки -->
<style>
body a:hover {
  -webkit-animation:rotateColor 2s linear infinite;
  animation:rotateColor 2s linear infinite;
}
@-webkit-keyframes rotateColor {
  0% {color:rgb(255, 2, 2);}
  20% {color:rgb(239, 255, 2);}
  40% {color:rgb(2, 255, 21);}
  60% {color:rgb(2, 255, 255);}
  80% {color:rgb(18, 2, 255);}
  100% {color:rgb(255, 2, 212);}
  110% {color:rgb(255, 0, 0);}
}
@keyframes rotateColor {
  0% {color:rgb(255, 2, 2);}
  20% {color:rgb(239, 255, 2);}
  40% {color:rgb(2, 255, 21);}
  60% {color:rgb(2, 255, 255);}
  80% {color:rgb(18, 2, 255);}
  100% {color:rgb(255, 2, 212);}
  110% {color:rgb(255, 0, 0);}
}
</style>

+2

76

Замена слов Репутация и Позитив в Профиле Топика на свои через css (Актуально для форумов Русфф)
В HTML верх

<style>
.pa-respect>a[href^="/respect.php?"],
.pa-positive>a{
  font-size:0;
  width:0;
  visibility:hidden;
}
.pa-respect>a[href^="/respect.php?"]:after{
  content:"На что меняем";
  display:inline-block;
  visibility:visible;
  font-size:12px;
}
.pa-positive>a:after{
  content:"На что меняем";
  display:inline-block;
  visibility:visible;
  font-size:12px;
}
</style>

+2

77

продолжаем тему совершенствования работы с файлами на форуме - Счётчик форумных файлов

О чём это?

как уже говорилось на каждом форуме может храниться до 100 файлов,
поскольку данная возможность у нас имеется давно, то встречаются файлы загруженные например в 2013 году
У меня на форуме 68 файлов, и тут мне консоль браузера сигнализирует, мол 2 файла у вас пустые, один это скрипт js под номером таким-то, другой стиль css под номером таким-то.
Я естественно нефига уже не помню что это за файлы, тем более по номерам, тщетно пытаюсь шарить глазами по списку и никак не могу найти требуемые.
http://sg.uploads.ru/ZJu7T.jpg

Отсюда пришла мысль выделить файлы в списке цветом по типу, а у нас их достаточно много

Веб (css, js, swf, txt, woff, ttf, otf, eot).
    Графика (png, jpe, jpeg, jpg, gif, bmp, ico, tiff, tif, svg, svgz, psd).
    Офис (pdf, doc, rtf, xls, ppt, odt, ods).

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

Выделение цветом форумных файлов по типу.
http://sg.uploads.ru/JsBh0.jpg

в html-верх либо в Свой стиль без тегов <style type="text/css"></style>

Код:
<style type="text/css">
#filetable tr[id$="js"] {
    background: #ccff90;
}
#filetable tr[id$="css"] {
    background: #f4ff81;
}
</style>

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

#filetable tr[id$="gif"] {
    background: цвет;
}

+5

78

Общий Фон под форумами категорий
http://s1.uploads.ru/QsahY.jpg

В HTML верх:

<!-- Общий Фон под форумами категорий -->
<style type="text/css">
.category .container,
.category .container th,
.category .container td{
  border:0 none transparent!important;
  background:transparent none;
}
.category .container{
  position:relative; z-index:3;
  margin-bottom: 20px;
}
.category .container table:after{
  content: "";
  display: block;
  position:absolute;  z-index:-1; left:0;
  top:24px;  /*Отступ от верха категории */
  width:410px; /*Ширина площадки*/
  height:94%;
  background: #ffffff; /*Цвет фона*/
  border-radius:12px;
}
</style>

+2

79

0

80

Обрамление форумов картинкой (вместе с описанием)
http://sh.uploads.ru/HWdVn.jpg

Картинка, разделённая на части

Верх
http://s6.uploads.ru/xdpNT.png


Cредняя часть
http://s2.uploads.ru/eYZuX.png


Низ
http://s7.uploads.ru/pcG9f.png


В HTML верх (или конец первого окна стиля, без тегов <style></style>)

Код:
<style>
/*Обрамление форумов картинкой(вместе с описанием)*/
.category h3{
  position:relative;z-index12;
  background:url(http://s6.uploads.ru/xdpNT.png) 0 top no-repeat; /*Верхняя часть картинки*/
  width:364px; /*Ширина картинки*/
  height:74px; /*Высота картинки*/
  padding-top:34px; /*Центровка ссылки на форум по вертикали в верхней картинке*/
}
.opisF {
  background:url(http://s7.uploads.ru/pcG9f.png) 0 bottom no-repeat,url(http://s2.uploads.ru/eYZuX.png) 0 0 repeat-y;
  max-width:364px; /*Ширина картинки*/
  padding: 0 22px; /*Отступ описания от боковых краёв картинки */
  margin-top:-34px;  /*Подтаскиваем описание к низу названия фора*/
  padding-bottom:34px; /*Отступ описания от нижнего края */
}
</style>

Описание оборачиваем в теги:

<div class=opisF>
Тут Описание к форуму ....
</div>

+8