Пример дизайна шаблона:
Пример кода шаблона:
[uss]displayXmlHeader()[/uss]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<!-- Подключаем мета-данные, системные стили и скрипты -->
[uss]displayHeader()[/uss]
<!-- Подключаем пользовательские стили и скрипты -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/func.js"></script>
</head>
<body class="BlueStyle">
<div class="top_line_bg"></div>
<div class="l-page l-page-rubber g-max-width">
<div class="l-header">
<div class="l-header-holder g-max-width">
<!--
Подключаем текстовый раздел для вывода картинки в шапке.
Картинка будет выводится в блоке с классом lh_image и будет браться
из текстового раздела с id=15861.
-->
<div class="lh_image">[uss]displaySectionContent(15861,false)[/uss]</div>
<div class="lh_basket">
<div class="inner">
<h3>Ваша корзина</h3>
<!-- В блоке .lh_basket выводим минималистичный вариант корзины
с настройками по умолчанию -->
[uss]displayMiniBasket()[/uss]
</div>
<div class="basket_link"><a href="basket/">Оформить заказ</a></div>
</div>
<div class="lh_logo">
<!-- Выводим название компании и слоган из настроек сайта -->
<a href="/">[uss]displaySiteSettings('companyname')[/uss]
<div class="lh_slogan">[uss]displaySiteSettings('slogan')[/uss]</div>
</a>
</div>
<!-- Выводим содержимое текстового раздела (id=15869) без заголовка -->
<div class="lh_contacts">[uss]displaySectionContent(15869,false)[/uss]</div>
<div class="g-clean"></div>
<div class="lh_search">
<!-- Выводим форму поиска с замещающим текстом "Поиск по сайту" -->
[uss]displaySiteSearch('',false,'Поиск по сайту')[/uss]
</div>
<!-- В блок .lh_menu выводим верхнее меню в виде списка, без подразделов -->
<div class="lh_menu">[uss]displayMenu2(2,false,'li',2)[/uss]</div>
<div class="g-clean"></div>
</div>
</div>
<div class="l-page-holder">
<div class="l-wrapper g-max-width">
<div class="wrapper_holder">
<div class="l-page-content">
<div class="l-content">
<!-- Выводим заголовок страницы -->
<div class="lpc_title">
<h1>[uss]displayContentTitle()[/uss]</h1>
</div>
<!-- Выводим навигационную строку, в качестве разделителя
используем вертикальную черту -->
<div class="lpc_navigation">
[uss]displayNavigationStringForSite2(' | ')[/uss]
</div>
<!-- Выводим контент страницы -->
[uss]displaySiteContent()[/uss]
</div>
</div>
<div class="l-page-left">
<div class="lp_menu">
<h3>Каталог товаров</h3>
<!-- Выводим меню интернет-магазина с настройками по умолчанию -->
[uss]displayEshopTree(0)[/uss]
</div>
<!-- Выводим форму авторизации без заголовка -->
<div class="lp_auth">[uss]displayAuthForm(false)[/uss]</div>
<!-- Выводим 3 новости из новостного раздела (id=15901) под общим
заголовком "Новости" -->
<div class="lp_news">
[uss]displayNews2(15901,3,3,'<h3>Новости</h3>')[/uss]
</div>
</div>
<div class="g-clean"></div>
</div>
</div>
<div class="lf_rasp"></div>
</div>
</div>
<div class="lf_hold">
<div class="l-footer">
<div class="l-footer-holder g-max-width">
<!-- Выводим форму поиска с замещающим текстом "Поиск по сайту" -->
<div class="lf_search">
[uss]displaySiteSearch('',false,'Поиск по сайту')[/uss]
</div>
<!-- Выводим нижнее меню в виде структурированного списка без подразделов -->
<div class="lf_menu">[uss]displayMenu2(4,false,'li',2)[/uss]</div>
<div class="g-clean"></div>
<div class="lf_r">
<div class="lf_system">[uss]displayUSScopy('white')[/uss]</div>
<!-- Выводим счетчики -->
<div class="lf_stats">[uss]displaySiteSettings('counters')[/uss]</div>
</div>
<div class="lf_l">
<div class="lf_logo">
<!-- Выводим название компании в футтер -->
<a href="/">[uss]displaySiteSettings('companyname')[/uss]</a>
</div>
<div class="lf_copyright">
<!-- Выводим копирайт сайта, с автоматической генерацией даты -->
[uss]displaySITEcopy()[/uss]
Все права защищены авторским правом
</div>
</div>
<div class="lf_nav_ico">
<div><a href="/" class="lf_ico1">На главную</a></div>
<div><a href="/sitemap/" class="lf_ico2">Карта сайта</a></div>
<div><a href="/feedback/" class="lf_ico3">Написать письмо</a></div>
</div>
<!-- В футторе выводим контактные данные из настроек сайта -->
<div class="lf_contact">
[uss]displaySiteSettings('companycontactinfo')[/uss]
</div>
<div class="g-clean"></div>
</div>
</div>
</div>
</body>
</html>
Пример таблицы стилей:
/* глобальные стиля для всего сайта */
* {outline:none;}
body, html {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
background:#fff url(/img/wrap.jpg) repeat-x 0 0;
min-width:1000px;
}
img {border:none; margin:0; padding:0;}
.g-max-width {
margin:0 auto;
width:97%;
max-width:1200px;
position:relative;
padding:0;
text-align:left;
}
.g-max-width .g-max-width {width:100%;}
.g-clean {clear:both; font-size:0; overflow:hidden;}
body {color:#434343; font:0.8em/1.2 Tahoma, Arial, sans-serif; text-align:center;}
table, td, th {border-collapse:collapse; font-size:100%;}
form {margin:0; padding:0;}
input, select, textarea {font:normal 1.0em/1.2 Arial, sans-serif;}
textarea {resize:none; overflow:auto;}
input, select, button {vertical-align:middle;}
input[type="submit"]::-moz-focus-inner{padding:0; border:0;}
hr {border:1px solid #ccc; padding:0; margin:0.5em 0; }
ul, ol, li {margin:5px 15px; padding:0;}
/* оформление заголовков */
h1, h2, h3, h4, h5, h6, p {margin:10px 0; padding:0;}
h1, h2, h3, h4, h5, h6, th {color:#494949; font-weight:normal;}
h1 {font-size:18px;}
h2 {font-size:22px;}
h3 {
font-size:18px;
border-bottom:1px solid #909090;
padding:0 0 3px;
text-transform:uppercase;
margin:0 0 10px;
}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:17px;}
/* оформление ссылок */
a {color:#0b659e; text-decoration:underline;}
a:hover {color:#0b659e; text-decoration:none;}
/* страница */
.l-page {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
margin:0 auto;
text-align:left;
}
.l-page-rubber {background:#fff;}
.l-page-holder {
background:#fff;
position:relative;
overflow:hidden;
width:100%;
border-radius:0 0 10px 10px;
box-shadow:0 -10px 10px #b3afa3;
}
.l-wrapper {
position:relative;
background:#fff;
zoom:1;
overflow:hidden;
margin-top:-15px;
padding:15px 0 0;
}
.wrapper_holder {padding:10px; position:relative; zoom:1; overflow:hidden;}
.l-page-content {width:100%; float:left; overflow:hidden;}
.l-content {margin:0 20px; overflow:hidden;}
.left_col .l-content {margin-left:250px;}
/* левая колонка */
.l-page-left {
position:relative;
float:left;
width:0px;
margin-left:-100%;
overflow:hidden;
height:0;
}
.left_col .l-page-left {width:210px; height:auto;}
/* шапка */
.top_line_bg {
position:absolute;
top:0;
left:0;
width:100%;
background:#0a5889 url(/img/header.jpg) no-repeat 50% 100%;
overflow:hidden;
}
.l-header {
position:relative;
width:100%;
color:#fff;
background:#0a5889 url(/img/header.jpg) no-repeat 50% 100%;
z-index:10;
}
.l-header-holder {
padding:8px 0 14px;
position:relative;
background:url(/img/header_bott.png) no-repeat 100% 100%;
overflow:hidden;
zoom:1;
}
.l-header a, .l-header a:hover {color:#fff;}
/* футтер */
.l-footer {position:relative; width:100%; margin:0 0 22px; overflow:hidden; zoom:1;}
.l-footer-holder {
background:#072740 url(/img/footer.jpg) no-repeat 50% 0;
padding:10px 0 12px;
color:#708fa5;
font-size:11px;
border-radius:0 0 6px 6px;
}
.l-footer a, .l-footer a:hover {color:#708fa5;}
.lf_rasp {position:relative; width:100%; clear:both; zoom:1;}
.lf_hold {position:relative; width:100%; overflow:hidden; zoom:1; left:0; background:#fff;}
.lf_hold_holder {position:relative; overflow:hidden; zoom:1;}
/* форма поиска в шапке */
.lh_search {
float:right;
margin:19px 18px 0 0;
width:234px;
height:21px;
background:#fff url(/img/lh_search.png) no-repeat 0 0;
zoom:1;
}
.lh_search form {
margin:4px 6px 0;
border:1px solid #78c2f6;
border-radius:4px;
padding:0 0 0 10px;
background:#fff;
}
.lh_search .uss_input_name {border:none; width:182px; color:#468db5;}
.lh_search .uss_submit {
cursor:pointer;
border:none;
height:18px;
width:18px;
background:#ccc url(/img/search_send.png) no-repeat 0 0;
margin:0 0 1px;
}
/* форма поиска в футторе */
.lf_search {float:left; width:214px; height:21px; margin-left:10px; position:relative;}
.lf_search form {
margin:4px 6px 0;
border:1px solid #78c2f6;
background:#fff;
border-radius:4px;
padding:0 0 0 10px;
}
.lf_search .uss_input_name {border:none; width:160px; color:#468db5;}
.lf_search .uss_submit {
cursor:pointer;
border:none;
height:18px;
width:18px;
background:#ccc url(/img/search_send.png) no-repeat 0 0;
margin:0 0 1px;
}
/* корзина в шапке сайта */
.lh_basket {
position:relative;
margin:22px 18px 0 0;
float:right;
width:234px;
height:77px;
overflow:hidden;
border:1px solid #367ea9;
border-radius:6px;
}
.lh_basket .inner {
overflow:hidden;
float:left;
margin:15px 0 0 12px;
width:140px;
height:60px;
color:#89caea;
font:11px/14px Tahoma, Arial, sans-serif;
}
.lh_basket .inner h3 {
color:#fff;
font-size:12px;
text-transform:uppercase;
margin:0 0 5px;
border:none;
}
.lh_basket .basket_link {margin:1px; float:right;}
.lh_basket .basket_link a {
display:block;
width:61px;
height:75px;
text-decoration:none;
background:#f5b615 url(/img/basket_link.png) no-repeat 0 0;
text-indent:-9999px;
}
/* логотип и слоган */
.lh_logo {
font:bold 40px/1em Arial, sans-serif;
text-shadow:2px 2px 5px #0c466f;
position:relative;
float:left;
margin:34px 30px 34px 0;
max-width:40%;
}
.lh_logo a {color:#fff; text-decoration:none;}
.lh_logo a:hover {color:#fff;}
.lh_logo .lh_slogan {font:normal 24px/1em Arial, sans-serif;}
/* контакты в шапке */
.lh_contacts {
font:12px Tahoma, Arial, sans-serif;
color:#fff;
margin:38px 0 0;
width:240px;
float:left;
position:relative;
}
.lh_contacts a {color:#fff;}
.lh_contacts span {font-size:16px;}
/* картинка в шапке */
.lh_image {position:absolute; bottom:15px; right:254px;}
.lh_image p {margin:0;}
/* верхнее меню */
.lh_menu {margin:0 255px 0 0; position:relative; overflow:hidden; height:40px;}
.lh_menu ul {margin:0; overflow:hidden; height:40px; width:100%; position:relative;}
.lh_menu li {
list-style:none;
display:block;
float:left;
margin:0 2px 0 0;
position:relative;
zoom:1;
}
.lh_menu a {
position:relative;
color:#fff;
display:block;
text-transform:uppercase;
text-decoration:none;
font:12px/40px Arial, sans-serif;
background:#2a87a7 url(/img/lh_menu.png) repeat-x 0 0;
padding:0 10px;
height:40px;
border-radius:4px 4px 0 0;
zoom:1;
white-space:nowrap;
}
.lh_menu a:hover, .lh_menu a.active {
color:#2a5377;
background:#fff url(/img/lh_active.png) repeat-x 0 0;
}
/* нижнее меню */
.lf_menu {padding:6px 20px 12px; border-bottom:1px solid #708fa5; margin:0 0 15px;}
.lf_menu ul {margin:0 0 0 255px; padding:0; overflow:hidden; zoom:1;}
.lf_menu li {
margin:0 10px 5px 0;
padding:0 10px 0 0;
list-style:none;
float:left;
border-right:1px solid #708fa5;
}
.lf_menu li.last {border:none;}
.lf_menu a {font:12px Arial, sans-serif; text-transform:uppercase; text-decoration:none;}
.lf_menu a:hover, .lf_menu a.active {color:#fff; text-decoration:none;}
/* информационные блоки в футторе */
.lf_r {float:right; margin:0 10px 0 20px; width:200px;}
.lf_stats {margin:0 0 5px; width:190px;}
.lf_system {float:right;}
.lf_l {float:left; margin:0 0 0 20px;}
.lf_logo {
margin:0px 0 5px;
font:bold 24px/0.9em Arial, sans-serif;
width:210px;
letter-spacing:-1px;
}
.lf_logo a {text-decoration:none;}
.lf_contact {
float:left;
margin:0 0 0 10px;
width:220px;
line-height:19px;
overflow:hidden;
zoom:1;
}
.lf_contact p {margin:0;}
/* навигационные иконки в футторе */
.lf_nav_ico {
overflow:hidden;
zoom:1;
padding:6px 0 0 0px;
float:left;
margin:0 0 0 50px;
width:160px;
}
.lf_nav_ico a {padding:0 0 0 20px;}
.lf_nav_ico div {margin:0 0 5px;}
.lf_nav_ico .lf_ico1 {background:url(/img/lf_ico1.gif) no-repeat 0 3px;}
.lf_nav_ico .lf_ico2 {background:url(/img/lf_ico2.gif) no-repeat 0 4px;}
.lf_nav_ico .lf_ico3 {background:url(/img/lf_ico3.gif) no-repeat 0 5px;}
/* заголовок страницы */
.lpc_title h1 {margin:0 0 5px;}
/* строка навигации */
.lpc_navigation {
color:#8f9090;
margin:0 0 15px;
font-size:12px;
border-bottom:1px solid #909090;
padding:0 0 5px;
}
.lpc_navigation a {color:#8f9090 !important;}
/* меню интернет-магазина в левой колонке */
.lp_menu {position:relative; margin:0 0 25px;}
.lp_menu h3 {margin-left:10px;}
.lp_menu ul {margin:0; padding:0; zoom:1;}
.lp_menu li {list-style:none; margin:0; zoom:1; position:relative;}
.lp_menu a {
color:#494949;
font:bold 12px Tahoma, Arial, sans-serif;
margin:0 0 0 9px;
position:relative;
display:block;
border:1px solid #d1d1d1;
text-decoration:none;
padding:10px 10px 10px 25px;
background:#f3f3f3 url(/img/lpl_a.png) no-repeat 0 0;
border-radius:6px;
zoom:1;
}
.lp_menu a:hover, .lp_menu a.active {
color:#0b659e;
background:#dff4ff url(/img/lpl_act.png) no-repeat -2px 0;
margin:0;
border-color:#89bede;
padding-left:35px;
}
.lp_menu .submenu {margin:5px 0 0 37px;}
.lp_menu .submenu li {background:none; padding:0; margin:5px 0;}
.lp_menu .submenu a {padding:0; background:none; border:none; margin:0; border-radius:0;}
.lp_menu .submenu a:hover, .lp_menu .submenu a.active {background:none; padding:0; margin:0;}
.lp_menu .submenu .submenu {margin-left:15px;}
/* блок авторизации в левой колонке */
.lp_auth {
position:relative;
margin:0 0 24px 10px;
background:#fff0d1;
border:1px solid #decba3;
padding:10px 12px;
border-radius:12px;
}
.lp_auth td {padding:3px 0;}
.lp_auth .input input {
background:#fff;
border:1px solid #ded0a9;
border-radius:5px;
width:115px;
margin:0 0 0 5px;
color:#919191;
padding:3px 5px;
}
.lp_auth .submit {text-align:right;}
.lp_auth .submit input {
background:none;
border:none;
color:#1b6ea1;
font-weight:bold;
text-decoration:underline;
cursor:pointer;
}
.lp_auth a {color:#555452; font-weight:bold; font-size:11px;}
.lp_auth .passrecovery {position:absolute; bottom:28px; left:12px;}
/* новостной блок в левой колонке */
.lp_news {position:relative; font-size:12px; line-height:14px; margin:0 0 20px 10px;}
.lp_news .news_block_item {margin:0 0 25px;}
.lp_news .title {font-weight:bold; margin:0 0 8px;}
.lp_news .date {overflow:hidden; zoom:1;}
.lp_news .date span {
background:#f0f0f0;
color:#2e7faa;
font-size:11px;
float:left;
padding:1px 2px;
}
/*===== END ======*/
Оставить заявку
Telegram
WhatsApp
