ZorNet.Ru — сайт для вебмастера » HTML и CSS » Поставить кнопку перед названием материала

Поставить кнопку перед названием материала

Здесь вы можете поставить на сайте кнопку или другой знак на вид материала перед названием. Здесь будет идти ссылка, где ставим ее вид материала файлов или другого модуля. И стили в CSS, где вы можете отредактировать, это выставить по центру и сделать между знаком, что установили и самим названием пробел. Также можете применить здесь шрифтовые иконки или свою тематическую кнопку или знак по тематике сайта.

Но здесь вы видите яркую кнопку на темном фоне, что альтернатива есть и много на замену.

Красивая кнопка перед титле вид материалов

Это вид материала перед титле.

Код

В CSS и потом выставляем как вы видите и как нужно.

Код

.po {
  float: left;
  margin: 5px 7px 10px 0px;
}

24 Августа 2017 Просмотров: 1289 Комментариев: (7)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Комментарии: 7

Порядок вывода комментариев:

Critic© 24 Августа 2017 18:22¹

Если ставить шрифтовые иконки, то нужно все по другому делать, и не забываем, что иконка будет автоматически по размеру с первой заглавной буквой. Лучше ссылку, просто есть очень много сайтов, где можно найти и формат такой PNG и по размеру выбрать

Kosten 24 Августа 2017 18:43²

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

-SAM- 25 Августа 2017 01:22³

Так неправильно делать, нужно выводить всё через стиль. Прописывать же в вид материала через img - это довески, которые только увеличивают исходный код страницы (да и от материала этого ни чего не возьмут для себя нового, что просто вывод картинки).

В виде материалов находим $TITLE$ и заменяем на:

Код

<span class="po"></span>$TITLE$

Стили будут такими:

Код

.po {display:inline-block; width:20px;height:20px; background:url('https://zornet.ru/Aben/ABGEA/FT/play-online.png') no-repeat left; float:left; margin-right:4px;}

Соответственно размер (width, height) делаем под высоту строки и высоту самой иконки. Смешение (float) влево в данном случае можно и не ставить, но оно влияет на вывод текста заглавия материала, когда он идёт в несколько строк. Пробела между заглавием и иконкой тоже делать не нужно, его задано отступом (margin).
Пример использования: можно сделать иконки для категорий, чтобы перед названием материала выводилась своя иконка категории, в которой материал находиться.

Kosten 25 Августа 2017 01:26⁴

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

-SAM- 25 Августа 2017 01:42⁵

Да, вот еще подумал - там смещение нужно, когда само заглавие материала отцентровали, например, что когда иконку нужно вывести слева, от начала строки этой с заглавием (тут уже от вида материала зависит, у кого как).

First-1 25 Августа 2017 09:38⁶

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

Kosten 25 Августа 2017 12:41⁷

Вот что то не подумал о адаптаций, хотя не мешает, просто смотрится уже по другому, что не должно на мобильном быть.

Оставь свой отзыв