Скрипты: Lasto Blog v.b, Стахановский Portator, nano-CMS and nano-CMS с модулем статистики
Автор: Сергей Гордиенко.
Введение
Внимание!
Представленный ниже документ никоим образом не является учебником или руководством по изучению языка гипертекстовой разметки – далее HTML, а так же спецификацией в урезанном виде по «Каскадным таблицам стилей» - далее CSS.
В данном документе отражены специфические моменты, свойственные только предложенному стилевому файлу, входящему в состав скриптов Мастера Lasto, как то:
Ранее все оформление было заключено в файлы стилей, расположенные в папке “css”:
С одной стороны, это упрощало работу непосредственно с каждым отдельным файлом, а название файла уже говорило о том, что в нем заключено и за что он отвечает. С другой стороны, множество мелких файлов не позволяло оперативно вносить изменения – вместо одного файла приходилось копаться сразу в нескольких.
С целью оптимизации скорости загрузки сайта и удобства работы, все стилевые файлы были сведены в один общий файл. Это позволило не только сократить размер файла, но и провести столь необходимую чистку, плюс максимально сгруппировать повторяющиеся параметры стилей.
Любителям чистоты кода и его валидации просьба не беспокоиться. Стилевой файл не проходит валидацию. Тем не менее, это ни в коем случае не мешает ему выполнять свои прямые обязанности, если и не с попиксельной точностью, то, как минимум, обеспечивая практически полную визуальную идентичность в OPERA 9.23, FF 2.0.6, IE 6(7) с гарантией. Для этого используются следующие хаки:
Целью и задачей данной мини-справки по файлу стилей является:
Теперь перейдем непосредственно к самому файлу стилей. Он по-прежнему расположен в папке “css” и называется gordi.css. Вы можете его переименовать, не забыв сделать тоже самое и в файле desing.php указанных скриптов, там, где указан линк на этот файл.
Его структура. Все описанное ниже относится и к многофайловой организации стилей.
Предупреждение!
Прежде, чем Вы начнете работу, Вы должны озаботиться сохранением исходной копии дефолтовых файлов стилей. Авторы не несут ответственности за неправильное понимание изложенного документа, и не санкционированные действия, идущие вразрез данным рекомендациям.
В меню слева Вы можете выбрать интересующий Вас раздел файла стилей.
Файл CSS
* {
font:11px/1.18 verdana,arial,helvetica,sans-serif;
margin:0;
padding:0;
}
body {
background-color:#f0f0f0;
text-align:center;
}
/* start shablon */
/* start 3col, 2col_left, 2col_right */
#lasto,#gordi {
background-color:#f7f8f9;/*right and left column background-color*/
border:silver 1px solid;
margin:5px auto;
padding:2px;
width:912px;
}
#gordi {width:712px;}
#header {
background:url(../i/logo.png) no-repeat #ececec;
border:silver 1px solid;
margin-bottom:2px;
position:relative;
height:100px;
}
#center,#center_left,#center_right {
background-color:#fff;
border-left:silver 1px solid;
border-right:silver 1px solid;
margin-left:200px;
position:relative;
left:0;
width:510px;
min-height:570px;
}
#center:after,
#center_left:after,
#center_right:after {
content:"";
clear:both;
display:block;}/* border OPERA and FF */
#content {
float:left;
width:510px;
}
#left,#right {
position:relative;
left:2px;
width:200px;
}
#left {
float:left;
margin-left:-714px;
$margin-left:-714px;
}
#right {
float:right;
margin-right:-200px;
}
/* end 3col, 2col_left, 2col_right */
/* start 2col_left, 2col_right */
#center_left {
border:0;
border-left:silver 1px solid;
}
#center_right {
border:0;
border-right:silver 1px solid;
margin-left:0;
}
/* end 2col_left, 2col_right */
#footer{
background-color:#fff;
border:silver 1px solid;
clear:both;
margin-top:2px;
padding:1px;
}
/* start xak ie6, ie7 */
*html html,*html body,*html #lasto,
*html #gordi,*html #center,
*html #center_right,*html #center_left {height:100%;}
#center {
$margin-left:0;/* $(dollar) hak для IE6 and IE7 */
}
#center_right {
$margin-left:-200px;/* $(dollar) xak для IE6 and IE7 */
}
/* end xak ie6, ie7 */
/* end shablon */
/* start global default */
.clear {clear:both;}
a,a:link,a:visited {color:blue;text-decoration:none;}
a:active,a:hover {color:red;}
b {color:#000;font-weight:bold;border:none;}
b:hover {color:#000;cursor:text;}
blockquote {padding:10px;color:#555;}
p,li,ol,ul {text-align:justify;}
h1,h2,h3,h4,h5,h6,small {margin:3px;}
li,ol,ul {margin:0 5px 0 10px;}
p {margin:3px 12px;text-indent:1em;}
ul,ol {padding:0;}
ol {margin:5px 5px 0 25px;}
strong {background-color:yellow;font-weight:normal;}
td {color:black;}
i {font-style:italic;}
img {border:0px;}
.ctbl {background-color:silver;border:silver 1px solid;width:126pt;}
.righter {font-weight:normal;margin:5px 25px;text-align:right;}
#hr {background:#999daf;margin:3px;height:1px;}
#hr hr {display:none;}
#panels {width:180px! important;padding:5px;margin:0;}
.small {color:#aaa;}
.bborder {background-color:#fff;border:#a7a6b4 1px solid;}
.panel {background:#f7f8f9;border:silver 1px dotted; padding:2px 2px 2px 7px;color:navy;}
.panel span {color:silver;}
.hide {z-index:1;left:0; visibility:hidden;position:absolute;top:0;}
.lasto {background-color:#ff9;border:#7b9ebd 1px solid;padding:10px;}
.note {border-bottom:blue 1px dotted;color:blue;}
.contents .first {color:red;margin:5px 0 10px 20px;}
.contents .second {color:red;margin:20px 0 20px 10px;}
.contents span {color:red;}
.contents ol {color:silver;padding-left:10px;}
.select {color:red;}
.categories {margin:8px 0;padding:0 0 0 10px;}
.categories li {color:silver;}
.categories .selected {color:red;}
.postlink {margin:5px 25px;text-align:right;}
.postdate {color:#656565;margin:5px 10px;text-align:right;}
.postbody {margin:10px 0;}
.postbody span {color:#a00;}
.title {margin:5px 10px;}
.prim {border:silver 0px solid;margin:5px auto;padding:3px;text-align:left;width:79%;}
.prim label {color:blue;}
.prim div {background:#fff;border:silver 1px solid;font:12px/1 arial,sans-serif;margin:3px auto;padding:5px;}
.pre {
background:#f9f9f9;
border:#000 1px solid;
color:#000;
font:12px/1.2 arial;
margin:15px;
padding:10px;
overflow:auto;
height:70px;
}
.pre span {color:#45f;}
/* style comment */
.comment_list {margin:20px auto;width:500px;}
.comment {
background-color:#fff;
margin:0 5px 2px;
padding:0 5px 2px;
text-align:justify;
}
.comment span,.comma span {color:#a00;font-weight:normal;}
.comment_title {
background-color:#eee;
border:silver 1px dotted;
color:navy;
font-weight:bold;
margin:0 0 5px;
position:relative;
padding:2px 2px 2px 5px;
}
.facsimile {color:#000;margin:3px 5px 0;text-align:right;}
.autor {color:#a33;margin:0 10px;}
/* end style comment */
/* strat statistic */
.point{background-color:#fff;border:1px #ccc solid;margin:5px 4px;padding:0;width:500px;}
.sttit{background-color:#ff9;border:#ff9900 1px solid;margin:1px;padding:2px;}
.point .graf{margin:5px 2px 0;padding:0 0 0 2px;width:492px;height:330px;}
.point .desc{margin:0 0 5px 20px;padding:0;}
.tbl{width:502px;border:1px silver solid;margin:5px 0 5px 4px;}
.sttit,.desc{text-align:left;}
.serf,.rss{color:#1e90ff;}
.post{color:red;}
.nopost,.friend{color:blue;}
.tbl td,
.tbl pre,
.value pre,
.numb pre {color:#000;font:11px verdana,arial,sans-serif;margin:2px;padding:0;}
.hr{position:relative;text-align:left;overflow:hidden;width:495px;}
.hr .anonce{color:#777;margin:2px 100px 0 44px;padding:2px;}
.hr .numb{position:absolute;text-align:right;overflow:hidden;width:40px;}
.hr .value{left:43px;position:relative;text-align:left;overflow:hidden;width:450px;}
.sep {width:480px;overflow:hidden;}
/* end statistic */
/* start topmenu */
.topmenu {list-style:none;position:absolute;left:-7px;bottom:2px;}
.topmenu li {float:left;margin:0;width:80px;}
.topmenu a {
background:url(../i/1.png) repeat-x #eee;
border:silver 1px solid;
color:blue;
display:block;
font:12px verdana,arial,helvetica,sans-serif;
margin:0 1px 0 0;
padding:3px 20px 3px 6px;
position:relative;
text-decoration:none;
}
.topmenu a:hover {background:url(../i/2.png) repeat-x #ddd;color:red;}
.topmenu a.selected {
background:url(../i/gold.png) repeat-x #ccc;
border:orange 1px solid;
color:red;
}
/* end topmenu */
/* star nav */
.nav {list-style-type:none;margin:2px 0 5px;}
.nav li {list-style-type:none;margin:0 auto;width:198px;}
.nav .nolink {
background:url(../i/1.png) repeat-x #fff;
border:silver 1px solid;
color:#770;
font:bold 12px helvetica,sans-serif;
margin:3px auto 1px;
padding:4px 2px 4px 6px;
width:184px;
}
.nav a {
background:url(../i/1.png) repeat-x #eee;
border:silver 1px solid;
color:blue;
display:block;
font:12px arial,helvetica,sans-serif;
margin:1px 2px 0;
padding:3px 2px 3px 6px;
position:relative;
text-decoration:none;
}
.nav a:hover {background:url(../i/2.png) repeat-x #ddd;color:red;}
.nav a.selected,
.nav a.selected:hover {
background:url(../i/gold.png) repeat-x #ccc;
border:orange 1px solid;
color:red;
}
/* end nav */
/* start calendar */
#calendar {
background-color:silver;
border:none;
font:11px arial,helvetica,sans-serif;
margin:0 auto 1px;
text-align:center;
text-decoration:none;
width:174px;
}
.month {
background:url(../i/1.png) repeat-x #DEE3F7;
color:purple;
font:bold italic 12px georgia;
padding:3px;
}
.ct {/*дни недели*/
background:url(../i/1.png) repeat-x #DEE3F7;
color:purple;
padding:2px 0 3px;
}
.cb {/*число в прошлом*/
background:url(../i/cb.png) no-repeat #FFFBCE;
padding:4px 3px;
width:16px;
}
.cv {/*выходные дни*/
background:url(../i/cv.png) no-repeat #FFDFFF;
color:#000;
padding:4px 3px;
width:15px;
}
.cs {/*открытый день*/
background:url(../i/gold.png) no-repeat yellow;
color:red;
}
.cp {/*post*/
background:url(../i/cp.png) no-repeat #D6F3FF;
}
#cp {/*post link*/
background:url(../i/cp.png) no-repeat #D6F3FF;
color:blue;
display:block;
padding:5px 3px;
}
#cp:hover {
background:url(../i/gold.png) no-repeat yellow;
color:red;
}
.cn {/*пустые дни*/background:#efefef;}
#cn {/*наступающие дни*/color:#aaa;}
/* end calendar */
/* start all form */
/* form docedit */
#form_docedit div {color:blue;margin:10px 5px;padding:8px 5px 3px;height:17px;}
#form_docedit div p {border-left:0;margin:-5px 0 0 -11px;padding:5px 2px 0 0;height:16px;}
#form_docedit .docedit {
border-right:0;color:red;
margin:-5px 0 0;
padding:0;
text-align:right;
width:150px;
height:21px;
}
#form_docedit .submit {margin:1px 5px 2px 0;width:488px;height:21px;}
/* end form docedit */
/* form post */
#form_post label {font:12px/1 arial;margin:0 10px;padding:7px 0 0 7px;}
#form_post .tema {margin:0 5px 2px 0;padding:1px 0 3px 3px;width:484px;height:16px;}
#form_post .date {color:#a66;margin:0 5px 0 0;padding:1px 0 3px 7px;width:130px;height:16px;}
#form_post textarea {margin:2px 5px 3px 0;padding:5px;width:477px;height:335px;}
#form_post select {
font:12px arial,sans-serif;
margin:0 0 2px 4px;
padding:0;
width:295px;
height:18px;
}
#form_post .submit {margin:0 4px 2px 0;width:185px;height:20px;}
/* end form post */
/* form edit */
#form_edit textarea {margin:2px 5px 3px 0;padding:0;width:486px;height:405px;}
#form_edit .submit {margin:1px 5px 3px 0;width:488px;height:21px;}
#form_edit .editcom {
font:12px arial,sans-serif;
margin:1px 5px 1px 0;
padding:1px 0 2px 6px;
width:480px;
height:15px;
}
/* end form edit */
/* form clear html */
#form_html label {color:#656565;margin:10px 5px 5px 10px;;}
#form_html textarea {
margin:2px 5px 3px 0;padding:0;overflow:auto;width:486px;height:270px;}
#form_html .submit {margin:1px 5px 3px 0;width:488px;height:21px;}
/* end form clear html */
/* comment form */
#form_comm label {color:#a66;font:12px/1 arial,sans-serif;padding:7px 0 0 30px;}
#form_comm .tema,#form_comm .name,#form_comm .email,#form_comm .cod,
#form_comm textarea,
#form_comm .submit {margin:0 5px 2px 0;padding:1px 0 2px 3px;width:380px;height:17px;}
#form_comm .email {padding:1px 0 2px 22px;width:361px;}
#form_comm .cod {padding:1px 0 2px 22px;width:235px;}
#form_comm textarea {margin:2px 5px 2px 0;padding:10px 0 0 22px;width:465px;height:165px;}
#form_comm .submit {margin:0 5px 2px 0;width:489px;height:22px;}
/* end form comment*/
/* form email */
#form_email p {margin:0 0 2px;padding:0;}
#form_email label {font:12px/1 arial,sans-serif;padding:7px 0 0 25px;margin:2px 0 0;}
#form_email .tema,#form_email .name,#form_email .email,#form_email .cod,
#form_email textarea {margin:0 5px 2px 0;padding:1px 0 2px 22px;width:345px;height:17px;}
#form_email .cod {width:215px;}
#form_email textarea {margin:0 5px 2px 0;padding:10px 0 0 22px;width:465px;height:165px;}
#form_email .submit {margin:0 5px 2px 0;width:489px;height:22px;}
/* end form email*/
/* form friend */
#form_friend label {padding:7px 0 0 20px;}
#form_friend span {color:#000;padding:10px 0 0 10px;text-align:left;}
#form_friend .tema,#form_friend .name,#form_friend .email,#form_friend .cod,
#form_friend textarea {margin:0 5px 2px 5px;padding:1px 0 2px 22px;width:330px;height:17px;}
#form_friend .cod {width:200px;}
#form_friend textarea {margin:2px 5px 2px 0;padding:10px 0 2px 22px;width:330px;height:165px;}
#form_friend .submit {margin:0 5px 2px;width:354px;height:22px;}
/* end form friend */
/* form select */
#form_select .month,
#form_select .god,
#form_select .submit {color:blue;font:12px/1 arial,sans-serif;}
#form_select {margin:0 0 10px 13px;padding:2px 0;height:19px;}
#form_select .month {margin:0 1px 0 0;padding:0;width:80px;height:18px;}
#form_select .god {margin:0 1px 0 0;padding:1px 0 0 2px;width:62px;height:18px;}
#form_select .submit {padding:0 0 2px;margin:0 0 2px;width:26px;height:20px;}
#form_select .option {background-color:#fff;border:0;color:blue;padding:0 0 0 3px;}
/* end form select */
/* form searsh menu */
.form {margin:2px 0 4px 2px;}
.form .search,.form .submit {border:silver 1px solid;color:#656565;margin:0;}
.form .search {padding:1px 0 0;text-align:left;width:158px;height:17px;}
.form .submit {padding:0 0 4px;width:30px;height:20px;}
/* end form searsh menu */
/* form search */
#form_search .search,#form_google .search {padding:1px 3px;height:19px;}
#form_search .submit,#form_google .submit {color:#656565;height:23px;}
#form_search .submit,#form_google .submit {width:90px;}
#form_google .search {width:305px;}
#form_search .search {margin:10px 0 10px 5px;width:385px;}
#form_google .search,#form_google .submit {margin:14px 0 5px 5px;}
#form_search .submit {margin:10px 5px 5px 0;}
#form_google a {margin:10px 0 5px 5px;}
#form_google img {float:left;border:none;width:75px;height:32px;}
#form_google div {margin:0 0 5px 5px;padding:0 0 5px;}
/* end form search */
fieldset {color:#000;margin:0 auto;;padding:3px 0 0;width:498px;}
legend {color:#a66;padding:0 5px 5px;margin:0 0 0 10px;}
legend span {color:red;}
select,input {height:19px;}
option {padding:0 0 0 5px;height:15px;}
#form_docedit,#form_post,#form_edit,#form_html,#form_comm,#form_email,
#form_friend,#form_search,#form_google {margin:10px auto;width:500px;}
.submit {background-color:#fff;color:#000;cursor:hand;font:12px arial,sans-serif;}
fieldset,#form_docedit div,#form_docedit div p,#form_friend textarea,
#form_email textarea,#form_comm textarea,#form_html textarea,#form_edit textarea,
#form_post textarea,#form_select .month,#form_post select,.editcom,.docedit,.search,
.god,.tema,.name,.email,.cod,.date,.submit{border:#7b9ebd 1px solid;}
#form_select .month,#form_select .god,#form_select .submit,#form_google .search,
#form_google .submit,#form_google div,#form_google a,#form_search .search,
#form_friend span,#form_post select,label {float:left;}
#form_docedit div span,#form_docedit div p,.docedit,#form_docedit .submit,
.tema,.name,.email,.cod,.date,.editcom,#form_friend textarea,#form_html textarea,
#form_html .submit,#form_comm textarea,#form_comm .submit,#form_edit textarea,
#form_edit .submit,#form_post textarea,#form_post .submit,#form_email textarea,
#form_friend .submit,#form_email .submit,#form_search .submit {float:right;}
.email,.cod,#form_comm textarea,#form_friend .tema,#form_friend .name,
#form_friend textarea,#form_email .tema,#form_email .name,
#form_email textarea {background:url(../i/pencil.png) 2px 1px no-repeat #fff;}
#form_friend img,
#form_email img,
#form_comm img {border:none;float:right;margin:2px 2px 2px 0;width:120px;height:19px;}
/* end all form */
/* end global default */
/* start xak IE6, IE7 */
fieldset {$padding:0;$position:relative;$top:12px;}
legend {$margin:0 0 -7px;$position:relative;$top:-9px;$left:3px;}
#form_select .month {$WIDTH:82px;$HEIGHT:20px;}
#form_select .god {$WIDTH:64px;$HEIGHT:20px;}
#form_select .submit {$padding:0;$HEIGHT:20px;}
#form_post .tema,#form_post .date,
#form_post textarea,#form_post .submit,
#form_edit .editcom,#form_edit textarea,#form_edit .submit {$margin:0 5px 2px 0;}
#form_post .tema {$padding:3px 0 1px 3px;$height:16px;}
#form_post .date {$padding:3px 0 1px 7px;$height:15px;}
#form_post select {$margin:0 0 2px 5px;}
#form_post textarea {$width:476px;}
#form_post .submit {$height:19px;}
#form_edit .editcom {$padding:3px 0 0 6px;$height:16px;}
#form_edit textarea {width:486px;}
#form_comm .tema,#form_comm .name {$padding:3px 0 0px 3px;}
#form_comm .email,#form_comm .cod,
#form_email .tema,#form_email .name,#form_email .email,#form_email .cod,
#form_friend .tema,
#form_friend .name,#form_friend .email,#form_friend .cod {$padding:3px 0 0px 22px;}
#form_docedit div {$margin:10px 5px;$padding:9px 5px 3px;$height:17px;}
#form_docedit div p {$margin:-6px 0 0 -11px;$padding:4px 2px 0 0;$height:17px;}
#form_docedit .docedit {$margin:-6px 0 0;$padding:4px 0 2px;$height:15px;}
#form_search .search,#form_google .search {$padding:4px 3px 0;$height:17px;}
#form_docedit .submit {$margin:0 5px -8px 0;}
*html #form_select .submit {height:21px;}
*html #form_post .submit {height:20px;}
*html #cp {padding:5px 2px 1px 3px;height:15px;}
*html .cb {padding:3px;height:15px;}
/* end xak IE6, IE7 */
/* start xak FireFox */
html:root #form_post .tema {padding:3px 0 0 3px;}
html:root #form_post .date {padding:3px 0 0 7px;}
html:root #form_post textarea {width:477px;}
html:root #form_post .submit {margin:0 5px 2px 0;}
html:root #form_search .submit,html:root #form_google .submit {padding:0 0 2px;}
html:root #form_search .search,
html:root #form_google .search {padding:3px 3px 0;height:18px;}
html:root #form_select .month {width:82px;}
html:root #form_select .god {width:64px;}
html:root #form_friend label {padding:9px 0 0 20px;}
html:root #form_friend span {padding:22px 0 0 10px;}
html:root #form_friend .tema,html:root #form_friend .name,
html:root #form_friend .email,html:root #form_friend .cod,
html:root #form_email .tema,html:root #form_email .name,
html:root #form_email .email,html:root #form_email .cod,
html:root #form_comm .email,html:root #form_comm .cod {padding:3px 0 0 22px;}
html:root #form_comm .tema,html:root #form_comm .name {padding:3px 0 0 3px;}
html:root #form_edit textarea {width:486px;}
html:root #form_docedit .docedit {padding:4px 0 1px 3px;height:16px;}
html:root #form_docedit div p {margin:-5px 0 0 -15px;}
html:root .form .search {padding:2px 0 0;text-align:left;width:158px;height:17px;}
html:root .form .submit {padding:0 0 4px;width:30px;height:21px;}
/* end xak FireFox */
Комментарий:
Файл стилей разбит на секции, отделенные друг от друга комментариями, с указанием, что находиться в данной секции - типа:
/* start shablon */
.
.
.
/* end shablon */
При использовании файла в боевых условиях, после обкатки на "Денвере", все комментарии можно удалить, что не только сократит размер файла, но и избавит от возможной неработоспособности файла стилей. Производя данное действо, будьте аккуратны и внимательны!
Начало
* {
font:11px/1.18 verdana,arial,helvetica,sans-serif;
margin:0;
padding:0;
}
body {
background-color:#f0f0f0;
text-align:center;
}
Комментарий:
В первой строке указан размер шрифта и семейство гарнитур. Это базовый размер. Запись 11px/1.18 обозначает размер шрифта 11 пикселей /1.18 межстрочное расстояние, действует на всех страницах, то есть наследуется. Сделано именно так, а не иначе, с целью максимальной совместимости отображения текста в браузерах FireFox, OPERA, IE6(7)- этому вопросу посвящен пост font-size, font-family - default, не рулит. Если необходимо где-то изменить размер шрифта, там он определяется отдельно. Пример: размер шрифта меню. Естественно, Вы можете изменить базовый размер шрифта, учитывая все вышесказанное.
background-color:#f0f0f0; фоновый цвет окна браузера за пределами вашей страницы. Эта запись может выглядеть иначе, вместо фонового цвета вы можете подложить свою картинку: background:url(../i/xxx.png[jpg,gif]) #f0f0f0;
text-align:center; - данная запись необходима только для IE6, чтобы страница располагалась по центру окна браузера, наследуется. Все блоки, имеющие указание ширины и внешних отступов по горизонтали auto, будут отцентрированы в пределах материнского блока.
Шаблон страницы
/* start shablon */
/* start 3col, 2col_left, 2col_right */
#lasto,#gordi {
background-color:#f7f8f9;/*right and left column background-color*/
border:silver 1px solid;
margin:5px auto;
padding:2px;
width:912px;
}
#gordi {width:712px;}
#header {
background:url(../i/logo.png) no-repeat #ececec;
border:silver 1px solid;
margin-bottom:2px;
position:relative;/* параметр необходимый дла позиционирования горизон. меню */
height:100px;
}
#center,#center_left,#center_right {
background-color:#fff;
border-left:silver 1px solid;
border-right:silver 1px solid;
margin-left:200px;
position:relative;
left:0;
width:510px;
min-height:570px;
}
/* border OPERA and FF */
#center:after,
#center_left:after,
#center_right:after {
content:"";
clear:both;
display:block;
}
#content {float:left;width:510px;}
#left,#right {position:relative;left:2px;width:200px;}
#left {float:left;margin-left:-714px;$margin-left:-714px;}
#right {float:right;margin-right:-200px;}
/* end 3col, 2col_left, 2col_right */
/* start 2col_left, 2col_right */
#center_left {border:0;border-left:silver 1px solid;}
#center_right {border:0;border-right:silver 1px solid;margin-left:0;}
/* end 2col_left, 2col_right */
#footer{
background-color:#fff;
border:silver 1px solid;
clear:both;
margin-top:2px;
padding:1px;
}
/* start xak ie6, ie7 */
*html html,*html body,*html #lasto,
*html #gordi,*html #center,
*html #center_right,*html #center_left {height:100%;}
#center {$margin-left:0;}
#center_right {$margin-left:-200px;}
/* end xak ie6, ie7 */
/* end shablon */
Комментарий:
В шаблоне страницы используется хорошо за рекомендовавший себя "Святой Грааль". Как и что работает, не является темой нашей мини-справки. Шаблон по сравнению с предыдущей версией упрощен. Цвет боковых колонок задается в одном месте. Смотрим комментарий в стилях.
Ширина страницы задается параметром width для #lasto - трех колоночный вариант, #gordi - двух колоночный вариант.
В принципе, ничего трогать не надо. Все оптимизировано. Скажем так: позволено менять только цвет фона, имя картинки в #header, фон к ней и высоту, смотри там же параметр height:100px;. Цвет бордюра.
Рекомендации по изменению размера колонки с контентом.
Одновременно меняем параметр width, к примеру на 50px в сторону увеличения у идентификаторов: #lasto, #gordi, #center, #center_left, #center_right и #content.
Так же необходимо откорректировать значения margin-left у #left и margin-right у #right. Допустим, данный параметр для margin-left равен -714px следовательно, после изменения, он должен стать равным -764px.
Все автоматом должно раздвинуться, а находящиеся внутри контента блоки встать по центру.
HTML- 3 возможных вариантов шаблона:
Три колонки Две колонки контент справа Две колонки контент слева <div id="lasto"> <div id="gordi"> <div id="gordi"> <div id="header"> <div id="header"> <div id="header"> <ul></ul> <ul></ul> <ul></ul> </div> </div> </div> <div id="center"> <div id="center_left"> <div id="center_right"> <div id="content"></div> <div id="content"></div> <div id="content"></div> <div id="left"></div> <div id="left"></div> <div id="right"></div> <div id="right"></div> </div> </div> </div> <div id="footer"></div> <div id="footer"></div> <div id="footer"></div> </div> </div> </div>
Комментарий:
В необходимые места прописываются php вставки, для разных скриптов свои.
Цветом выделены изменения, которые надо внести для получения различных вариантов.
Меню
/* start topmenu */
.topmenu {
list-style:none;
position:absolute;/* позиционирование горизонтального меню в header */
left:-7px;
bottom:2px;
}
.topmenu li {float:left;margin:0;width:80px;}
.topmenu a {
background:url(../i/1.png) repeat-x #eee;
border:silver 1px solid;
color:blue;
display:block;
font:12px verdana,arial,helvetica,sans-serif;
margin:0 1px 0 0;
padding:3px 20px 3px 6px;
position:relative;
text-decoration:none;
}
.topmenu a:hover {background:url(../i/2.png) repeat-x #ddd;color:red;}
.topmenu a.selected {
background:url(../i/gold.png) repeat-x #ccc;
border:orange 1px solid;
color:red;
}
/* end topmenu */
/* star nav */
.nav {list-style-type:none;margin:2px 0 5px;}
.nav li {list-style-type:none;margin:0 auto;width:198px;}
.nav .nolink {
background:url(../i/1.png) repeat-x #fff;
border:silver 1px solid;
color:#770;
font:bold 12px helvetica,sans-serif;
margin:3px auto 1px;
padding:4px 2px 4px 6px;
width:184px;
}
.nav a {
background:url(../i/1.png) repeat-x #eee;
border:silver 1px solid;
color:blue;
display:block;
font:12px arial,helvetica,sans-serif;
margin:1px 2px 0;
padding:3px 2px 3px 6px;
position:relative;
text-decoration:none;
}
.nav a:hover {background:url(../i/2.png) repeat-x #ddd;color:red;}
.nav a.selected,
.nav a.selected:hover {
background:url(../i/gold.png) repeat-x #ccc;
border:orange 1px solid;
color:red;
}
/* end nav */
Комментарий:
В горизонтальном меню особенностей нет. Следует указать лишь на то, что в варианте по дефолту размер ячеек с ссылками имеет фиксированную ширину. При ну очччень длинной ссылке произойдет принудительный перенос на следующую строку, со всеми вытекающими отсюда последствиями, чего можно избежать двумя способами:
В вертикальном меню обратите внимание, как реализован заголовок над ссылками. Это отдельный .nav .nolink класс со своими свойствами и параметрами. Ширина меню меняется изменением следующих атрибутов: width у .nav li для ссылки и width у .nav .nolink для заголовка меню. Так же в вертикальном меню может находиться форма поиска по блогу, параметры формы прописаны в секции /* start all form */ подсекция /* form searsh menu */ - там необходимо подобрать параметр width для .form .search, и эту же операцию нужно произвести для html:root .form .search
Остальные размеры трогать нет нужды. Вы можете использовать свои цвета, исключить бордюр и фоновые картинки, или поменять на свои.
Календарь
/* start calendar */
#calendar {
background-color:silver;
border:none;
font:11px arial,helvetica,sans-serif;
margin:0 auto 1px;
text-align:center;
text-decoration:none;
width:174px;
}
.month {
background:url(../i/1.png) repeat-x #DEE3F7;
color:purple;
font:bold italic 12px georgia;
padding:3px;
}
.ct {/*дни недели*/
background:url(../i/1.png) repeat-x #DEE3F7;
color:purple;
padding:2px 0 3px;
}
.cb {/*число в прошлом*/
background:url(../i/cb.png) no-repeat #FFFBCE;
padding:4px 3px;
width:16px;
}
.cv {/*выходные дни*/
background:url(../i/cv.png) no-repeat #FFDFFF;
color:#000;
padding:4px 3px;
width:15px;
}
.cs {/*открытый день*/
background:url(../i/gold.png) no-repeat yellow;
color:red;
}
.cp {/*post*/
background:url(../i/cp.png) no-repeat #D6F3FF;
}
#cp {/*post link*/
background:url(../i/cp.png) no-repeat #D6F3FF;
color:blue;
display:block;
padding:5px 3px;
}
#cp:hover {
background:url(../i/gold.png) no-repeat yellow;
color:red;
}
.cn {/*пустые дни*/background:#efefef;}
#cn {/*наступающие дни*/color:#aaa;}
/* end calendar */
Комментарий:
Те же ограничения на размеры. А так меняем фон, цвета по Вашему усмотрению, или используем фоновые подкладки. Можно обойтись одной заготовкой, переворачивая ее, как это сделано на Trifler Blog.
Дефолт
Указано перчисление стилей дефолтовых версий выше перечисленных скриптов.
/* start global default */
.clear {clear:both;}
a,a:link,a:visited {color:blue;text-decoration:none;}
a:active,a:hover {color:red;}
b {color:#000;font-weight:bold;border:none;}
b:hover {color:#000;cursor:text;}
blockquote {padding:10px;color:#555;}
p,li,ol,ul {text-align:justify;}
h1,h2,h3,h4,h5,h6,small {margin:3px;}
li,ol,ul {margin:0 5px 0 10px;}
p {margin:3px 12px;text-indent:1em;}
ul,ol {padding:0;}
ol {margin:5px 5px 0 25px;}
strong {background-color:yellow;font-weight:normal;}
td {color:black;}
i {font-style:italic;}
img {border:0px;}
.ctbl {background-color:silver;border:silver 1px solid;width:126pt;}
.righter {font-weight:normal;margin:5px 25px;text-align:right;}
#hr {background:#999daf;margin:3px;height:1px;}
#hr hr {display:none;}
#panels {width:180px! important;padding:5px;margin:0;}
.small {color:#aaa;}
.bborder {background-color:#fff;border:#a7a6b4 1px solid;}
.panel {background:#f7f8f9;border:silver 1px dotted; padding:2px 2px 2px 7px;color:navy;}
.panel span {color:silver;}
.hide {z-index:1;left:0; visibility:hidden;position:absolute;top:0;}
.lasto {background-color:#ff9;border:#7b9ebd 1px solid;padding:10px;}
.note {border-bottom:blue 1px dotted;color:blue;}
.contents .first {color:red;margin:5px 0 10px 20px;}
.contents .second {color:red;margin:20px 0 20px 10px;}
.contents span {color:red;}
.contents ol {color:silver;padding-left:10px;}
.select {color:red;}
.categories {margin:8px 0;padding:0 0 0 10px;}
.categories li {color:silver;}
.categories .selected {color:red;}
.postlink {margin:5px 25px;text-align:right;}
.postdate {color:#656565;margin:5px 10px;text-align:right;}
.postbody {margin:10px 0;}
.postbody span {color:#a00;}
.title {margin:5px 10px;}
.prim {border:silver 0px solid;margin:5px auto;padding:3px;text-align:left;width:79%;}
.prim label {color:blue;}
.prim div {background:#fff;border:silver 1px solid;font:12px/1 arial,sans-serif;margin:3px auto;padding:5px;}
.pre {
background:#f9f9f9;
border:#000 1px solid;
color:#000;
font:12px/1.2 arial;
margin:15px;
padding:10px;
overflow:auto;
height:70px;
}
.pre span {color:#45f;}
Комментарий:
Данные стили кочуют из движка в движок, все по умолчанию. Используются в разных местах, более подробно останавливаться на них нет необходимости. Не трогая размеров, меняем фон, цвет, цвет бордюров или исключаем оный.
Блок комментариев
/* style comment */
.comment_list {margin:20px auto;width:500px;}
.comment {background-color:#fff;margin:0 5px 2px;padding:0 5px 2px;text-align:justify;}
.comment span,.comma span {color:#a00;font-weight:normal;}
.comment_title {
background-color:#eee;
border:silver 1px dotted;
color:navy;
font-weight:bold;
margin:0 0 5px;
position:relative;
padding:2px 2px 2px 5px;
}
.facsimile {color:#000;margin:3px 5px 0;text-align:right;}
.autor {color:#a33;margin:0 10px;}
/* end style comment */
Комментарий:
Оформлены в едином стиле с формами. Все тоже самое. Менять размеры следует с крайней осторожностью, а лучше и не надо. Фон, цвет- всё в Ваших руках.
Статистика
/* strat statistic */
.point{background-color:#fff;border:1px #ccc solid;margin:5px auto;padding:0;width:500px;}
.sttit{background-color:#ff9;border:#ff9900 1px solid;margin:1px;padding:2px;}
.point .graf{margin:5px 2px 0;padding:0 0 0 2px;width:492px;height:330px;}
.point .desc{margin:0 0 5px 20px;padding:0;}
.tbl{width:502px;border:1px silver solid;margin:5px 0 5px 4px;}
.sttit,.desc{text-align:left;}
.serf,.rss{color:#1e90ff;}
.post{color:red;}
.nopost,.friend{color:blue;}
.tbl td,
.tbl pre,
.value pre,
.numb pre {color:#000;font:11px verdana,arial,sans-serif;margin:2px;padding:0;}
.hr{position:relative;text-align:left;overflow:hidden;width:495px;}
.hr .anonce{color:#777;margin:2px 100px 0 44px;padding:2px;}
.hr .numb{position:absolute;text-align:right;overflow:hidden;width:40px;}
.hr .value{left:43px;position:relative;text-align:left;overflow:hidden;width:450px;}
.sep {width:480px;overflow:hidden;}
/* end statistic */
Комментарий:
Стили статистики написаны Мастером Lasto.
Не трогая размеры, поступаем, как в предыдущих случаях: меняем фон, цвет, color. Алгоритм поведения модуля статистики очень сложный, ничего, кроме цветов, трогать настоятельно не рекомендуется.
Формы
Самый сложный кусок стилей. В нем находятся все формы, доступные как из горизонтального/вертикального меню, так и находящееся в админке.
/* start all form */
/* form docedit */
#form_docedit div {color:blue;margin:10px 5px;padding:8px 5px 3px;height:17px;}
#form_docedit div p {border-left:0;margin:-5px 0 0 -11px;padding:5px 2px 0 0;height:16px;}
#form_docedit .docedit {
border-right:0;
color:red;
margin:-5px 0 0;
padding:0;
text-align:right;
width:150px;
height:21px;
}
#form_docedit .submit {margin:1px 5px 2px 0;width:488px;height:21px;}
/* end form docedit */
/* form post */
#form_post label {font:12px/1 arial;margin:0 10px;padding:7px 0 0 7px;}
#form_post .tema {margin:0 5px 2px 0;padding:1px 0 3px 3px;width:484px;height:16px;}
#form_post .date {color:#a66;margin:0 5px 0 0;padding:1px 0 3px 7px;width:130px;height:16px;}
#form_post textarea {margin:2px 5px 3px 0;padding:5px;width:477px;height:335px;}
#form_post select {
font:12px arial,sans-serif;
margin:0 0 2px 4px;
padding:0;
width:295px;
height:18px;
}
#form_post .submit {margin:0 4px 2px 0;width:185px;height:20px;}
/* end form post */
/* form edit */
#form_edit textarea {margin:2px 5px 3px 0;padding:0;width:486px;height:405px;}
#form_edit .submit {margin:1px 5px 3px 0;width:488px;height:21px;}
#form_edit .editcom {
font:12px arial,sans-serif;
margin:1px 5px 1px 0;
padding:1px 0 2px 6px;
width:480px;
height:15px;
}
/* end form edit */
/* form clear html */
#form_html label {color:#656565;margin:10px 5px 5px 10px;;}
#form_html textarea {
margin:2px 5px 3px 0;
padding:0;
overflow:auto;
width:486px;
height:270px;
}
#form_html .submit {margin:1px 5px 3px 0;width:488px;height:21px;}
/* end form clear html */
/* comment form */
#form_comm label {color:#a66;font:12px/1 arial,sans-serif;padding:7px 0 0 30px;}
#form_comm .tema,#form_comm .name,#form_comm .email,#form_comm .cod,
#form_comm textarea,
#form_comm .submit {margin:0 5px 2px 0;padding:1px 0 2px 3px;width:380px;height:17px;}
#form_comm .email {padding:1px 0 2px 22px;width:361px;}
#form_comm .cod {padding:1px 0 2px 22px;width:235px;}
#form_comm textarea {margin:2px 5px 2px 0;padding:10px 0 0 22px;width:465px;height:165px;}
#form_comm .submit {margin:0 5px 2px 0;width:489px;height:22px;}
/* end form comment*/
/* form email */
#form_email p {margin:0 0 2px;padding:0;}
#form_email label {font:12px/1 arial,sans-serif;padding:7px 0 0 25px;margin:2px 0 0;}
#form_email .tema,#form_email .name,#form_email .email,#form_email .cod,
#form_email textarea {margin:0 5px 2px 0;padding:1px 0 2px 22px;width:345px;height:17px;}
#form_email .cod {width:215px;}
#form_email textarea {margin:0 5px 2px 0;padding:10px 0 0 22px;width:465px;height:165px;}
#form_email .submit {margin:0 5px 2px 0;width:489px;height:22px;}
/* end form email*/
/* form friend */
#form_friend label {padding:7px 0 0 20px;}
#form_friend span {color:#000;padding:10px 0 0 10px;text-align:left;}
#form_friend .tema,#form_friend .name,#form_friend .email,#form_friend .cod,
#form_friend textarea {margin:0 5px 2px 5px;padding:1px 0 2px 22px;width:330px;height:17px;}
#form_friend .cod {width:200px;}
#form_friend textarea {margin:2px 5px 2px 0;padding:10px 0 2px 22px;width:330px;height:165px;}
#form_friend .submit {margin:0 5px 2px;width:354px;height:22px;}
/* end form friend */
/* form select */
#form_select .month,
#form_select .god,#form_select .submit {color:blue;font:12px/1 arial,sans-serif;}
#form_select {margin:0 0 10px 13px;padding:2px 0;height:19px;}
#form_select .month {margin:0 1px 0 0;padding:0;width:80px;height:18px;}
#form_select .god {margin:0 1px 0 0;padding:1px 0 0 2px;width:62px;height:18px;}
#form_select .submit {padding:0 0 2px;margin:0 0 2px;width:26px;height:20px;}
#form_select .option {background-color:#fff;border:0;color:blue;padding:0 0 0 3px;}
/* end form select */
/* form searsh menu */
.form {margin:2px 0 4px 2px;}
.form .search,.form .submit {border:silver 1px solid;color:#656565;margin:0;}
.form .search {padding:1px 0 0;text-align:left;width:158px;height:17px;}
.form .submit {padding:0 0 4px;width:30px;height:20px;}
/* end form searsh menu */
/* form search */
#form_search .search,#form_google .search {padding:1px 3px;height:19px;}
#form_search .submit,#form_google .submit {color:#656565;height:23px;}
#form_search .submit,#form_google .submit {width:90px;}
#form_google .search {width:305px;}
#form_search .search {margin:10px 0 10px 5px;width:385px;}
#form_google .search,#form_google .submit {margin:14px 0 5px 5px;}
#form_search .submit {margin:10px 5px 5px 0;}
#form_google a {margin:10px 0 5px 5px;}
#form_google img {float:left;border:none;width:75px;height:32px;}
#form_google div {margin:0 0 5px 5px;padding:0 0 5px;}
/* end form search */
fieldset {color:#000;margin:0 auto;;padding:3px 0 0;width:498px;}
legend {color:#a66;padding:0 5px 5px;margin:0 0 0 10px;}
legend span {color:red;}
select,input {height:19px;}
option {padding:0 0 0 5px;height:15px;}
#form_docedit,#form_post,#form_edit,#form_html,#form_comm,#form_email,
#form_friend,#form_search,#form_google {margin:10px auto;width:500px;}
.submit {background-color:#fff;color:#000;cursor:hand;font:12px arial,sans-serif;}
fieldset,#form_docedit div,#form_docedit div p,
#form_friend textarea,#form_email textarea,
#form_comm textarea,#form_html textarea,
#form_edit textarea,#form_post textarea,#form_select .month,
#form_post select,.editcom,.docedit,.search,.god,.tema,.name,
.email,.cod,.date,.submit{border:#7b9ebd 1px solid;}
#form_select .month,#form_select .god,#form_select .submit,
#form_google .search,#form_google .submit,
#form_google div,#form_google a,#form_search .search,
#form_friend span,#form_post select,label {float:left;}
#form_docedit div span,#form_docedit div p,.docedit,
#form_docedit .submit,.tema,.name,.email,.cod,.date,
.editcom,#form_friend textarea,#form_html textarea,
#form_html .submit,#form_comm textarea,#form_comm .submit,
#form_edit textarea,#form_edit .submit,#form_post textarea,
#form_post .submit,#form_email textarea,
#form_friend .submit,#form_email .submit,#form_search .submit {float:right;}
.email,.cod,#form_comm textarea,#form_friend .tema,
#form_friend .name,#form_friend textarea,
#form_email .tema,#form_email .name,
#form_email textarea {background:url(../i/pencil.png) 2px 1px no-repeat #fff;}
#form_friend img,#form_email img,
#form_comm img {border:none;float:right;margin:2px 2px 2px 0;width:120px;height:19px;}
/* end all form */
Комментарий:
Все разбито на секции, какая форма и для чего, это видно и из названия идентификаторов.
Вот здесь, действительно, ничего трогать нельзя. Только цвет бордюра - вынесен в отдельно сгруппированную секцию.
Все по возможности оптимизировано, и чем меньше Вы тут будете вносить изменений, тем лучше.
Хаки
/* start xak IE6, IE7 */
fieldset {$padding:0;$position:relative;$top:12px;}
legend {$margin:0 0 -7px;$position:relative;$top:-9px;$left:3px;}
#form_select .month {$WIDTH:82px;$HEIGHT:20px;}
#form_select .god {$WIDTH:64px;$HEIGHT:20px;}
#form_select .submit {$padding:0;$HEIGHT:20px;}
#form_post .tema,#form_post .date,
#form_post textarea,#form_post .submit,
#form_edit .editcom,#form_edit textarea,#form_edit .submit {$margin:0 5px 2px 0;}
#form_post .tema {$padding:3px 0 1px 3px;$height:16px;}
#form_post .date {$padding:3px 0 1px 7px;$height:15px;}
#form_post select {$margin:0 0 2px 5px;}
#form_post textarea {$width:476px;}
#form_post .submit {$height:19px;}
#form_edit .editcom {$padding:3px 0 0 6px;$height:16px;}
#form_edit textarea {width:486px;}
#form_comm .tema,#form_comm .name {$padding:3px 0 0px 3px;}
#form_comm .email,#form_comm .cod,
#form_email .tema,#form_email .name,#form_email .email,
#form_email .cod,#form_friend .tema,#form_friend .name,
#form_friend .email,#form_friend .cod {$padding:3px 0 0px 22px;}
#form_docedit div {$margin:10px 5px;$padding:9px 5px 3px;$height:17px;}
#form_docedit div p {$margin:-6px 0 0 -11px;$padding:4px 2px 0 0;$height:17px;}
#form_docedit .docedit {$margin:-6px 0 0;$padding:4px 0 2px;$height:15px;}
#form_search .search,#form_google .search {$padding:4px 3px 0;$height:17px;}
#form_docedit .submit {$margin:0 5px -8px 0;}
*html #form_select .submit {height:21px;}
*html #form_post .submit {height:20px;}
*html #cp {padding:5px 2px 1px 3px;height:15px;}
*html .cb {padding:3px;height:15px;}
/* end xak IE6, IE7 */
/* start xak FireFox */
html:root #form_post .tema {padding:3px 0 0 3px;}
html:root #form_post .date {padding:3px 0 0 7px;}
html:root #form_post textarea {width:477px;}
html:root #form_post .submit {margin:0 5px 2px 0;}
html:root #form_search .submit,html:root #form_google .submit {padding:0 0 2px;}
html:root #form_search .search,
html:root #form_google .search {padding:3px 3px 0;height:18px;}
html:root #form_select .month {width:82px;}
html:root #form_select .god {width:64px;}
html:root #form_friend label {padding:9px 0 0 20px;}
html:root #form_friend span {padding:22px 0 0 10px;}
html:root #form_friend .tema,html:root #form_friend .name,
html:root #form_friend .email,html:root #form_friend .cod,
html:root #form_email .tema,html:root #form_email .name,
html:root #form_email .email,html:root #form_email .cod,
html:root #form_comm .email,html:root #form_comm .cod {padding:3px 0 0 22px;}
html:root #form_comm .tema,html:root #form_comm .name {padding:3px 0 0 3px;}
html:root #form_edit textarea {width:486px;}
html:root #form_docedit .docedit {padding:4px 0 1px 3px;height:16px;}
html:root #form_docedit div p {margin:-5px 0 0 -15px;}
html:root .form .search {padding:2px 0 0;text-align:left;width:158px;height:17px;}
html:root .form .submit {padding:0 0 4px;width:30px;height:21px;}
/* end xak FireFox */
Комментарий:
В этой секции не подготовленному человеку делать нечего. Тут собраны все необходимые параметры для исправления визуальных погрешностей IE 6(7) и FireFox при создании форм.
Исключения
Вам представлена полная версия стилей для LastoBlog-b-Denver_version 20.07.07 worker.
Для Стахановского Портатора и обеих версий nano-CMS часть стилей может (и должна) отсутствовать. Это касается стилей описывающих формы, стили календаря и стили блока комментариев.
Стили календаря, и стили блока комментариев просто удаляем.
В Стахановском Портаторе используется только одна форма - форма отправки Email.
Тут можно поступить следующим образом: или оставить всё как есть, или аккуратно в секции форм удалить то, что не относится к данной форме.
Для обеих версий nano-CMS всю секцию можно и нужно удалить.
Еще раз напомню, будьте внимательны и аккуратны!
Заключение