vedernickov.ru

свободное место

Добавляем стилей в свою тему WordPress

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

  1. Если присвоен класс <div class=»header»></div>, то в стилях ставится точка: .header
  2. Если id <div id=»footer»></div>, тогда в стилях обозначается решёткой  #footer
  3. Если просто <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

#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'); ?> &raquo; 
<?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

Метки: , , , , ,

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.