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

Photo

Сегодня мы с вами сделаем:

  • изменим панель навигации
  • изменим размер и фон шапки
  • изменим хлебные крошки
  • удалим лишние стили
  • изменим стиль контента

Начнём:

1.1. Откроем файл header.inc и после этой строки (42):

<!-- site header -->

вставим эти:

<!-- navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<?php get_navigation(get_page_slug(FALSE)); ?>
</ul>
</div>
</div>
</div>
<!-- end navbar -->

удалим эти строки (64-68):

<nav id="main-nav">
<ul>
<?php get_navigation(get_page_slug(FALSE)); ?>
</ul>
</nav>

1.2. Откроем файл ../theme/Photo/style.css и вместо этого кода (2-4):

body {
background:#EFEFEF;
}

вставим этот:

body {
padding-top: 40px;
}

удалим эти строки (11-18):

a:link, a:visited {
color:#316594;
text-decoration:underline;
}
a:hover, a:focus {
color:#222;
text-decoration:underline;
}

изменим это (5-10):

.wrapper {
width:950px;
margin:0 auto;
position:relative;
display:block;
}

на это:

.wrapper {
width:90%;
margin:0 auto;
position:relative;
display:block;
}

изменим это (12-19):

.header {
background: #6B94B4;
background: -moz-linear-gradient(top, #6B94B4 0%, #316594 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6B94B4), color-stop(100%,#316594));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B94B4', endColorstr='#316594',GradientType=0 );
height:80px;
border-bottom:#2B5780 1px solid;
}

на это:

.header {
background: #000 url('images/fonnavbar.png');
height: 180px;
}

1.3. Откроем папку ../theme/Photo/images и закинем в неё этот фон:

fonnavbar

1.4. Откроем файл ../theme/Photo/header.inc и вместо этих строк (68-72):

<p class="breadcrumbs" >
<span class="wrapper">
<a href="<?php get_site_url(); ?>">Home</a> &nbsp;&nbsp;&#149;&nbsp;&nbsp; <?php Innovation_Parent_Link(get_parent(FALSE)); ?> <b><?php get_page_clean_title(); ?></b>
</span>
</p>

вставим эти:

<p class="breadcrumb" >
<span class="wrapper">
<a href="<?php get_site_url(); ?>">Home</a> &nbsp;&nbsp;&#149;&nbsp;&nbsp; <?php Innovation_Parent_Link(get_parent(FALSE)); ?> <b><?php get_page_clean_title(); ?></b>
</span>
</p>

1.5. Откроем файл ../theme/Photo/style.css и вместо этого кода (16-45):

/* HEADER: breadcrumbs */
header .breadcrumbs {
text-shadow: 1px 1px 0px rgba(255,255,255,.5);
border-top:#FFF 1px solid;
border-bottom:#ccc 1px solid;
font-size:11px;
height:25px;
line-height:25px;
overflow:hidden;
color:#666;
text-transform:uppercase;
width:100%;
background: #eee;
background: -moz-linear-gradient(top, #EDEDED 0%, #D5D5D5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#D5D5D5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#D5D5D5',GradientType=0 );
}
header .breadcrumbs a:link,
header .breadcrumbs a:visited {
color:#666;
text-decoration:underline;
}
header .breadcrumbs a:focus,
header .breadcrumbs a:hover {
color:#316594;
text-decoration:underline;
}
#index header .breadcrumbs {
display:none; /* no reason to have breadcrumbs on homepage */
}

вставим этот:

/* HEADER: breadcrumbs */
#index header .breadcrumb {
display:none; /* no reason to have breadcrumbs on homepage */
}

1.6. Откроем файл ../theme/Photo/style.css и удалим эти строки (38-80):

/* HEADER: navigation */
header nav {
position:absolute;
top:30px;
right:0;
text-shadow: 1px 1px 0px rgba(0,0,0, .3);
}
header nav ul {
list-style:none;
float:right;
}
header nav li {
display:block;
float:left;
margin:0 0 0 10px;
}
header nav li a {
display:block;
font-size:13px;
padding:5px 15px;
text-transform:uppercase;
font-weight:bold;
}
header nav li a:link,
header nav li a:visited {
color:#eee;
text-decoration:none;
}
header nav li a:hover,
header nav li a:focus {
color:#FFF;
text-decoration:none;
}
header nav li.current a {
color:#FFF;
background:#7096B6;
background:rgba(255,255,255,.2);
text-decoration:none;
border-radius:40px;
-moz-border-radius:40px;
-khtml-border-radius:40px;
-webkit-border-radius:40px;
}

1.7. Откроем файл ../theme/Photo/style.css и вместо этого кода (39-50):

article {
float:center;
width:100%;
min-height:500px;
background:#fff;
border-bottom:1px solid #c8c8c8;
border-left:1px solid #e4e4e4;
border-right:1px solid #c8c8c8;
-moz-box-shadow: 2px 1px 10px rgba(0,0,0, .07);
-webkit-box-shadow: 2px 1px 10px rgba(0,0,0, .07);
box-shadow: 2px 1px 10px rgba(0,0,0, .07);
}

вставим этот:

article {
margin-top: 10px;
float:center;
width:100%;
min-height:500px;
background:#fff;
border: 1px solid #c8c8c8;
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
}

Смотрим результат:

Photo

Вроде не плохо. В следующих уроках будем дополнять наш шаблон деталями.