Преобразование стандартного шаблона Hueman

Приветствую всех моих читателей. Сегодня мы поговорим о дизайне и не много подкорректируем наш стандартный шаблон. Так сказать добавим в него изюминку. Если помните, то в предыдущей статье выбираем шаблон я говорил, что кое-какие элементы мы позаимствуем из платной версии шаблона Anew. Поставил два шаблона рядом для сравнения.

Мне понравились в сайдбаре круглые миниатюры изображений статей. Смотрится как-то изящней, чем просто квадратные. Плюс значок проигрывателя так же перенесем в центр из левого нижнего угла.

Меняем шаблон Hueman

Но прежде чем мы перейдем к изменениям, я бы хотел подстраховаться. Что это значит: тема наша скачена из репозитория, а это говорит о том, что для нее могут выходить обновления и исправления. Могут конечно и не выйти, но мы этого не знаем. А теперь представим, что произойдет, если мы внесем изменения в стилистику данной темы, а потом решим обновить шаблон. Верно! Все наши изменения пропадут и наш труд будет напрасен. Поэтому все вносимые изменения мы будем делать в отдельном файле и в случае обновления темы, мы не по пострадаем. Для этого создаем новый файл CSS. У меня это style-update.css

Файл создали, теперь подключим его. Для этого откроем наш родной файл файл style.css и пропишем в нем строчку:

1

@import url("style-update.css");

Тем самым мы подгрузим наш новый файлик, в котором и будем вносить все изменения.
Приступим: делаем изображения в сайдбаре круглыми.

Открываем наш новый файл style-update.css и пишем в нем следующий код:

1
2
3

.alx-tab img {  
 border-radius: 100%; 
}

Данный класс отвечает у нас на вывод изображений в сайдбаре. Команда border-radius делает 100% округление. Можете по эксперементировать, и задать разные проценты, тем самым увидите, как будет меняться внешний вид.

Теперь давайте центрируем кнопку Play на нашей миниатюре.

Для этого пишем следующий код наш файл по стилистике. Помним, что мы сейчас работает только с нашим новым созданным файлом и все изменения делаем в нем.

До изменений:

1
2
3
4

.alx-tab .thumb-icon.small {
    bottom: 8px;
    left: 8px;
}

После изменений:

1
2
3
4
5
6
7

.alx-tab .thumb-icon.small {
    bottom: 25px !important;
    left: 25px !important;
}
.fa-play {
    padding-left: 4px;
}

По моему так смотрится лучше, но как говорится дело вкуса.

Я очень часто использую вот такие вот пометки в тексте, чтобы выделить что-то важное или подчеркнуть свою мысль.

С уважением, Виктор