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

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

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



CSS трюки

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

1

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


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

+2

101

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

ну вот выложил:

Ну лучше span скрыть совсем:

#pun-navlinks li a span {display:none}

0

102

Mirra Bell написал(а):

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

Код:
<!--Меняем Названия в Меню на картинку через CSS-->
<style>
#navindex a:before {content:url(адрес изображения);width:20px;} /* Форум */
#navuserlist a:before {content:url(адрес изображения);width:20px;} /* Участники */
#navrules a:before {content:url(адрес изображения);width:20px;} /* Правила */
#navsearch a:before {content:url(адрес изображения);width:20px;} /* Поиск */
#navprofile a:before {content:url(адрес изображения);width:20px;} /* Профиль */
#navadmin a:before {content:url(адрес изображения);width:20px;} /* Администрирование */
#navlogin a:before {content:url(адрес изображения);width:20px;} /* Вход */
#navlogout a:before {content:url(адрес изображения);width:20px;} /* Выход */
#pun-navlinks li a span {font-size:0;}
</style>

Ширину ставим свою..

Для Сообщения:

Код:
<style>
#navpm a {position: relative;}
#navpm a:before {content:url(адрес изображения);width:20px;}
#navpm a span {
position: absolute;
left: 12px;
clip: rect(auto, auto, auto, 68px);
}
</style>

+3

103

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

#pun-navlinks li a span {display:none}

На всякий случай оставил))

0

104

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

На всякий случай оставил))

Ну я Пояснил тут, - ибо я не просто так это пишу  > Общие вопросы от новичков (59)

0

105

kolobdur74
может стоит добавить к CSS трюки ?

#navregister a:before {content:"Новый текст";} /* Регистрация */
#navextra1 a:before {content:"Новый текст";} /* Доп. пункт 1 */

@media screen and (max-width: 540px) {
#pun-navlinks li a:before {display:none}
}

Отредактировано Lidia-Lada (Вт, 9 Май 2017 20:12:23)

+1

106

Lidia-Lada
Добавил в код, поставил пометку

0

107

Аналог скриптовой реализации - на чистом CSS
Картинки OnLine/OffLine в Профиле в топике
В HTML верх (или в Конец Второго окна стилей, вынув из тегов <style>)

<style type="text/css">
.post .post-author.online >ul:after {
  content:url(http://savepic.ru/4647873.png)
}
.post:not([data-group-id="3"]) .post-author:not(.online) >ul:after {
  content:url(http://savepic.org/3595913.png);
}
.post .post-author>ul:after {
  margin-left:0px; /*подвижка слева*/
  margin-top:3px; /*подвижка сверху*/
  display:block;
}
</style>

Обновлено 28.06.2017 (убрана иконка у Гостей)

+2

108

Поскольку часто спрашивают код, - решил выложить тут:
Всплывающий текст в Шапке форума(при наведении)
В HTML верх:

<style type="text/css">
#tblWrap {
  position:relative;
}
#tblHover {
  position:absolute;opacity:0;
  top:
30px; /*подвижка сверху*/
  left:0px; /*подвижка слева*/
  margin:0px; /*отступы*/
  padding:0px; /*внутренние отступы*/
  width:100%; /*ширина*/
  height:240px; /*высота*/
  color:#CCC5B3; /*цвет шрифта*/
  background:#48362C; /*фон*/
  transition:opacity .6s ease-in-out; /*плавность появления*/
}
#tblHover:hover {
  opacity:1;
}
</style>

<div id="tblWrap"><div id="tblHover">
Текст со Всплытием при Наведении
</div></div>

Красное - меняем, регулируем... Вписываем свой текст

+3