Новая рубрика, первый ап нашей CMS

 

Доброго времени суток дорогой читатель Блога RS! Сегодня блогу исполняется 3 месяца, и именно сегодня я хочу открыть новую рубрику на блоге - "Улучшения". В этой рубрике мы будем улучшать возможности нашего блога! Первое, что я делал при создание пользовательской части, это верстал шаблон для блога. Ничего особенного там не было, именно поэтому, первым улучшением будет смена дизайна нашей CMS. Шаблон который мы прикрутим к пользовательской части блога, мы верстали в цикле статей "Верстка макета, подробнее" тут, тут и тут.

 

 

Вот что у нас должно получится

Процесс прикрутки довольно простой! Мы просто будем вырезать определенные части кода из готового макета, прописывая в строки код слова и вставлять, эти кусочки кода, в отдельные файлы в папке templates нашей пользовательской части. Тут правда есть одна маленькая загвоздка, мы не оформляли формы в макете, но это не проблема, создадим пару стилей прям во время прикрутки шаблона

 

Стили CSS

 

Первым делом перенесем стили в корень нашего блога.

Вот код стилей

body
{
background-image:url(img/bg.jpg);
background-position:left top;
margin:0px;
font-family:Trebuchet MS;
font-size:12px;
font-weight:100;
}
.left
{
background-image:url(img/left.png);
background-position:left;
background-repeat:repeat-y;
}
.right
{
background-image:url(img/right.png);
background-position:right;
background-repeat:repeat-y;
}
.center{background-color:#fff;padding-top:50px;}
.left_bottom
{
background-image:url(img/left_bottom.png);
background-position:left top;
background-repeat:no-repeat;
}
.right_bottom
{
background-image:url(img/right_bottom.png);
background-position:right top;
background-repeat:no-repeat;
}
.bottom
{
background-image:url(img/bottom.png);
background-position:top;
background-repeat:repeat-x;
}
.top_bg
{
height:80px;
position:absolute;
width:100%;
top:0px;
background-image:url(img/top_bg.png);
background-position:left top;
background-repeat:repeat-x;
z-index: 2;
}
.img_right_bottom
{
width:317px;
height:284px;
position:fixed;
right:0px;
bottom:0px;
background-image:url(img/img_bottom.png);
background-position:right bottom;
background-repeat:no-repeat;
z-index: 0;
}
.table
{
position:absolute;
top:0px;
left:50%;
margin-left:-390px;
z-index: 1;
}

.logo
{
position:absolute;
left:50%;
top:5px;
margin-left:-370px;
}
.border{border-left:1px solid #E8E8E8;}
.menu_title
{
border-left:5px solid #D9D9D9;
border-bottom:1px solid #D9D9D9;
width:163px;
text-align:center;
margin-left:16px;
font-size:14px;
}
.menu_link
{
border-bottom:1px solid #D9D9D9;
width:162px;
margin-left:16px;
padding:3px;
}
.title_txt
{
height:32px;
background-image:url(img/fon_title.jpg);
background-position:top left;
background-repeat:no-repeat;
padding-top:5px;
padding-left:10px;
font-size:15px;
}
.txt
{
text-align:justify;
padding-left:0px;
padding-right:10px;
padding-bottom:5px;
}
.end
{
background-image:url(img/bottom.jpg);
background-position:bottom center;
background-repeat:no-repeat;
height:13px;
}

Размещать файл стилей необходимо именно в корне нашего скрипта, так как в стилях прописаны пути к изображениям из корня

 

Изображения

 

Теперь перенесем все содержимое папки img в одноименную папку в пользовательской части блога.

 

Главный шаблон

 

Открываем пользовательский index.html и заменяем там весь код на код из макета. В идеале, Вы должны переписать все переменные и код слова, что находятся в каждом файле, но сейчас это не нужно, я Вам подскажу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- ГОЛОВА -->
<head>
<title><?=$header_title?></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="<?=$header_metaD?>">
<meta name="keywords" content="<?=$header_metaK?>">
<!-- СТИЛИ -->
<link rel="stylesheet" href="style.css" type="text/css">
<!-- СТИЛИ -->
</head>
<!-- ГОЛОВА -->
<!-- ТЕЛО -->
<body>
<!-- ВЕРХНЯЯ БЕЛАЯ ПОЛОСКА -->
<div class="top_bg"><img class="logo" src="img/logo.png" border="0px"></div>
<!-- ВЕРХНЯЯ БЕЛАЯ ПОЛОСКА -->

<!-- ТАБЛИЦА -->
<table class="table" width="780px" height="700px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="left" width="25px"></td>
<td class="center" valign="top">

<table width="730px" height="500px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>

<!--ЛЕВЫЙ БЛОК-->
<td valign="top">
<!--МИНИ ТЕКСТ-->
<div class="title_txt">Простейшая страничка на html</div>
<div class="txt">Текст</div>
<div class="end"></div>
<!--МИНИ ТЕКСТ-->
</td>
<!--ЛЕВЫЙ БЛОК-->


<!--ПРАВЫЙ БЛОК-->
<td class="border" width="210px" valign="top">
<!--МЕНЮ-->
<div class="menu_title">Меню</div>
<div class="menu_link">Пункт</div>
<!--МЕНЮ-->
</td>
<!--ПРАВЫЙ БЛОК-->
</tr>
</table>

</td>
<td class="right" width="25px"></td>
</tr>

<tr>
<td class="left_bottom" width="25px" height="25px"></td>
<td class="bottom"></td>
<td class="right_bottom" width="25px" height="25px"></td>
</tr>
</table>
<!-- ТАБЛИЦА -->

<!-- УЗОР В ПРАВОМ НИЖНЕМ УГЛУ -->
<div class="img_right_bottom"></div>
<!-- УЗОР В ПРАВОМ НИЖНЕМ УГЛУ -->
</body>
<!-- ТЕЛО -->
</html>

Вместо стилей я прописал ссылку на файл который мы создавали

<link rel="stylesheet" href="style.css" type="text/css">

Так же я прописал переменные в шапке ( head ) нашего кода

<title><?=$header_title?></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="<?=$header_metaD?>">
<meta name="keywords" content="<?=$header_metaK?>">

Теперь давайте править по порядку каждый файл из папки templates

 

Мини новости news.html

 

Из index.html вырезаем код который находится между

<!--МИНИ ТЕКСТ-->
...
<!--МИНИ ТЕКСТ-->

и вставляем в файл мини новостей. Подставим код слова, и получим вот такой результат

                    <!--МИНИ ТЕКСТ-->
<div class="title_txt">[_title]</div>
<div class="txt">
[_text]
<p align="right"><a href="?blog=[_id]">Читать дальше</a></p>
</div>
<div class="txt">Автор: [_author] | [_date_b]</div>
<div class="end"></div>
<!--МИНИ ТЕКСТ-->

В главном шаблоне index.html изменяем весь левый блок таким образом

                <!--ЛЕВЫЙ БЛОК-->
<td valign="top">
<?=$txt?>
</td>
<!--ЛЕВЫЙ БЛОК-->

 

Полный текст text.html

 

Этот шаблон очень похож на предыдущий, единственная разница это вместо кнопки "читать дальше" мы вставим кнопку назад

                    <!--ТЕКСТ-->
<div class="title_txt">[_title]</div>
<div class="txt">
[_text]
<p align="right"><a href="javascript:history.go(-1);">Назад</a></p>
</div>
<div class="txt">Автор: [_author] | [_date_b]</div>
<div class="end"></div>
<!--ТЕКСТ-->

 

Меню menu.html

 

Из главного шаблона index.html вырежем вот этот код

                    <!--МЕНЮ-->
<div class="menu_title">Меню</div>
<div class="menu_link">Пункт</div>
<!--МЕНЮ-->

вставим его в файл menu.html добавив код слова и оформив ссылку, получим

                    <!--МЕНЮ-->
<div class="menu_title">Меню</div>
[_divmenu]
<div class="menu_link"><a style="color:#333333;" href="[_href]">[_link]</a></div>
[_divmenu]
<!--МЕНЮ-->

В главном шаблоне изменим правый блог вот так

                <!--ПРАВЫЙ БЛОК-->
<td class="border" width="210px" valign="top">
<?=$menu?>
</td>
<!--ПРАВЫЙ БЛОК-->

 

Новые стили

 

Нам осталось переправить три файла. Две форма и оформить вид комментариев. Я накидал стили, вот код оформления ссылок

a:link {color:#63A7CC; text-decoration:none;}
a:visited {color:#63A7CC; text-decoration:none;}
a:hover {color:#63A7CC; text-decoration:none;}
a:active {color:#63A7CC; text-decoration:none;}

Вот код оформления комментариев

.comm
{
text-align:justify;
padding:5px;
margin-right:10px;
margin-top:10px;
border:1px solid #dcdcdc;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

Вот код оформления текстовых полей

.input
{
width:500px;
font-family:Trebuchet MS;
font-size:12px;
margin-bottom:5px;
border:1px solid #dcdcdc;
padding:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

А это стиль кнопки у форм

.sub
{
font-family:Trebuchet MS;
font-size:12px;
background-color:#fff;
border:1px solid #dcdcdc;
padding:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

Пожалуй единственное с чем Вы тут не сталкивались, это вот этот код

    border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;


Эти строки позволяют закруглять углы ( а именно левый верхний, правый верхний, нижний левый и нижний правый угол ) на 5 пикселей. Этот стиль не работает в IE но это не беда, в IE много чего не работает, он вообще не такой как все!

Прописываем эти стили в наш файл стилей style.css

 

Оформление комментариев comm.html

 

Вот не большой, и очень простой код

<div class="comm">
<div style="font-size:10px;">[_author] ( [_date_b] ) пишет:</div>
[_text]
</div>

 

Оформление формы комментариев comm_form.html

 

Тут тоже ничего сложного, просто проставил нужный класс, и все

<p>Оставить комментарий</p>
<form action="index.php?blog=[_id]" method="post" name="form">
<input name="id_comm" type="hidden" value="[_id]">
<br>
<input class="input" name="author_comm" type="text" value="Автор*">
<br>
<textarea class="input" name="txt_comm" rows="10">Введите текст*</textarea>
<br><br><input class="sub" type="submit" value="Оставить комментарий">
</form>

 

Оформление формы контактов contacts.html

 

Аналогично предыдущему шаблону

<p style="width:500px;" align="center">Если Вам нужно, по какой то причине связаться со мной, то Вы можете это сделать через форму обратной связи, которую Вы видите ниже.</p><br>
<form action="index.php?contact=1" method="post" name="form2">
<input class="input" name="author_contact" type="text" value="Введите ник*">
<br>
<input class="input" name="email_contact" type="text" value="E-mail*">
<br>
<input class="input" name="them_contact" type="text" value="Тема*">
<br>
<textarea class="input" name="txt_contact" rows="10">Введите текст*</textarea>
<br>
<p><input class="sub" type="submit" value="Отправить сообщение"></p>
</form>

 

Заключение

 

В посте очень много кода, это может отпугнуть, но поверьте мне на слово, я прикручивал новый дизайн минут 10-15 не больше. Его сложнее создать чем прикрутить Я когда доделал, подумал о том, что когда-нить я свой блог переведу именно на эту CMS

Что касается следующих постов. Я распланировал первые пополнения новой рубрики. В следующих двух постах, мы с Вами напишем установочный файл для нашего блога, и я Вам выложу архив скрипта, плюс научу ставить его... А далее уже буду писать для блога новые возможности. Так, что не пропускайте новые посты.

Если есть какие вопросы, или просто отзывы/пожелания/критика, пишите комментарии

Удачи Вам, у меня все!

Исходник
 

Возможно Вам будут интересны следующие заметки

Комментарии (15)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Aldous, 06 Января 2012 г. 19:15 пишет:
Гость
Ох, не любят поисковики такие посты, хоть и индексируют. По дурацким соображениям вычисляют только полезной на их взгляд часть: чистую болтовню + картинки.
У самого та же самая проблема,наплодил в блоге кодов, теперь навёрстываю=)
Rio-Shaman, 06 Января 2012 г. 19:29 пишет:
Автор
Именно поэтому необходимо рассказывать хоть что то про код, логику, назначение.
Ответ для пользователя: Aldous
Алекс, 06 Января 2012 г. 19:59 пишет:
Читатель
Долгожданная рубрика :)
светлана, 08 Января 2012 г. 19:49 пишет:
Гость
Для меня пока это еще сложно,хотя очень хочется. Люблю эксперименты, новшества, изменения. Но когда речь заходит о том, что нужно что-то менять в коде у меня панический страх. Я уже 5 раз сайт укладывала, что бедными были хостеры, но правда восстанавливали. Хотела сделать доску объявлений, уже и плагин нашла, но когда стала читать описание к установке бросила эту затею, т.к. опять нужно дописывать в коде, а как оно с темой сработает неизвестно. А вы молодец сразу чувствуется, что знаете чего хотите.
Rio-Shaman, 08 Января 2012 г. 20:07 пишет:
Автор
Эх, жаль, что я не селен в вордпрессе =( А так хочется помочь! Продолжайте искать, наверняка не у одной у Вас такие проблемы. А что б вордпресс не слетал на Вашем хостинге, тестируйте все новшества на локальном сервере. Найти инструкций по установки вордпресс на локальный сервер не составит труда...
Ответ для пользователя: светлана
Алексей, 25 Апреля 2012 г. 17:34 пишет:
Читатель
Друг, я пробежался быстро по стилям и по блокам и заметил, что ты задал для менюшки стиль прямо в <a>. Не думаешь ли перевести этот код в css? Так было бы поудобнее))) Но все класс)
Rio-Shaman, 25 Апреля 2012 г. 19:40 пишет:
Автор
Не, не думаю =) мне лень. Если хотите перенесите, от этого, работа шаблона не изменится...
Ответ для пользователя: Алексей
Игорь, 15 Июня 2012 г. 22:06 пишет:
Читатель
У меня опять вопрос) Текст статьи не переносится, а идет в одну строку. Думал, что ошибка в стилях, дошел до этой статьи, но строка все равно не переносится и портит общий дизайн еще, я скачал другой шаблон, переношу его, а строка все равно не переносится) Сделал вывод: что то не так с базой, или модулями). Заранее благодарю за наставление меня на ошибку!)
Rio-Shaman, 15 Июня 2012 г. 23:06 пишет:
Автор
Боюсь я не смогу Вам помочь, ибо не имею малейшего понятия что Вы наблюдаете. Я не встречал таких случаев =(
Ответ для пользователя: Игорь
Rio-Shaman, 15 Июня 2012 г. 23:37 пишет:
Автор
Загрузите скрин на radikal.ru, и разместите ссылку на этой странице. Дайте хоть глянуть как выглядит Ваша проблема, а то сложновато понять что у Вас там...
Ответ для пользователя: Игорь
Игорь, 17 Июня 2012 г. 13:45 пишет:
Читатель
Вот - http://s15.radikal.ru/i188/1206/88/310187b5c376.jpg
Rio-Shaman, 17 Июня 2012 г. 14:33 пишет:
Автор
Так данный "Эффект" в пределах нормы. Вы попробуйте вставить именно текст, с пробелами и переносами, и все нормально будет.
Ответ для пользователя: Игорь
Игорь, 17 Июня 2012 г. 22:28 пишет:
Читатель
Блин) Спасибо большое) В следующий раз 100 раз сам перепроверю, прежде чем задавать вопрос)
Ответ для пользователя: Rio-Shaman
Виктор, 04 Февраля 2014 г. 21:37 пишет:
Читатель
Добрый день, хотелось бы узнать как Вы создали автоматическую нумерацию div блоков, при добавлении комментариев, каждый добавленный комментарий у Вас увеличивается на 1, то есть блоку div присваивается измененное название.
Алексей, 08 Февраля 2014 г. 22:52 пишет:
Автор
Нет. Они не увеличиваются на 1. Это ID комментария в базе данных. Просто так получилось, что данные комментарии (на этой странице) публиковались по порядку.
Ответ для пользователя: Виктор