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

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

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



CSS трюки

Сообщений 41 страница 60 из 108

1

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


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

+2

41

Маргошка написал(а):

такс...либо я

"Уши" - прозрачные части слево - справо
http://s5.uploads.ru/Ar0mp.jpg

0

42

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

"Уши" - прозрачные части слево - справо
http://s5.uploads.ru/Ar0mp.jpg


ага. вот теперь я почти поняла))
ну температурю я т-е-м-п-е-р-а-т-у-р-ю

Отредактировано Маргошка (Пн, 23 Сен 2013 21:15:10)

0

43

от Romych:

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

a[href$="/profile.php?id=2" {color: purple !important;} /* цветовыделение в списке активных и посещавших форум */
a[href*="javascript:to('Ромыч')"] {color: purple !important;} /* цветовыделение ника над аватаром */

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

/* цветовыделение администратора */
a[href$="/profile.php?id=2"] {color: purple !important;} 
a[href*="javascript:to('Ромыч')"] {color: purple !important;}
/* цветовыделение модераторов-парней */
a[href$="/profile.php?id=10"], a[href$="/profile.php?id=996"], a[href$="/profile.php?id=11"], a[href$="/profile.php?id=680"], a[href$="/profile.php?id=45"], a[href$="/profile.php?id=68"] {color: blue !important;}
a[href*="javascript:to('Andry')"], a[href*="javascript:to('Hired')"], a[href*="javascript:to('Keriby')"], a[href*="javascript:to('SANINSPEKTOR')"], a[href*="javascript:to('Aaron_Niguez')"], a[href*="javascript:to('Esdrin')"] {color: blue !important;}
/* цветовыделение модераторов-девушек */
a[href$="/profile.php?id=37"] {color: crimson !important;}
a[href*="javascript:to('lehrerin')"] {color: crimson !important;}

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

0

44

от Deff:

.punbb a[href*="javascript:to('Deff')"],
.punbb a[href$="/profile.php?id=22787"],
.punbb a[href*="javascript:to('nogard')"],
.punbb a[href$="/profile.php?id=26066"],

.punbb a[href*="javascript:to('Ромыч')"],
.punbb a[href$="/profile.php?id=15964"]{
color:red;
}
.punbb .pl-email a{
color:#505060!important;
}

Красным - дефолтный цвет 'Профиль ЛС E-mail'
в профиле под Аватаркой - чтобы не менялсо
Верхняя секция для ников одного цвета - для другого цвета прописываем новую секцию
нижний код - один на все секции

0

45

от Romych:

Визуальное оформление опросов
Как-то я тут уже давал скрипт визуального оформления опросов, теперь тоже самое только без использования javascript,
применяем только css, что естественно предпочтительнее, поскольку надёжнее
http://uploads.ru/t/v/3/L/v3Lei.png
алгоритм работы прост
каждая строка с результатами в голосовании имеет ширину в процентах, на неё опираться и будем

#poll-special .poll2 td h1[style*='width:15%'] {background-color: #FF0000;}

можно расписать буквально для каждого процента и составить градацию как будет меняться цвет строки от процента к проценту, но как человек ленивый пошёл упрощённым путём и опираюсь только на первую цифру в параметре ширина и их получается 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>

+1

46

Иконки категорий (спрайт)

иконки к категориям форума можно сделать одним спрайтом, принцип почти такой же как в первом сообщении данной темы, только обращаемся к другому селектору
рисуем некий спрайт иконок
http://petushki-city.ru/files/0002/10/47/97317.png

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

div.catleft {float: left;
margin-left: -7px;
padding-right: 32px;
padding-top: 27px;}

#pun-category1 h2 div.catleft {background: url("ссылка на спрайт") no-repeat scroll 5px 3px transparent;}
#pun-category2 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -24px 3px transparent;}
#pun-category3 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -80px 3px transparent;}   
#pun-category4 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -53px 3px transparent;}   
#pun-category5 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -109px 3px transparent;}   
#pun-category6 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -136px 3px transparent;}
#pun-category7 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -166px 3px transparent;}   
#pun-category8 h2 div.catleft{background: url("ссылка на спрайт") no-repeat scroll -193px 3px transparent;}


Демо

+2

47

Не скрипт, но часто спрашивают:
Обрамление Профиля своими фоновыми картинками
В Конец Второго окна стиля, картинки меняете на свои

/*Фон мини-профиля в Топике*/
.punbb .post .post-author {
  background:url(http://s5.uploads.ru/XhMmc.png) 0 0 repeat-y; /*Фон размножаемый по вертикали*/
  overflow: visible!important;
  margin:12px 0!important;
}
.punbb .post .post-author > ul {
  background:url(http://s4.uploads.ru/bE3dQ.png) 0 top no-repeat,url(http://s5.uploads.ru/LHcVs.png) 0 bottom no-repeat; /*Фон верха - низа*/
  margin:-12px 0 -12px 0!important;
  padding:12px 17px!important;
}


http://s4.uploads.ru/jUcgJ.png

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

+2

48

Всплывающие Описания при наведении на Ники - Админов -Модеров в объявлении
http://s7.uploads.ru/EVHZx.jpg

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

Здравствуйте. Хотелось бы код, который при наведение курсора на авы админ. состава вылезало окошко

В HTML верх (код ставим единожды на одну или несколько вставок)

<style>
div.ImgWrap{
position:relative;
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
.image.Down {
   background-color:#fff;
   width:170px;  /*Ширина всплывающего блока*/
   display:none;
   position:absolute;
   z-index:100;
   border:2px solid #000;
   left:50%;
   bottom:103%;
   padding:0;
   margin:0 0 0 -85px; /*Половина ширины*/
   box-shadow:13px 13px 13px #3B3B3B;
   border-radius:4px;
}
div.ImgWrap:hover > .image.Down{
   display:block;
}
</style>

Туда, где нужна картинка Админов

<div class=ImgWrap>
<pre class="image Down" align=center><img  src="http://i58.fastpic.ru/big/2013/1027/ba/97c786c8c92f3d5b2c921265664562ba.gif" width=100%/>
  <b>Рыцарь</b>
Cоздатель дизайна и
Тестовик.

</pre>
  <a href="ccылка на профиль" target="_blank"><img class="image UP" src="http://i58.fastpic.ru/big/2013/1027/ba/97c786c8c92f3d5b2c921265664562ba.gif"/></a>
</div>

Зеленым - Ваш текст

Отредактировано Deff (Вс, 27 Окт 2013 19:03:58)

+2

49

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

0

50

Ни для кого не секрет, что админы форумов могут загружать файлы на форумное файловое хранилище, через соответствующие инструменты в админ-меню,
это хранилище файлов имеет ограничение "Одновременно можно хранить не более 100 файлов.", всё вроде бы нормально и работает, но оно имеет одно очень существенное упущение - файлы не пронумерованы! 
и когда загруженное количество их приближается к потолку (100), ни что нам об этом не сигналит,
т.е. мы понятия не имеем сколько у нас загружено файлов на нашем форуме, считать их вручную не вариант, 
НО, нет повода для паники, решение есть! ;)

Счётчик форумных файлов

Код неактуален, количество файлов отображается по умолчанию цифрой внизу списка файлов

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

Код:
/* Счётчик файлов */
table#filetable tbody {counter-reset: section; } 
table#filetable tbody td.tcl:before {
    counter-increment: section; 
    content: counter(section) ". "; 
   }

результат будет следующим:
до добавления кода
http://s6.uploads.ru/t/9ipx7.png

после
http://s7.uploads.ru/t/y1j7Z.png http://s7.uploads.ru/t/L13SI.png

+5

51

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

<table id='tablica' width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td class='td_obschee td_obertka'>
<div class="obertka">
<table class="tablica_vnutri" width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td class='td_left'></td>
<td class='td_center'></td>
<td class='td_right'></td>
</tr>
</table>
</div>
  <img src="ссылка на картинку" width=100%>
</td>
</tr>
</table>

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

.td_obschee {
position: relative;
height: 100%;
}

.obertka {
width: 100%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

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

table tr { height: 1px;}
@-moz-document url-prefix() {
.td_obertka {display:block;}
}

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

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

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

+1

52

kolobdur74
:glasses:
А это не тоже самое ?

Код:
<style>
table.cnt {
  position:relative;
  z-index:100;
  background:url(http://s6.uploads.ru/LiHoK.gif) no-repeat center;
  background-size:100%;
}
table.cnt td{
  border:2px solid blue;
}
</style>
<table id="wrp" style="width:100%;height:100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign=center align=center>

 <table class="cnt" width="100%" border="0" cellpadding="0" cellspacing="0" style="">
  <tr>
    <td class="td_left" height=54>hjkhjk</td>
    <td class="td_center">fghfg</td>
    <td class="td_right">dgdfg</td>
  </tr>
 </table>


</td>
</tr>
</table>

Отредактировано Deff (Сб, 16 Ноя 2013 23:46:37)

0

53

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

А это не тоже самое ?

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

@media screen and (min-width: ...px) and (max-width: ...px) {
}

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

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

0

54

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

Неа, бо для разного разрешения background-size:100%; часто коверкает картинку,

Код:
<style>
#wrp  {
 margin:0;
 padding:0;
 position:absolute;
 width:100%;height:100%;

}

img.bgg {
  top:0;bottom:0;
  left:0; right:0;
  margin:auto;
  vertical-align:middle; 
  position:absolute;
}

table.cnt {
  top:0;bottom:0;
  margin:auto;
  position:relative;
  z-index:100;
  color:#fff;
  background-size:100%;
}
table.cnt td{
  border:2px solid blue;
}
</style>

<table id="wrp" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign=center align=center>


 <img class="bgg" src="http://s6.uploads.ru/LiHoK.gif" width="100%">
 <table class="cnt" width="100%" border="0" cellpadding="0" cellspacing="0" style="">
  <tr>
    <td class="td_left" height=54>hjkhjk</td>
    <td class="td_center">fghfg</td>
    <td class="td_right">dgdfg</td>
  </tr>
 </table>


</td>
</tr>
</table>

Отредактировано Deff (Вс, 17 Ноя 2013 02:39:50)

0

55

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

Как сделать Счётчик форумных страниц вот тут -  http://адрес флоума/admin_pages.php
также как пост 57 но только страниц надо

Код:
/* Счётчик страниц */
div#pun-admin_pages table.adcontainer tbody {counter-reset: section; } 
div#pun-admin_pages table.adcontainer tbody td.tcl:before {
    counter-increment: section; 
    content: counter(section) ". "; 
   }

0

56

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

в поисках способа построенного только на css, пришёл пока вот к такому методу:

Код:
<style>
#pun-category1 h2 span:before {content:url(адрес изображения);}
#pun-category2 h2 span:before {content:url(адрес изображения);}
#pun-category3 h2 span:before {content:url(адрес изображения);}
#pun-category4 h2 span:before {content:url(адрес изображения);}
</style>

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

по такому же принципу можно разместить иконку в Статистике форума,
добавив ещё одну строку

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


а куда код втыкать подскажите а то я в css нешарю, кой что попробовал на тестовом но там ерундаполучается правда работает но в итоге половина стиля кудато изчезла блин как точней выразится не знаю вот скрин короче
http://s6.uploads.ru/tchk6.png , чё делать кудачего там втыкать я без понятия

0

57

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

а куда код втыкать подскажите

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

0

58

Замена надписи Объявление не скриптом.

Для того, чтобы были понятны дальнейшие действия приведу структуру блока с объявлением:

<div id="pun-announcement" class="section">
<h2><span>Объявление</span></h2>
<div class="container">
    <div class="html-box">
    Здесь контент
    </div>
</div>
</div>

Выделил место, где расположена надпись "Объявление", которую и будем изменять через css. Вначале мы эту надпись уберем, благо она в тегах span:

#pun-announcement h2 span {
display: none;
}

А затем, используя псевдоэлемент before (можно и after), добавляем свою надпись:

#pun-announcement h2:before {
content: "Полезная Информация";
display: block;
padding: 1.4em 0 0.4em 0;
border: none;
font-size: 1.6em;
font-family: 'Comic Sans MS', cursive;
text-align: center;
}

Пояснения:
Красным - новая надпись
Зеленым - шрифт новой надписи
Фиолетовым - размер новой надписи
Ну, и можно эту надпись сдвинуть вправо, влево, по центру (голубым).
Если надо, то можно добавить и разделяющую полосу после нашей новой надписи:

#pun-announcement h2:after {
display: block;
content: attr(hr);
border-style: solid;
border-width: 1px 0;
border-color: #ccbb00 #CD00CD #CD00CD #CD00CD;
}

Красным - разделительная линия
Голубым - цвет бордюров нашей линии
Зеленым - оставили только верхний и нижний бордюр

Отредактировано kolobdur74 (Вс, 19 Янв 2014 15:05:50)

+6

59

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

Код:
.poll2 tbody {counter-reset: section;} 
.poll2 tbody td:not([class="tac"]):nth-child(1) span:before {counter-increment: section; content: counter(section) ". "; }

по-умолчанию счётчик в опросе отсутствует

0

60

Модное сейчас выстраивание в одну строку числа сообщений и репутации

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

Deff
а так же хотела спросить, как можно сделать так, чтобы число сообщений и репутация были на одной строчке после названия?

Про Это ?
http://sa.uploads.ru/s2zFp.jpg

В HTML верх:

<style type="text/css">
/*Выравниваем в одну строку число постов и Уважение*/
.pa-posts,.pa-respect {
text-align:center;
border: 3px double #0F0107; /*Вид бордеров*/
display:inline-block;
padding:0 2px!important;
width:76px;
margin-left: 0;
}
</style>

+1