Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов
Дополнения к текущей теме: Интересные решения для форумов
Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Новые возможности форумов » CSS трюки
Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов
Дополнения к текущей теме: Интересные решения для форумов
Много используемый на ролевых, Простой Вариант обрамления форумов
.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; /* Отступ от краёв */
}
А как сделать такое же обрамление в остальных колонках?
В 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>
Вариант только с крайними ячейками:
<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>
Спасибо!
Вариант только с крайними ячейками:
Отлично Deff! + Можно самому отредактировать размеры и цвета!
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;
}
Ну или так:
.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; /* Отступ от краёв */
}
Ну или так:
Все получилось.спасибо
Полоска-Разделитель между форумами
(скриншот с форума 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>
Колонки "Тем - Сообщений" в строчку на CSS
В 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>
Возник вопрос как Колонки "Тем - Сообщений" в строчку на CSS и скрипт Подфорумы "не скриптом", новая версия приспособить к мобильному стилю.
У меня на форуме http://arkania.rolebb.ru/ стоит скрипт Подфорумы "не скриптом", новая версия и Колонки "Тем - Сообщений" в строчку на 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)
Замена слов Репутация и Позитив в Профиле Топика на свои через css (Актуально для форумов Русфф)
В HTML верх
Я не много не разбираюсь подойдет ли мне для Русфф, но как вижу подошло.
Интересно это будет отображаться во всех браузерах? В хроме отображается.
Спс.
Я не много не разбираюсь подойдет ли мне для Русфф, но как вижу подошло.
Ссылку на форум, у русфф, за ссылкой, внизу создать бесплатный форум стоит такой логотип © 2007–2016 «QuadroSystems» LLC
Ссылку на форум, у русфф, за ссылкой, внизу создать бесплатный форум стоит такой логотип © 2007–2016 «QuadroSystems» LLC
Спс. У меня такое внизу не написано.
Меняем оформление полей с автозаполнением и в фокусе
(для браузеров Webkit - Хром, новая Опера, Яндекс и т.п.)
/*оформление поля с автозаполнением*/
:-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
Внутренняя Тень на Аватарке
(Идея Grey_Fox, автор кода kolobdur74, ну и поправки от меня)
Ставим В Конец Второго Окна стилей( или в 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 и т.п.
Кстати, что то не увидел здесь смену Названий Меню через 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)
Единственное не придумал как оставить отображение новых сообщений..
Чтобы оставить количество приходящих сообщений, но при этом изменить слово:
<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; - регулируем отступ от Нового слова до количества сообщений..
kolobdur74
А можно же так и картинкой заменить?
Вы здесь » Единый форум поддержки » Новые возможности форумов » CSS трюки