1С-Битрикс Разработчикам - Как html-макет можно адаптировать в шаблон для битрикса?

Заглянувший

Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011

24.07.2011 20:53:37

Есть html макет+стили+картинки.Прощу у разработчиков и гуру битрикса помощи- как адаптировать под битрикс мой html шаблон?

Заранее скажу что нужные папки и файлы создала
images
include_areas
page_templates
файл header.php
файл footer.php
файл description.php
файл .styles.php
файл template_styles.css
файл styles.css

Может кто скажет разницу между styles.css где хранятся стили, используемые при создании содержимого страниц и template_styles.css где содержатся стили, применяемые в шаблоне дизайна сайта.

Пользователь 57013

Постоянный посетитель

Сообщений: 143 Баллов: 30 Регистрация: 04.02.2010

24.07.2011 21:37:38

Если коротко, в template_styles.css хранятся стили каркаса шаблона. В styles.css - стили, которыми оформляется контент области сайта, доступные для редактирования в визуальном редакторе.
Писал об этом статью, почитайте.

Мои заметки о битриксе

Пользователь 97104

Заглянувший

Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011

24.07.2011 21:43:42

Алексей я как раз читала ваши статьи по перевода из html макета и самый важный вопрос у меня :

где в моей верстке части для файлов styles.css
а какие части класть в template_styles.css

спасибо большое статью читаю надеюсь поможет

Пользователь 63216 Заглянувший Сообщений: 13 Регистрация: 10.05.2010	#4 24.07.2011 22:04:10 Положите стили шаблона в template_styles.css

Пользователь 97104 Заглянувший Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011	#5 24.07.2011 22:14:44 у меня итак все стили лежат в template_styles.css .

Пользователь 97104

Заглянувший

Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011

24.07.2011 22:16:22

а в styles.css пусто

вот всё что лежит у меня в template_styles.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height:1;
background:url(../img/fon/body.gif) top left;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:hover {
text-decoration:none;
}
/*-- Óñòðàíåíèå float*/
.cl {
clear: both !important;
border: none !important;
overflow: hidden !important;
display: block !important;
height: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.cf:after {
clear: both;
display: block;
content: ".";
height: 0px;
visibility: hidden;
font-size: 0;
line-height: 0;
}
.cf {
display: inline-block;
}
* html .cf {
height: 1%;
}
.cf {
display: block;
}
li.cf {
display: list-item;
}
/*--end Óñòðàíåíèå float*/
/* main class and id */
.left {float: left}
.right {float: right}
.noborder {border: none;}
.nobackg-d {background: none;}
#box {}
/* end main class and id */
#main {
width:1293px;
margin:0 auto;
background:url(../img/fon/main.png) repeat-y top center;
}
#ten_r{
width:1194px;
padding-right:49px;
background:url(../img/ten/main_r.png) top right repeat-y;
min-height:400px;
}
#ten_l{
width:1194px;
padding-left:50px;
background:url(../img/ten/main_l.png) top left repeat-y;
}
#top {
height:709px;
width:1193px;
background:url(../img/fon/top.jpg) top left;
}
#top_menu {
position:relative;
width:200px;
top:278px;
left:542px;
}
#top_menu a {
margin-right:28px;
}
#serch_form {
position:relative;
width:418px;
top: 322px;
left:386px;
font-family:"Times New Roman", Times, serif;
font-size:14px;

}
#serch_form .text_s {
width:400px;
height:16px;
margin-bottom:-1px;
border:1px solid #74afbf;
border-right:none;
position:relative;
}
#serch_form .submit_s {
width:17px;
height:20px;
border:none;
background:url(../img/fon/buttom_serch.gif) top left;
position:relative;
}
.text_serch {
width:401px;
float:left;
}
.text_serch_submit {
width:17px;
height:20px;
float:left;
}
#vhod {
width:430px;
position:relative;
top:337px;
left:387px;
}
#login_user input {
width:174px;
height:21px;
border:none;
padding:0;
background:url(../img/fon/line1.png) top left;
font-family:"Times New Roman", Times, serif;
color:#40acc6;
font-size:14px !important;
padding:0 14px;
}
#login_user .login {
margin-bottom:3px;
}
#login {
width:206px;
float:left;
}
#login a {
font-family:Verdana, Geneva, sans-serif;
color:#000;
font-size:10px;
}
#login .login_link {
font-size:10px;
padding:3px 0 0 87px;
}
#summ {
font-family:"Times New Roman", Times, serif;
font-size:14px;
width:206px;
float:left;
}
#summ div {
width:176px;
height:18px;
padding:3px 14px 0 14px;
background:url(../img/fon/line2.png) top left;
margin-bottom:3px;
}
#summ a {
color:#FFF;
}
#summ_rub {
color:#fff;
}
#summ_rub span, #tov {
color:#fffc00;
}
#content {
width:1059px;
margin-left:71px;
margin-top:-86px;
}
#left {float:left; width:213px;}
#center {float:left; width:578px; padding:0 25px; margin-top:-70px;min-height:200px;}
#right {float:right; width:218px;}
#main_menu {
font-size:14px;
font-family:"Times New Roman", Times, serif;
margin-left: 18px;
}
#main_menu a {
color:#fff;
padding-left:18px;
background:url(../img/fon/a_menu.png) no-repeat 0px 4px;
}
#main_menu li {
padding:2px 0 3px 10px;
margin-bottom:11px;
}
#main_menu #active {
background:url(../img/fon/li_menu.png) top left no-repeat;

}
#main_menu #active a {
text-decoration:none;
color:#fffc00;
}
#news {
font-family:"Times New Roman", Times, serif;
font-size:14px;
padding:0 0 0 21px;
margin:0 0 45px 0;
}
#news a {
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#news .news_date {
color:#FFF;
margin:0 0 4px 0;
}
#news .news_title {
text-decoration:underline;
color:#fffc00;
margin:0 0 20px 0;
width:156px;
}
#news .news_images {
margin:0 0 10px 0;
}
#news .news_next {
padding:0 0 0 15px;
background:url(../img/fon/a_news.png) no-repeat 0 5px;
}
#news .news_next a{
color:#fff;
}

/*bottom*/
#bottom {
margin-right:1px;
}
#tel {
width:338px;
height:231px;
background:url(../img/fon/left.jpg) no-repeat 0px 0px;
position:relative;
bottom:0px;
left:0px;
float:left;
}
#tel {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#fff;
}
#tel div{
margin:54px 0 0 146px;
}
#tel .two {
padding:3px 0 0 35px;
}
#copy {
width:519px;
float:left;
text-align:center;
font-size:11px;
color:#c0c0c0;
font-family:Verdana, Geneva, sans-serif;
margin-top:161px;
}
#studio {
width:334px;
height:231px;
background:url(../img/fon/right.jpg);
float:right;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#c0c0c0;
}
#studio div {
margin:51px 0 0 74px;
line-height:13px;
}

#nameS1, #nameS2 {
display:none;
}
.textP {
float:left;
margin:2px 0 0 0;
}
#chek_serch1, #chek_serch2 {
float: left;
height:9px;
width:10px;
background:#7098dc url(../img/fon/buttom_serch_filtr.gif) no-repeat 10px 0px;;
margin:6px 9px 0 23px;
cursor:pointer;
}

Пользователь 63216 Заглянувший Сообщений: 13 Регистрация: 10.05.2010	#7 24.07.2011 22:33:06 Ничего страшного что там пусто. Можно стили шаблона держать в одном файле.

Пользователь 97104

Заглянувший

Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011

24.07.2011 22:38:55

Цитата
Артём Соловьёв пишет: Ничего страшного что там пусто. Можно стили шаблона держать в одном файле.

Артем я вроде все сделала посмотрите скриншот на сайте нет стилей,хотя всё заполнила вроде)

Прикрепленные файлы

2011-07-24_220821.png (88.77 КБ)

Пользователь 63216 Заглянувший Сообщений: 13 Регистрация: 10.05.2010	#9 24.07.2011 22:57:02 Не видел такого чтобы шаблон не смог подцепить стили template_styles.css , ну если только нет строки <?$APPLICATION->ShowHead()?> Создайте шаблон ещё раз.

Пользователь 97104 Заглянувший Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011	#10 24.07.2011 23:10:14 <?$APPLICATION->ShowHead()?> эту строку вставляла в header

Пользователь 97104

Заглянувший

Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011

#11

24.07.2011 23:13:32

Содержимое файла header посмотрите тут все необходимое ?

<!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">
<head>
<title><?$APPLICATION->ShowTitle()?></title>
<?$APPLICATION->ShowHead();?>
<script type="text/javascript" src="js/jquery-1.5.1.min.js" ></script>
<script type="text/javascript" src="js/visual.js"></script>
</head>
<body>
<?$APPLICATION->ShowPanel();?>
<div id="main" class="cf">
<div id="ten_l" class="cf">
<div id="ten_r" class="cf">
<div id="top">
<div id="top_menu">

<form id="serch_form" class="cf">
<div class="text_serch"><input type="text" value="" class="text_s" /></div>

<div class="text_serch_submit"><input type="submit" value="" class="submit_s" /></div>
<div id="chek_serch1"></div><div class="textP">поиск по названию...</div>
<div id="chek_serch2"></div><div class="textP">по производителю...</div>
<input type="checkbox" id="nameS1" class="name1" />
<input type="checkbox" id="nameS2" class="name1" />
</form>
<div id="vhod" class="cf">
<div id="login">
<form id="login_user">
<input type="text" value="Логин" class="login" /><br />
<input type="text" value="Пароль" />
</form>
<div class="login_link">вход | регистрация</div>
</div>
<div id="summ">
<div id="tov">в вашей корзине: 12 товаров</div>
<div id="summ_rub">на сумму: <span>12 000 рублей</span></div>
</div>
</div>
</div>
<div id="content" class="cf">
<div id="left">
<div id="main_menu">

</div>

</div>
<div id="center" class="cf">content</div>
<div id="right">
<div id="news">
<div class="news_date">11.03.09</div>
<div class="news_title">Текст очень полезного совета который прочтет Яндекс робот</div>
<div class="news_images">

/images/1.jpg" height="132" width="109" alt="foto" /></div>
<div class="news_next">Подробнее о акциях</div>
<div class="news_"></div>
</div>
<div id="news">

</div>
</div>
</div>
<div id="bottom" class="cf">
<div id="tel">
<div>

т.(095)123-456-678

Пользователь 97104 Заглянувший Сообщений: 30 Баллов: 1 Регистрация: 24.07.2011	#12 24.07.2011 23:16:10 наверняка в содержимом файле что выше ,что то не так,ну js не прикрепила но не думаю что это играет роль невывода дизайна

Пользователь 63216 Заглянувший Сообщений: 13 Регистрация: 10.05.2010	#13 24.07.2011 23:19:05 Ответил в личку.

Как html-макет можно адаптировать в шаблон для битрикса?

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером