Работа с темой CSS стили

Дизайн сайта с помощью CSS

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

Шапка сайта или заголовок (header.php) во вкладке слева консоли wordpress, внешний вид, далее редактор тем, слева папки в окошке редактора, выбираем header. Сюда залезаем, когда надо добавить действия в шапке, например вставка текста, или указание ссылок для новых шрифтов.

Редактирую header или шапку

Открываю внешний вид в консоли, далее настроить перехожу на сайт, слева колонка на белом фоне. Спускаюсь по меню в самый низ и нахожу вкладку дополнительные стили.

Для увеличения высоты верхней части страницы и вставки туда изображения прописываю

Skrin Shapki

.header{ height:400px;
background: url(http://cafe-yalta.ru/wp-content/uploads/2020/10/фон2.jpg),rgb(255,255,255,.0); background-position:30%,100%;
background-repeat: no-repeat;
background-clip:content-box;
background-size:cover;
background-origin: border-box; }

.header-это название класса (очень грубо говоря, имя) элемента который моы хотим увеличить, height– это высота, background– это фон с указанием ссылки где брать изображение. Для этого можно загрузить нужное изображение на сайт. Выберите слева в меню в консоли медиафайлы, добавить новое изображение. После этого у него будет адрес, которые можно указать в ссылке.

Imya Klassa Elementa

Имя(название класса) можно посмотреть через консоль браузера, на изображении выше подчеркнуто красным цветом

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

Добавляю кнопку “позвонить” и текст в шапку

Далее мне нужно добавить текст, белого цвета на изображение и кнопку.

Для этого захожу в редактор тем в консоли, нахожу шапку и прописываю, как указано на изображении. Но перед тем, как что менять в редакторе, делайте резервную копию сайта. Если пойдёт что-то не так, будет возможность быстро всё вернуть.

Редактировать темы

Обратите внимание что я добавила html теги внутрь блока(div) labels(от 1 до 2) ибо стили для редактирования и изменения параметров мы будем писать именно для него

Надпись обозначена в итоге “labels”, если на текст навести мышку, и нажать правую кнопку мышки, можно исследовать этот элемент отдельно. Так, когда мне нужно узнать, как называется деталь сайта сделанная разработчиком, пользуюсь этой функцией.

Redaktiruem Zagolovok

Media-запросы(@media) нужны нам для того чтобы определить для смартфона и компьютера немного разный вид, color – это цвет текста, font-size – это его размер, text-align – это выравнивание самого текста внутри блока, а margin – нужен для центрирование блока в шапке.

@media (max-device-width: 1000px)
.labels {
text-align: center;
color: white;
font-size: 30px;
position: absolute;
top: 27%;
margin-left: -2%;
margin-right: 2px;
}


@media (min-device-width:1001px){
.labels{
text-align:center;
color:white;
font-size:30px;
position:absolute;
top:200px;
margin-left:18%;
}

Теперь перехожу изменению цвета темы по всему сайту.

Меняю цвет темы с оранжевого на бордовый

Также в дополнительных стилях. По аналогии нахожу элементы узнаю их имя класса и например меняю цвет фона заголовков написав

.section-title { background: #930909; }

Для нижней части(футера) прописываю:

.copyright-wrapper {
padding: 15px 0;
background-color: #930909;
}

Мой цвет #930909-бордовый в rgb.

Пример

Если у вас есть возможность зайти в редактор стилей, вы можете поменять любые детали на желаемый цвет. У меня почему-то стили не переехали с основной на дочернюю тему. Поэтому пишу отдельно.

Вот, что получилось.

Shapka Konechnyj Rezultat

Всё остальное легко сделать через боковую панель темы, нажав на кнопку настроить вверху панели сайта.

На этом сегодня закончу, далее я буду продолжать работать над наполнением сайта контентом. Если интересно, заходите в гости http://cafe-yalta.ru/

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Капча загружается...