shoogrblog

Недавно мне пришлось найти решение для изменения обрезки фото для миниатюр в WordPress. По дефолту миниатюра обрезается по центру, чтобы сделать обрезку сверху нужно добавить следующий код в файл functions.php:

PHP код:

function px_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
  
// Change this to a conditional that decides whether you want to override the defaults for this image or not.
if( false )
return $payload;
  
if 


...

Для того чтобы затемнить или осветлить изображение, наложить полупрозрачный цвет на него, можно использовать класс:

.img-bg-color {
background-image:linear-gradient(rgba(0, 188, 212, 0.78), rgba(0, 188, 212, 0.78)),url('http://background_image/');
}

Как часто возникала необходимость сделать каталог товаров с возможностью отправки заявки на почту. Сделать это можно с помощью Contact Form 7 на WordPress, если форма открывается в lightbox.
Создается форма с полем:
[text model id:model class:myclass readonly], значение model указывается в отправляемом...

Чтобы установить треугольник (стрелку-указатель) снизу выбранного пункта меню, нужно добавить код для current item:

Код HTML:

.main-navigation ul li.current-menu-item a::after,
.main-navigation ul li.current_page_item a::after {
    content: '';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;/* center triangle */
    margin-left: -10px;

...

Работает во всех браузерах

Код HTML:

.form-back{
 background: rgba(255,255,255,.5);
  font-size: 14px;
  margin: 0 0 22px;
  overflow: auto;
  padding: 20px;
  text-align:center;
}

Что такое бейдж?
Наглядный пример как это будет выглядеть:


Добавляем HTML код

Код HTML:

<button class="badge1" data-badge="6">Badge Notification Example</button> <br> <a href="" class="badge1" data-badge="27">Badge Notification Example</a>

Теперь стили CSS

Код:

.badge1 {
   position:relative;

...

Расскажу на примере шин.

Заходим Каталог → Фильтры добавляем новый фильтр с названием характеристики товара.

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

Код:

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Такой счетчик очень удобен тем, что не нужно каждый раз переставлять дату. Раньше пользовалась Uji Countdoun для WP.
Для чего нужен такой счетчик? Естественно, чтобы заставить посетителя купить прямо сейчас, а то завтра будет слишком поздно.

Пришлось "стянуть" скрипт с существующей страницы на WP.

Туда, где должен отображаться счетчик, надо вставить код:

Код:

<div class="ps_countdown_wrap">

...

Простенький, но пока не локализованный виджет погоды для сайта на Blogger.
Если вы используете дефолтный шаблон, то проще всего делать через меню Шаблон - Настроить, там выбрать Дополнительно - Добавить CSS, и добавляем:

Код:

.MyWeatherDiv .centerContainer {
    width: 300px;
    text-align: left;
    margin-bottom: 200px;
}
.green {
    color: #a6e22d;
}
.teal {
    color: #66d9ef;
}
.purp {
    color:

...