Создать блог

shoogrblog

    Все, что хочется сохранить для последующего использования.

    1. Миниатюры в WordPress: обрезка top-center вместо дефолтного center-center

      08.11.2015 | WordPress |
      Buzz
      1982 Просмотров
      Недавно мне пришлось найти решение для изменения обрезки фото для миниатюр в 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 
      ...
    2. Наложение затемнения/осветления/цвета на фоновое изображение CSS

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

      .img-bg-color {
      background-image:linear-gradient(rgba(0, 188, 212, 0.78), rgba(0, 188, 212, 0.78)),url('http://background_image/');
      }
    3. Contact Form 7 для каталога

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

      25.08.2015 | WordPress , Дизайн |
      Buzz
      1273 Просмотров
      Чтобы установить треугольник (стрелку-указатель) снизу выбранного пункта меню, нужно добавить код для 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;
      ...
    5. Прозрачный фон для формы на CSS

      Buzz
      1689 Просмотров
      Работает во всех браузерах
      Код HTML:
      .form-back{
       background: rgba(255,255,255,.5);
        font-size: 14px;
        margin: 0 0 22px;
        overflow: auto;
        padding: 20px;
        text-align:center;
      }
    6. Как создать CSS Бейдж (Notification Badge)

      Buzz
      3120 Просмотров
      Что такое бейдж?
      Наглядный пример как это будет выглядеть:
      Нажмите на изображение для увеличения.  Название:	badge-300x153.png  Просмотров:	1624  Размер:	14.9 Кб  ID:	15506

      Добавляем 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;
      ...
    7. Настройка стандартного фильтра в OpenCart (ocStore 1.5.5.1.x)

      08.08.2014 | Opencart |
      Buzz
      15860 Просмотров
      Расскажу на примере шин.

      Заходим Каталог → Фильтры добавляем новый фильтр с названием характеристики товара.
      Нажмите на изображение для увеличения.  Название:	filtr1.jpg  Просмотров:	4543  Размер:	13.6 Кб  ID:	15215
      Сохраняем.
      Затем идем в карточку товара и добавляем на вкладке Связи название фильтра, иногда фильтр не находится автодополнением, введите в поле % и вам...
    8. Строгое оформление цитат CSS

      31.07.2014 | Дизайн |
      Buzz
      1489 Просмотров
      Код:
      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;
      }
    9. Таймер обратного отчета "до завтра" WordPress

      10.06.2014 | WordPress |
      Buzz
      2003 Просмотров
      Нажмите на изображение для увеличения.  Название:	countdown.jpg  Просмотров:	538  Размер:	12.1 Кб  ID:	14735

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

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

      Туда, где должен отображаться счетчик, надо вставить код:
      Код:
      <div class="ps_countdown_wrap">
      ...
    10. Виджет погоды для Blogger

      05.05.2014 | Blogger |
      Buzz
      1656 Просмотров
      Простенький, но пока не локализованный виджет погоды для сайта на Blogger.
      Если вы используете дефолтный шаблон, то проще всего делать через меню Шаблон - Настроить, там выбрать Дополнительно - Добавить CSS, и добавляем:
      Код:
      .MyWeatherDiv .centerContainer {
          width: 300px;
          text-align: left;
          margin-bottom: 200px;
      }
      .green {
          color: #a6e22d;
      }
      .teal {
          color: #66d9ef;
      }
      .purp {
          color:
      ...
    Страница 1 из 2 12 Последняя