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

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

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



CSS трюки

Сообщений 81 страница 100 из 127

1

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


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

+4

81

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

.category .intd {
  background-color:#fff; /*Фон*/
  box-shadow:inset 0 0 2em rgba(83,129,181,.7);  /*Объёмная тень внутри*/
  border-radius:23px; /*Скругления*/
  border-width:8px 0 9px 0; /*Ширина бордеров сверху- снизу*/
  border:solid #FFEA00; /*Цвет бордеров*/
  padding:12px; /* Отступ от краёв */
}

http://sd.uploads.ru/iHURL.png

+2

82

А как сделать такое же обрамление в остальных колонках?

0

83

brylin
Вид(кликабельно):
http://s4.uploads.ru/ErZQm.png

В HTML верх:

<style>.category .intd,
.category .wrp-td {
  background-color:#fff; /*Фон*/
  box-shadow:inset 0 0 2em rgba(83,129,181,.7);  /*Объёмная тень внутри*/
  border-radius:23px; /*Скругления*/
  border-width:8px 0 9px 0; /*Ширина бордеров сверху- снизу*/
  border-style:solid none solid none; /*Цвет бордеров*/
  border-color:#E3E562;
  padding:12px; /* Отступ от краёв */
}
</style>

<script>
$().pun_aboutReady(function(){$('#pun-index tbody td:not(.tcl)').each(function(){
  $(this).html('<div class="wrp-td">'+$(this).html()+'</div>');});});
</script>

Вариант только с крайними ячейками:
http://s3.uploads.ru/bNrIh.png

<style>.category .intd,
.category .wrp-td {
  background-color:#fff; /*Фон*/
  box-shadow:inset 0 0 2em rgba(83,129,181,.7);  /*Объёмная тень внутри*/
  border-radius:23px; /*Скругления*/
  border-width:8px 0 9px 0; /*Ширина бордеров сверху- снизу*/
  border-style:solid none solid none; /*Цвет бордеров*/
  border-color:#E3E562;
  padding:12px; /* Отступ от краёв */
}
</style>

<script>
$().pun_aboutReady(function(){$('#pun-index tbody td.tcr').each(function(){
  $(this).html('<div class="wrp-td">'+$(this).html()+'</div>');});});
</script>

+8

84

Спасибо!

0

85

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

Вариант только с крайними ячейками:

:cool:  Отлично Deff! + Можно самому отредактировать размеры и цвета!  :writing:  :cool:

0

86

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

brylin
Вид(кликабельно):

В HTML верх:

Вариант только с крайними ячейками:

Некоторые аватарки вылезают за края, как поправить это дело?

http://s3.uploads.ru/t/WsF9c.jpg

0

87

brylin
Добавьте синим в стиль для ячеек:

.category .intd,
.category .wrp-td {
  background-color:#fff; /*Фон*/
  box-shadow:inset 0 0 2em rgba(83,129,181,.7);  /*Объёмная тень внутри*/
  border-radius:23px; /*Скругления*/
  border-width:8px 0 9px 0; /*Ширина бордеров сверху- снизу*/
  border-color:#F5FAFF;
  padding:12px; /* Отступ от краёв */
  min-height:40px;
}

0

88

Ну или так:

.category .intd,
.category .wrp-td {
  background-color:#fff; /*Фон*/
  box-shadow:inset 0 0 2em rgba(83,129,181,.7);  /*Объёмная тень внутри*/
  border-radius:23px; /*Скругления*/
  border-width:8px 0 9px 0; /*Ширина бордеров сверху- снизу*/
  border-color:#F5FAFF;
  padding:12px; /* Отступ от краёв */
}
.category .wrp-td {
padding: 22px; /* Отступ от краёв */
}

0

89

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

Ну или так:

Все получилось.спасибо

0

90

Полоска-Разделитель между форумами

http://s5.uploads.ru/fap6s.png

(скриншот с форума almarein.spybb.ru)

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

<style type="text/css">
/*Разделители между форумами*/
.category th{
  padding-bottom:1.2em
}
.category tr{
  display:table;width:100%;
  clear:both;position:relative;
}
.category tbody>tr:before{
  content:"";display:block;
  width:100%;height:6px; /*Высота*/
  position:absolute;margin-top:-5px;
  background:#111; /*Фоновый цвет */
  background:linear-gradient(to right,transparent 0%,#111 4%,transparent 80%,transparent 100%);
  background:-webkit-linear-gradient(to right,transparent 0%,#111 4%,transparent 80%,transparent 100%);
  background:-moz-linear-gradient(to right,transparent 0%,#111 4%,transparent 80%,transparent 100%);
  background:-o-linear-gradient(to right,transparent 0%,#111 4%,transparent 80%,transparent 100%);
  background:-khtml-linear-gradient(to right,transparent 0%,#111 4%,transparent 80%,transparent 100%);
  background:-ms-linear-gradient(to right,transparent 0%,#111 4%,transparent 80%,transparent 100%);
}
</style>

+2

91

Колонки "Тем - Сообщений" в строчку на CSS

http://s5.uploads.ru/Tl7xy.png

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

<style type="text/css">
/*Основная часть, - Не меняем */
.category tr,#f-subforums tr{display:table;width:100%;clear:both;position:relative;}
.category td.tc2:before,#f-subforums td.tc2:before{content:"Тем: ";}
.category td.tc3:before,#f-subforums td.tc3:before{content:"Сообщений: ";}
.category th.tc3,.category th.tc2,#f-subforums th.tc2,#f-subforums th.tc3{visibility:hidden;}
.category .tc2,.category .tc3,#f-subforums .tc2,#f-subforums .tc3{position:absolute;bottom:0;
/*End/- Основная часть*/

  /* Оформление ячеек Тем - Сообщений */
  padding:.5em 1em!important; /*внутренние отступы*/
  background:none transparent!important; /*фон*/
  border:none 0 rgba(0,0,0,0)!important; /*бордеры*/
  width:130px!important;/*ширина*/
  text-align:right!important;

}
.category td.tcl,#f-subforums td.tcl{
  padding-bottom:2em; /*Отступ снизу, по высоте ячеек Тем - Сообщений*/
}
/* Ячейка "Тем" */
.category .tc2,#f-subforums .tc2{
  left:40px; /*подвижка слева*/
}
/* Ячейка "Сообщений" */
.category .tc3,#f-subforums .tc3{
  left:210px; /*подвижка слева*/
}
/* Оформление надписей "Тем","Сообщений" в ячейках*/
.category .tc2:before,.category .tc3:before,
#f-subforums .tc2:before,#f-subforums .tc3:before{
  float:left;
  color:#666; /*цвет шрифта*/
}
/*Правка ширины левой колонки*/
.category .tcl,#f-subforums .tcl{
  width:60%!important;
}
/*Правка ширины правой колонки*/
.category .tcr,#f-subforums .tcr{
  width:40%!important;
}
</style>

+5

92

Возник вопрос как Колонки "Тем - Сообщений" в строчку на CSS и скрипт Подфорумы "не скриптом", новая версия приспособить к мобильному стилю.

Скриншоты

http://s3.uploads.ru/t/QLJhD.png http://s6.uploads.ru/t/Djzge.png

У меня на форуме http://arkania.rolebb.ru/ стоит скрипт Подфорумы "не скриптом", новая версия и Колонки "Тем - Сообщений" в строчку на CSS с моими незначительными правками:

Колонки "Тем - Сообщений" в строчку на CSS

/* Колонки "Тем - Сообщений" в строчку на CSS
-----------------------------------------*/
/*Основная часть, - Не меняем */
.category tr,#f-subforums tr{display:table;width:100%;clear:both;position:relative;}
.category td.tc2:before,#f-subforums td.tc2:before{content:"Тем: ";}
.category td.tc3:before,#f-subforums td.tc3:before{content:"Сообщений: ";}
.category th.tc3,.category th.tc2,#f-subforums th.tc2,#f-subforums th.tc3{visibility:hidden;}
.category .tc2,.category .tc3,#f-subforums .tc2,#f-subforums .tc3{position:absolute;bottom:0;
/*End/- Основная часть*/

/* Оформление ячеек Тем - Сообщений */
  padding:.5em 1em!important; /*внутренние отступы*/
  background:none transparent!important; /*фон*/
  border:none 0 rgba(0,0,0,0)!important; /*бордеры*/
  width:130px!important;/*ширина*/
  text-align:right!important;
}
.category td.tcl,#f-subforums td.tcl{
  padding-bottom:2.5em; /*Отступ снизу, по высоте ячеек Тем - Сообщений*/
}
/* Ячейка "Тем" */
.category .tc2,#f-subforums .tc2{
right: 445px; /*подвижка справа*/
font-weight: bold;
}
/* Ячейка "Сообщений" */
.category .tc3,#f-subforums .tc3{
right: 280px; /*подвижка справа*/
font-weight: bold;
}
/* Оформление надписей "Тем","Сообщений" в ячейках*/
.category .tc2:before,.category .tc3:before,
#f-subforums .tc2:before,#f-subforums .tc3:before{
/*float:left;*/
color:#666; /*цвет шрифта*/
font-weight: normal;
margin-right: 1.5em;
}
/*Правка ширины левой колонки*/
.category .tcl,#f-subforums .tcl{
width:71%!important;
}
/*Правка ширины правой колонки*/
.category .tcr,#f-subforums .tcr{
width:30%!important;
}

- В полноэкранном режиме мне все нравится, но в мобильном стиле добавка при сужении окна "бъет" таблицу (первый скриншот).
- Если оставить код "Колонки "Тем - Сообщений" в строчку на CSS" и дописать для мобильного стиля:

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

<style>@media screen and (max-width: 540px) {
.category tr, #f-subforums tr {
    display: table-row;
}
.punbb .subforums .Inner {
  float: left;
  margin-top: 2em;
  margin-left: 0em;
}
}</style>


Вроде бы все более-менее (второй скриншот), или, скорее, как хотелось.

Отредактировано Lidia-Lada (Пн, 12 Сен 2016 22:28:17)

+1

93

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

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

Я не много не разбираюсь подойдет ли мне для Русфф, но как вижу подошло.
Интересно это будет отображаться во всех браузерах? В хроме отображается.
Спс.

0

94

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

Я не много не разбираюсь подойдет ли мне для Русфф, но как вижу подошло.

Ссылку на форум, у русфф, за ссылкой, внизу создать бесплатный форум стоит такой логотип  © 2007–2016 «QuadroSystems» LLC

0

95

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

Ссылку на форум, у русфф, за ссылкой, внизу создать бесплатный форум стоит такой логотип  © 2007–2016 «QuadroSystems» LLC

Спс. У меня такое внизу не написано.

0

96

Меняем оформление полей с автозаполнением и в фокусе

(для браузеров Webkit - Хром, новая Опера, Яндекс и т.п.)

http://s0.uploads.ru/KXLUj.png

/*оформление поля с автозаполнением*/
:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 50px #EAFFF5 !important; /*Цвет фона*/
  -webkit-text-fill-color: #1B631B !important; /*цвет текста*/
  color: #1B631B !important; /*цвет текста*/
}

/*оформление поля в фокусе*/
:focus {
  outline-color: #4DC382; /*цвет обводки*/
}

Если нужно совсем убрать обводку - ставим transparent

+5

97

Внутренняя Тень на Аватарке

(Идея Grey_Fox, автор кода kolobdur74, ну и поправки от меня)

http://sa.uploads.ru/dmsAM.png

Ставим В Конец Второго Окна стилей( или в HTML верх, обернув в теги <style></style>)

.pa-avatar {
  position:relative;
  max-width:100%;
  display:inline-block;
}
.pa-avatar:before {
  content:"";position:absolute;
  top:0;bottom:0;left:0;right:0;
  box-shadow:inset 0 0 20px #F8F8FF/*размытие и цвет тени*/
  -moz-box-shadow:inset 0 0 20px #F8F8FF/*размытие и цвет тени(для мозиллы)*/
  -webkit-box-shadow:inset 0 0 20px #F8F8FF/*размытие и цвет тени(для webkit)*/
}
.post-author .pa-avatar img {float:left;border:0px!important}

Вариант с закруглением углов аватарки

.pa-avatar {
  position:relative;
  max-width:100%;
  display:inline-block;
}
.pa-avatar:before {
  content:"";position:absolute;
  top:0;bottom:0;left:0;right:0;
  box-shadow:inset 0 0 20px #F8F8FF/*размытие и цвет тени*/
  -moz-box-shadow:inset 0 0 20px #F8F8FF/*размытие и цвет тени(для мозиллы)*/
  -webkit-box-shadow:inset 0 0 20px #F8F8FF/*размытие и цвет тени(для webkit)*/
}
.pa-avatar img,.pa-avatar:before {
  border-radius:6px!important;/*радиус закруглений*/
}
.post-author .pa-avatar img {float:left;border:0px!important}

Если нужны Бордеры( border) у аватарок, - прописываем их туда же, где и border-radius (на селектор .pa-avatar img,.pa-avatar:before)
Так же с border-image и т.п.

+4

98

Кстати, что то не увидел здесь смену Названий Меню через CSS, ну вот выложил:

Код:
<!--Меняем Названия в Меню через CSS-->
<style>
#navindex a:before {content:"Новый текст";} /* Форум */
#navuserlist a:before {content:"Новый текст";} /* Участники */
#navrules a:before {content:"Новый текст";} /* Правила */
#navsearch a:before {content:"Новый текст";} /* Поиск */
#navprofile a:before {content:"Новый текст";} /* Профиль */
#navadmin a:before {content:"Новый текст";} /* Администрирование */
#navlogin a:before {content:"Новый текст";} /* Вход */
#navlogout a:before {content:"Новый текст";} /* Выход */
#navregister a:before {content:"Новый текст";} /* Регистрация */
#navextra1 a:before {content:"Новый текст";} /* Доп. пункт 1 */
#pun-navlinks li a span {font-size:0;}
@media screen and (max-width: 540px) {#pun-navlinks li a:before {display:none}}
</style>

Единственное не придумал как оставить отображение новых сообщений.. Придумал - код в следующем посту, отсюда убрал код для Сообщения..

Поправил 10.05.2017 Alex_63  ( добавил поправки от Lidia-Lada > ссылка)

Отредактировано kolobdur74 (Вс, 26 Фев 2017 15:10:04)

+3

99

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

Единственное не придумал как оставить отображение новых сообщений..

Чтобы оставить количество приходящих сообщений, но при этом изменить слово:

Код:
<style>
#navpm a {position: relative;}
#navpm a:before {content:"Новый текст";}
#navpm a span {
position: absolute;
left: 12px;
clip: rect(auto, auto, auto, 68px);
}
</style>

left: 12px; - регулируем отступ от Нового слова до количества сообщений..

+1

100

kolobdur74
А можно же так и картинкой заменить?

0