Продолжим работу над сайтом фотографа.

PhotoGetSimple

Список задач на сегодня:

1. Копируем шаблон

2. Подключаем Bootstrap

3. Вырезаем лишнее

4. Изменим копирайты

5. Правим css

Приступим:

1.1. Откроем папку ../theme, копируем из неё папку Innovation, переименовываем её в photo и забрасываем в папку ../theme.

1.2. Заходим в админку — Тема: выбираем наш шаблон Photo.

2.1. Скачиваем bootstrap (http://twitter.github.com/bootstrap/), внутри архива лежит папка bootstrap, переносим её со всем содержимым в папку ../theme/Photo/

2.2. Открываем файл ../theme/Photo/header.inc и после этой строки (24):

<link href="<?php get_theme_url(); ?>/style.css?v=<?php echo get_site_version(); ?>" rel="stylesheet">

вставим эту:

<link href="<?php get_theme_url(); ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

а после этой строки (39):

<body id="<?php get_page_slug(); ?>" >

вставим эти:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

3. На сайте фотографа не нужен sidebar (боковая колонка), значит мы его удалим. Откроем файл ../theme/Photo/template.php и удалим эти строки (36-37):

<!-- include the sidebar template -->
<?php include('sidebar.inc.php'); ?>

4. Мы будем править шаблон, поэтому удалим эту строку из шаблона: Innovation Theme by Cagintranet, открываем файл ../theme/Photo/footer.inc и изменим эти строку (21-22):

<div class="left"><?php echo date('Y'); ?> <a href="<?php get_site_url(); ?>" ><?php get_site_name(); ?></a></div>
<div class="right">Innovation Theme by <a href="http://www.cagintranet.com" >Cagintranet</a> &middot; <?php get_site_credits(); ?></div>

на эту:

<div class="right"><?php get_site_credits(); ?><br /><?php echo date('Y'); ?> <a href="<?php get_site_url(); ?>" ><?php get_site_name(); ?></a></div>

5. Теперь нам нужно подправить стили, откроем файл ../theme/Photo/style.css и изменим это (127-138):

article {
float:left;
width:688px;
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 {
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);
}

ниже удалим это (239-298):

/* SIDEBAR */
aside {
float:right;
width:260px;
margin:40px 0 0 0;
}
aside .section {
padding:0 0 0 30px;
}
aside .section {
margin:0 0 40px 0;
font-size:11px;
line-height:16px;
color:#555;
text-shadow: 1px 1px 0px #fff;
}
aside .section p {
margin:0 0 15px 0;
}
aside .section ul,
aside .section ol {
margin:0 0 15px 20px;
}
aside .section h2 {
background:#333;
border-top:1px solid rgba(255,255,255,.4);
text-shadow: 1px 1px 0px rgba(0,0,0,.5);
text-transform:uppercase;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
font-family: 'Yanone Kaffeesatz', arial, helvetica, sans-serif;
font-weight:100;
color:#fff;
font-size:19px;
line-height:19px;
margin:0 0 20px -31px;
padding:5px 0 7px 25px;
border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
-khtml-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
}

/* SIDEBAR: socialmedia */
aside #socialmedia {
position:relative;
}
aside #socialmedia h2 {
width:65px;
background: #316594;
background: -moz-linear-gradient(top, #316594 0%, #2C5983 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#316594), color-stop(100%,#2C5983));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#316594', endColorstr='#2C5983',GradientType=0 );
}
aside #socialmedia .icons {
position:absolute;
top:3px;
right:0px;
}

Смотрим на результат нашей работы:

PhotoGetSimple

Продолжим в следующем уроке.