Инструкции

Пример шаблона

Пример дизайна шаблона:

Пример кода шаблона:

[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 ======*/
Данный сайт использует файлы cookie и прочие похожие технологии. В том числе, мы обрабатываем Ваш IP-адрес для определения региона местоположения. Используя данный сайт, вы подтверждаете свое согласие с политикой конфиденциальности сайта.
OK