Добавляем стилей в свою тему WordPress
Давайте теперь украсим немного свой сайт, расставим отступы. Изменим стили оформления, чтобы наш сайт стал похожим на нормальный.
- Если присвоен класс <div class=»header»></div>, то в стилях ставится точка: .header
- Если id <div id=»footer»></div>, тогда в стилях обозначается решёткой #footer
- Если просто <header></header>, то ничего не ставится, просто обозначаем header
Первое раскрашиваем шапку:
.header {
grid-area: header;
background: #2271b1;
text-align: center;
}
Меняем цвет серый на синий: # cccccc на background: #2271b1;
Размещаем текст по центру: text-align: center;
Меняем цвет ссылки в шапке на белый и размещаем по центру text-align: center;:
.header a{
color: #ffffff;
}
Аналогично подвал сайта, только делаем не ссылки, а текст белым color: #ffffff;
В шапке мы добавили букву «а» в стили, так в .css обозначается ссылка. .header a
#footer {
grid-area: footer;
background: #000000;
text-align: center;
color: #ffffff;
}
Дальше аналогично сделаем белый фон для записей и добавим отступы для текста padding, весь код файла style.css
получился таким:
/*
Theme Name: MyNewNytheme
Author: Vedernickov Sergey Nikolaevich gorod Saratov
Author URI: https://www.vedernickov.ru
Description: Мой первый адаптивный шаблон WordPress, MyNewNytheme
Version: 1.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/*-----------------------сетка сайта, расположение блоков-------------------*/
body {
display: grid;
grid-template-areas:
"header header header"
"nav article aside"
"footer footer footer";
grid-template-rows: .1fr 1fr .1fr;
grid-template-columns: .5fr 1fr .5fr;
grid-row-gap: 2px;
grid-column-gap: 2px;
height: 100vh;
margin: 0;
background: #ffffff;
}
/* мобильная версия/viewports. */
@media all and (max-width: 800px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"aside"
"footer";
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
height: 100vh;
margin: 0;
background: #cccccc;
}
}
/*--------------------------шапка---------------------------------*/
.header {
grid-area: header;
background: #2271b1;
text-align: center;
padding: 15px;
}
.header a{
color: #ffffff;
}
/*---------------------------подвал--------------------------------*/
#footer {
grid-area: footer;
background: #000000;
text-align: center;
color: #ffffff;
padding: 10px;
text-align: center;
}
/*-------------------------------тело сайта----------------------------*/
#article {
grid-area: article;
background: #ffffff;
color: #222222;
padding: 10px;
}
/*--------------------------левый сайдбар---------------------------------*/
#nav {
grid-area: nav;
background: #cccccc;
padding: 10px;
}
/*------------------------------правый сайдбар-----------------------------*/
#aside {
grid-area: aside;
background: #cccccc;
padding: 10px;
}
/*-----------------------------------------------------------*/
Скриншот:
Добавим ещё стиль заголовка h1 в тему и уберём подчёркивание ссылок в файл style.css после всех записей дописываем:
h1 {
font-size: 22px;
font-weight: bold;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
a {
color: #3f5f7c;
text-decoration: none;
}
В файле header.php заключаем заголовок в h1.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?> »
<?php is_front_page() ? bloginfo('description') : wp_title(''); ?>
</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="header">
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a>
</h1>
</div>
Предыдущая запись смотреть здесь.
Продолжение здесь.
Скачать заготовку: скачать.
Автор: admin
Метки: Wordpress, адаптивная, вордпресс, оформления, своя, тема
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Добавить комментарий