Блого-дарю | Записки человека интересующегося

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

17.11.2015 / 5 комментариев

Гаденькая проблемка, решение которой удалось найти не сразу. При попытке редактирования изображения в медиатеке WordPress (версия 4.3.1) изображение не загружалось и такая вот картина раздражала при каждой попытке отладить баг: При нажатии на любой инструмент редактирования выдается ошибка: Не удалось загрузить изображение для просмотра. Пожалуйста, обновите страницу и повторите попытку Вариант «откатывания» версии WP или «накатывания» … подробнее

Ошибка #1273 — Unknown collation: ‘utf8mb4_unicode_ci’ при импорте базы данных WordPress

13.11.2015 / Оставить комментарий

При переносе сайта на WordPress с денвера на хостинг возникла проблема при импорте БД: #1273 — Unknown collation: ‘utf8mb4_unicode_ci’ Могу ошибиться, но вроде данная проблема связана с тем, что WordPress свежих версий содержит emoji смайлы, но не в этом суть поста. Для решения проблемы необходимо открыть дамп базы любым редактором (например, Notepad) и сделать следующее: ‘utf8mb4_general_ci‘ заменить … подробнее

Как сделать ссылку некликабельной с помощью CSS

05.11.2015 / 2 комментария

Не понимаю, почему так редко попадается информация о том, как сделать ссылку некликабельной при том, что это вполне штатное действие. Для этого нужно прописать CSS-свойство pointer-events для ссылки напрямую, через класс или id:

a.unclickable {
    pointer-events: none; /* делает ссылку некликабельной */
    cursor: default; /* устанавливает курсор в дефолтное состояние (убираем значок пальца при наведени) */
    text-decoration: none; /* зачищаем намеки на ссылку, убирая нижнее подчеркивание */
}

1

2

3

4

5

a.unclickable {

pointer-events: none; /* делает ссылку некликабельной */

cursor: default; /* устанавливает курсор в дефолтное состояние (убираем значок пальца при наведени) */

text-decoration: none; /* зачищаем намеки на ссылку, убирая нижнее подчеркивание */

}

Ну и, соответственно, присваиваем ссылке класс .unclickable Пример: Ссылка Стоит заметить, что свойство pointer-events относится к спецификации CSS4, но в настоящий момент … подробнее

Как перевести из RGB в CMYK без потери цвета

29.10.2015 / 93 комментария

Часто возникает необходимость в переводе изображения из цветовой схемы RGB в CMYK и вечная проблема, сопровождающая этот перевод — потеря цветности изображения. Может профессионалы могут подсказать и более качественный вариант, но меня, как веб-мастера, иногда выполняющего услуги по дизайну полиграфии этот способ устраивает более чем, т.к. он устраивает моих заказчиков 😛 Стоит заметить, что 100% … подробнее

Как удалить пустые строчки в коде, написанном в SublimeText

07.10.2015 / 21 комментарий

На данном этапе работаю с одним сайтом на WorPress и столкнулся с одной проблемкой. Не то, чтобы это было проблемой, но мои перфекционистские замашки не дают мне покоя 🙂 Неприятность в том, что при работе с файлами через Sublime на хостинге, я получал после каждой строки кода 2-3 пустые строки. Порыскав в интернете сначала нашел … подробнее

Мультиязычный сайт на wordpress без плагинов

06.10.2015 / 19 комментариев

Впервые за три года работы с сайтами столкнулся с вопросом создания сайта wordpress на нескольких языках (в моем случае на трех — eng, fin, rus). Задачка вполне решаема. Есть здесь два пути, по которому нужно идти: Использовать плагины WP Без плагинов путем установки двух и более админок в одну папку домена В моем случае камнем … подробнее

Как вырезать объект с фотографии или изображения с сохранением фона

30.09.2015 / 1 комментарий

Достаточно интересная фишка, о которой я узнал совсем недавно. Если вам понравился фон, но на нем есть лишние объекты, либо просто необходимо с фотографии убрать другого человека или какую-то вещь и при этом сохранить фон, который в реальности находится за этим объектом, то в этом нам может помочь один из инструментов любимого PhotoShop’a. Что дано: … подробнее

Позиционирование блока через position:relative оставляет пустое пространство. Как убрать?

13.09.2015 / 5 комментариев

Половину дня потратил на решение проблемы с пустым пространством, возникающим вследствие позиционирования блока с помощью position:relative. В моем случае я перекрывал часть одного фона другим (такая вот дизайнерская задумка). Проблема заключалась в том, что после перемещения блока вверх, под ним появлялось пустое пространство, равное по высоте значению top. По некоторым ссылкам из поисковика натыкался на … подробнее

Растягивание фона изображения с сохранением на нем пропорций определенного объекта

11.09.2015 / Оставить комментарий

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд. Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас … подробнее

Добавление горизонтальных линий до и после заголовка или изображения на CSS

09.09.2015 / Оставить комментарий

Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант. Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

<div class="block">
    <span>ЗАГОЛОВОК</span>
</div>

1

2

3

<span>ЗАГОЛОВОК</span>

</div>

Для основной обертки используем следующие CSS-правила:

.block {
    text-align: center;  /* выравнивание заголовка по центру обертки */
    width: 80%;          /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди :-) */
    margin: 0 auto;      /* выравнивание обертки по центру документа */
    overflow: hidden;    /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */
}

1

2

3

4

5

6

.block {

text-align: center; /* выравнивание заголовка по центру обертки */

width: 80%; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди :-) */

margin: 0 auto; /* выравнивание обертки по центру документа */

overflow: hidden; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */

}

Для дочернего элемента <span> добавляем позиционирование, чтобы … подробнее