64prosto.ru » Оформление цитат, начало изменения темы.

Оформление цитат, начало изменения темы.

В файл .css добавил кусок кода, отвечающий за оформление цитат. ( blockquote )

Результат:

blockquote {
border-left-style: dashed;
background: #f6f6f0;
border-left-color: #b9cfa3;
color: #4e4e4e;
padding: 1%;
width: auto;
height: 170px;
overflow: auto;
}


Изменил цвета сайта на серо — зелёный. 

Разделил .CSS  шапки и подвала (.my-logo и footer ): 

.my-logo {
width: 100%;
padding-left: 5%;
font-size: 22px;
background-color: #c5daaf;
border: 1px solid #81ab64;
}

footer {
width: 100%;
padding-left: 1%;
margin-bottom: 0;
background-color: #1c1c1c;
border: 1px solid #202020;
color: #fcfcfc;
}

Весь файл .CSS получился пока таким:

/*
Theme Name: Newmytheme
Author: S.N.Vedernikov
Author URI: http://64prosto.ru
Description: Мой первый адаптивный шаблон WordPress
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

* {
box-sizing: border-box;
font-size: 17px;
}

h1 {
line-height: 60%;
}
p {
line-height: 1.5;
}

body {
background-color: #f9f9f9;
font-family: Helvetica;
margin: 0;
}

.my-logo {
width: 100%;
padding-left: 5%;
font-size: 22px;
background-color: #c5daaf;
border: 1px solid #81ab64;
}

footer {
width: 100%;
padding-left: 1%;
margin-bottom: 0;
background-color: #1c1c1c;
border: 1px solid #202020;
color: #fcfcfc;
}
body > header > h1 > a {
color: #000000;
font-weight: 400;
}
article > header {
background: #faf9f6;
border-radius: 4px;
}


a {
text-decoration: none;
color: #81ab64;
font-size: 20px;
}

/* ‘Margin: 0 auto’ centers block content on the page */
.wrap {
width: 99%;
margin: 0 auto;
}

.content-area {
display: inline-block;
}

.content-thin {
width: 74%;
}

.content-full-width {
width: 74%;
padding-left: 3%;
}

.content-area,
.primary-sidebar {
display: inline-block;
}

.primary-sidebar {
width: 25%;
padding: 2%;
vertical-align: top;
background-color: #ffffff;
border-left-color: #b9cfa3;
border-left-style: dashed;
background: #faf9f6;
}

.article-loop {
width: 49%;
text-align: left;
margin: 1px;
padding: 1%;
height: 350px;
overflow: auto;
border: 2px solid #c5daaf;
}

.article-full {
width: 99%;
padding: 1%;
}

.article-loop,
.article-full {
display: inline-block;
vertical-align: top;
background-color: #FFF;
border-radius: 4px;
margin-bottom: 4px;
}
/* цитаты */
blockquote {
border-left-style: dashed;
background: #f6f6f0;
border-left-color: #b9cfa3;
color: #4e4e4e;
padding: 1%;
width: auto;
height: 170px;
overflow: auto;
}
/* мобильность */
@media screen and (max-width: 800px) {
.article-loop {
width: 99%;
}
}
@media screen and (max-width: 600px) {
.content-area,
.primary-sidebar {
width: 100%;
}
}

/* верхнее меню */


nav{
background: #b9cfa3;
border: 1px solid #81ab64;
padding: 5px 10px;
color: #202020;
font-family: ‘Segoe UI’, sans-serif;
text-align: left;
}
nav li{
display: inline-block;
vertical-align: top;
}
nav a{
color: #202020;
padding: 5px 10px;
text-decoration: none;
border: 1px solid transparent;
transition: 0.3s;
}
nav a:hover{
border: 1px solid #202020;
}

input[type=»checkbox»] {
display: none;
}
nav label {
display: none;
border: 1px solid #202020;
padding: 5px 10px;
cursor: pointer;
transition: 0.3s;
}
nav label:hover{
color: #f00;
border: 1px solid #202020;
}


@media screen and (max-width: 500px) {

nav label{
display: inline-block;
}
nav > ul {
display: none;
}
input[type=»checkbox»]:checked ~ label + ul {
display: block;
}

}

Изменил page.php отдельная страница, весь файл:

<?php get_header(); ?>
<main class=»wrap»>
<section class=»content-area content-thin»>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=»article-full»>
<header>
<h2><?php the_title(); ?></h2>
Автор: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Извините, записи не были найдены!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

И оформил меню сайта весь файл header.php:

<!DOCTYPE html>
<nav>
<input type=»checkbox» name=»menu» id=»btn-menu» />
<label for=»btn-menu»>Меню</label>
<ul> <?php wp_nav_menu( array( ‘header-menu’ => ‘header-menu’ ) ); ?></nav>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo(‘name’); ?> &raquo; <?php is_front_page() ? bloginfo(‘description’) : wp_title(»); ?></title>
<meta charset=»<?php bloginfo( ‘charset’ ); ?>»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’); ?>»>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class=»my-logo»>
<h1><a href=»<?php echo esc_url( home_url( ‘/’ ) ); ?>»><?php bloginfo(‘name’); ?></a></h1>
</header>

 

Скриншот:

Автор: V.S.N

Предыдущая:

Следущая:

Метки: , , ,

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

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