Архив метки: CSS

WooCommerce — как сократить длинные названия товаров

Полные названия товаров

На страницах категорий длинные названия товаров можно сократить, если это существенно не влияет на удобство пользователей. Например на сайте по продаже книг длинные названия можно сократить, так как названия дублируются на обложке книги.

Сократить до одной строки с многоточием

Названия товаров в одну строчку
Названия товаров в одну строчку

В настройках стилей темы изменить CSS свойства заголовка товаров:

h2.woocommerce-loop-product__title {
	white-space: nowrap; /* Отключаем перенос строк */
	overflow: hidden; /* Скрываем текст за пределами блока */
	text-overflow: ellipsis; /* Добавляем троеточие */
}

Сократить названия товаров до нескольких строк

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

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

@media (min-width: 768px) {
	h2.woocommerce-loop-product__title {
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Покажем полное название при наведении на карточку */
	.site-main ul.products.columns-4 li.product:hover h2.woocommerce-loop-product__title {
		color: grey;
		font-size: 1em!important;
		white-space: normal;
	}

	.site-main ul.products.columns-4 li.product:hover {
		box-shadow: 0px 5px 5px #ccc;
	}
}

Обратите внимание на медиа-запрос @media (min-width: 768px) . Это означает, что данные CSS-свойства будут работать только на десктопах. На планшетах и мобильных устройствах свойство hover не должно работать, так как нет эффекта наведения мышью.

Сообщение WooCommerce — как сократить длинные названия товаров появились сначала на Веб-студия Юсота.


Source: usota.ru woocommerce

CSS — медиа-запросы для различных устройств (@media)

Минимальный набор медиа-запросов для любого сайта на WordPress:

/* Desktop */ 
@media (min-width: 768px) {}

/* Desktop & Tablet */ 
@media (min-width: 481px) {}

/* Tablet landscape */ 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/* Tablet*/ 
@media (min-width: 481px) and (max-width: 767px) {}

/* Tablet & Mobile */ 
@media (max-width: 767px) {}

/* Mobile */ 
@media (max-width: 480px) {}

Полный гайд от Francesco Baldan

Сообщение CSS — медиа-запросы для различных устройств (@media) появились сначала на Веб-студия Юсота.


Source: usota.ru knowledge-base

pisa / xhtml2pdf, конвертер, написанный на Python (Перевод)

Какое-то время назад я познакомился с pisa, которая теперь называется xhtml2pdf. Она написана на Python и может быть использована для конвертации HTML/CSS в PDF.

Вот список некоторых возможностей xhtml2pdf:

  • Переводит HTML и CSS в PDF файлы
  • Написан только на Python и потому платформо-независим
  • Поддерживает колонки, заголовки, колонтитулы, номера страниц, пользовательские шрифты Postscript иTrueType и многое другое
  • Поддерживает фреймворки типа Django, Turbogears, CherryPy, Pylons, WSGI
  • Простая интеграция в программы на Python
  • Может быть использована как утилита командной строки для Windows, MacOS X and Linux (бинарники отсутствуют)

Выглядит, в общем, полезной штукой.

xhtml2pdf: конвертер HTML/CSS в PDF на Python

Согласно сайту, xhtml2pdf бесплатен для коммерческого и некоммерческого использования.

Источник

Автор: Ishayahu Lastov