» »

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

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

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

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

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

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

Код
<img src="http://zornet.ru/Aben/ABGEA/FT/play-online.png" class="po" alt="ZORNET.RU - Сайт про uCoz">


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

Код
.po {  
  float: left;  
  margin: 5px 7px 10px 0px;  
}
24.08.2017 Просмотров: 398 Комментарий: (7)

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

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

Комментарий: 7
Critic©
Critic© 24.08.2017 18:221
0
Если ставить шрифтовые иконки, то нужно все по другому делать, и не забываем, что иконка будет автоматически по размеру с первой заглавной буквой. Лучше ссылку, просто есть очень много сайтов, где можно найти и формат такой PNG и по размеру выбрать
Kosten
Kosten 24.08.2017 18:432
0
Здесь лучше найти то изображение, что больше или по дизайн или по тематике. Если говорить о кино сайте, то можно кино ленту поставить, так и на остальные темы. На темный сайт поставил светло желтую кнопку, она ярко смотрится.
-SAM-
-SAM- 25.08.2017 01:223
+1
Так неправильно делать, нужно выводить всё через стиль. Прописывать же в вид материала через img - это довески, которые только увеличивают исходный код страницы (да и от материала этого ни чего не возьмут для себя нового, что просто вывод картинки).

В виде материалов находим $TITLE$ и заменяем на:
Код
<span class="po"></span>$TITLE$
Стили будут такими:
Код
.po {display:inline-block; width:20px;height:20px; background:url('http://zornet.ru/Aben/ABGEA/FT/play-online.png') no-repeat left; float:left; margin-right:4px;}
Соответственно размер (width, height) делаем под высоту строки и высоту самой иконки. Смешение (float) влево в данном случае можно и не ставить, но оно влияет на вывод текста заглавия материала, когда он идёт в несколько строк. Пробела между заглавием и иконкой тоже делать не нужно, его задано отступом (margin).
Пример использования: можно сделать иконки для категорий, чтобы перед названием материала выводилась своя иконка категории, в которой материал находиться.
Kosten
Kosten 25.08.2017 01:264
0
Здесь полностью согласен, не дело под титле ссылку ставить, через стили будет правильным решением.
-SAM-
-SAM- 25.08.2017 01:425
0
Да, вот еще подумал - там смещение нужно, когда само заглавие материала отцентровали, например, что когда иконку нужно вывести слева, от начала строки этой с заглавием (тут уже от вида материала зависит, у кого как).
First
First 25.08.2017 09:386
0
Как по мне, так именно на этом виде материалов выглядит уродливо, так как под плоский дизайн лучше ставить плоскую иконку, а не дизайнерскую, плюсом и адаптивность корчат. Пробовал ставить за место неё пакет с фри картофелем, трубку мобильника маленькую, так как сайт позволяет просмотр с аппаратов, и выглядит на много лучше с плоской иконкой размером 16x16. Что касается шрифтовых, так их там можно спокойно применить и задать отступы и размер шрифта, обвернув при этом в строчный класс со стилями, либо же добавить стили к самой иконке, ну на крайняк через неразрывный пробел.
Ну а так может кому-то пригодится, как идея, материал ну или сам код.
Kosten
Kosten 25.08.2017 12:417
0
Вот что то не подумал о адаптаций, хотя не мешает, просто смотрится уже по другому, что не должно на мобильном быть.
avatar