Создать блог

shoogrblog

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

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

      08.11.2015 | WordPress |
      Buzz
      1087 Просмотров
      Недавно мне пришлось найти решение для изменения обрезки фото для миниатюр в 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
      4376 Просмотров
      Для того чтобы затемнить или осветлить изображение, наложить полупрозрачный цвет на него, можно использовать класс:

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

      25.08.2015 | WordPress , Дизайн |
      Buzz
      728 Просмотров
      Чтобы установить треугольник (стрелку-указатель) снизу выбранного пункта меню, нужно добавить код для 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
      1067 Просмотров
      Работает во всех браузерах
      Код 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
      1890 Просмотров
      Что такое бейдж?
      Наглядный пример как это будет выглядеть:
      Нажмите на изображение для увеличения.  Название:	badge-300x153.png  Просмотров:	1179  Размер:	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
      14780 Просмотров
      Расскажу на примере шин.

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

      31.07.2014 | Дизайн |
      Buzz
      1096 Просмотров
      Код:
      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
      1653 Просмотров
      Нажмите на изображение для увеличения.  Название:	countdown.jpg  Просмотров:	305  Размер:	12.1 Кб  ID:	14735

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

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

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

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