Сообщений в теме: 62

[audir853]

Здравствуйте всем!
Помогите пожалуйста, самому не разобраться, нужно сделать на фоне вот эту картинку:

нужно ее сделать повторяющуюся, для ускорения загрузки сайта, но тогда нужно сделать и логотип, корзину, полосу меню и поиск отдельно, в это и есть вся сложность.
Еще нужно ниже по бокам разместить две картики, вот эти:







Может будет лучше использовать другой шаблон для этого?Заранее спасибо!

[support 2.0]

Здравствуйте, можете написать номер Вашего аккаунта и по возможности сделать изображение, где будет показано как Вы хотите, чтоб это выглядело на сайте

[audir853]

support 2.0 (28 Июнь 2013 - 14:25) писал:

Здравствуйте, можете написать номер Вашего аккаунта и по возможности сделать изображение, где будет показано как Вы хотите, чтоб это выглядело на сайте

Номер аккаунта SL-217693.
вот картинка, вот так я хочу сделать:

support 2.0 (28 Июнь 2013 - 14:25) писал:

Здравствуйте, можете написать номер Вашего аккаунта и по возможности сделать изображение, где будет показано как Вы хотите, чтоб это выглядело на сайте

вот то что получилось сделать http://s849353.storeland.ru/

[support 2.0]

audir853 (28 Июнь 2013 - 14:35) писал:

Номер аккаунта SL-217693.
вот картинка, вот так я хочу сделать:



вот то что получилось сделать http://s849353.storeland.ru/

Для начала Вам нужно создать изображение с этими запчастями. Т.е. Вам нужно создать изображение с этими изображениями с прозрачным фоном в фотошопе (формат png). Расстояние между этими запчастями должно быть 960 пикселей, также отступ сверху должен быть примерно 200 пикселей.
Далее зайдите в файл main.css  и найдите код (Вы его постоянно меняете, поэтому он может отличаться немного

body {
background-color: #212121;
min-width: 960px;
}
#wrapper {
background-color: #fff;
padding-bottom: 10px;
}
.b_page {background: url(http://s849353.storeland.net/header_page.png) no-repeat center top;}
/*Typography*/
body {
font-family: Helvetica, Arial, sans-serif;
}

замените его на

body {
background: url({ASSETS_IMAGES_PATH}grid.jpg) repeat-x scroll left top transparent;
min-width: 960px;
}
#wrapper {
padding-bottom: 10px;
}
.b_page {background: url({ASSETS_IMAGES_PATH}123.jpng) no-repeat center top;}
/*Typography*/
body {
font-family: Helvetica, Arial, sans-serif;
}

grid.jpg - изображение Вашего фона
123.png - изображение Ваших запчастей. Сохраните и загрузите их с таким именем

Вы можете на это изображение запчастей добавить и изображение поиска и корзину. Также изменить цвет меню (это можно сделать с помощью стилей) мы Вам поможем

[audir853]

большое спасибо!!!Теперь нужно сделать логотип, полосу верхнего меню, поиск, сделать лист белым, и переместить правый блок с категориями влево

посмотрите вот здесь http://demo.advantshop.net/ , вверху нажмите "Трансформер дизайна" и выбирите тему Авто, вот такой дизайн мне нужно сделать

[support 2.0]

audir853 (28 Июнь 2013 - 17:15) писал:

большое спасибо!!!Теперь нужно сделать логотип, полосу верхнего меню, поиск, сделать лист белым, и переместить правый блок с категориями влево

посмотрите вот здесь http://demo.advantshop.net/ , вверху нажмите "Трансформер дизайна" и выбирите тему Авто, вот такой дизайн мне нужно сделать

давайте сначала начнем с логотипа:
зайдите в HTML и найдите строчку

<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/"><span>На главную</span></a></div>

замените ее на

<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/" title="На главную"><span></span></a></div>

теперь зайдите в файл main.css и найдите

#logo {
height: 134px;
}
#logo a{
height: 110px;
width: 150px;
margin-top: 10px;
display:block;
} #logo a span {
display: none;
}

замените на

#logo {
height: 134px;
}
#logo a{
height: 110px;
width: 252px;
margin-top: 10px;
display:block;
} #logo a span {
background: url({ASSETS_IMAGES_PATH}logo.png)no-repeat;
position: absolute;
top: 10px;
width: 245px;
height: 100px;

}

теперь осталось загрузить тот логотип logo.png

теперь найдите

#contactInfo {
position:absolute;
font-size:1.1em;
top: 10px;
left: 170px;
}

замените на

#contactInfo {
position:absolute;
font-size:1.1em;
top: 10px;
left: 260px;
}

теперь перейдем к поиску
найдите в main,css блок

#search{
height: 35px;
float: right;
padding-top: 45px;
padding-right: 15px;
width: 245px;
}

сразу после него вставьте

#search div {
background:#fff;
	 -moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
box-shadow: inset 2px 2px 0px;
}

теперь осталось Вам удалить изображение search_but.gif и вместо него загрузить свое с точно таким же именем (search_but.gif)

идем дальше: найдите блок

#cpages {
background: url({ASSETS_IMAGES_PATH}cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
}

замените его на

#cpages {
background: #fff;
padding-top: 10px;
-moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
}

теперь приступим к меню:
найдите блок

#top-menu {height: 40px;overflow: hidden;} #mainmenu li, #langmenu li { display:inline;}

замените на

#top-menu {margin-top: 10px;height: 40px;overflow: hidden;background: #008fff; /* Для старых браузров */
background: -moz-linear-gradient(bottom, #008fff, #005599); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left bottom, left top,				 color-stop(0%,#008fff), color-stop(100%,#005599));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(bottom, #008fff, #005599);
background: -o-linear-gradient(bottom, #008fff, #005599); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom, #008fff, #005599); /* IE10 */
background: linear-gradient(bottom, #008fff, #005599); /* CSS3 */
;margin-bottom: 5px;-moz-border-radius: 5px; /* Для Firefox 3 */	 -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */	 border-radius: 5px; /* Для современных браузеров */;} #mainmenu li, #langmenu li { display:inline;}

и можно еще немного поднять каталог:
найдите блок

.content_page {
background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 710px 68px;
overflow:hidden;
padding-bottom: 2em;
}

замените на

.content_page {
background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 710px 0px;
overflow:hidden;
padding-bottom: 2em;
}

и найдите

.content_catalog {
padding-top:80px;
vertical-align:top;
}

замените на

.content_catalog {
padding-top:30px;
vertical-align:top;
}

Прикрепленные изображения

• 

Сообщение отредактировал sengun: 28 Июнь 2013 - 21:33
добавлены тени на поиск

[audir853]

СПАСИБО ВАМ ОГРОМАДНОЕ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[audir853]

еще хотелось бы по краям листа вставить тени (тонкие полоски, оконтовки), чтобы визуально отделить лист от фона, и изменить футер на этот, нужно сделать его повторяющимся:

[Vaccina]

Для задания тени - найдите в вашем файле стилей main.css

#cpages {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 5px 5px 5px 5px;
	padding-top: 10px;
}

и замените на

#cpages {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 3px #000000;
	padding-top: 10px;
}

для подвала вам необходимо в шаблоне "HTML" найти

<!-- Подвал сайта -->
  <div id="footer">
	<div class="left">
	  <p>&copy; {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
	  <ul>
		{% FOR menu %}
		  {% FOR footer %}
			{% FOR links %}<li {% IF menu.footer.links.last %}class="last"{% ENDIF %}><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
	<div class="right"><p>{COPYRIGHT_FOR_DESIGN_SHINE} {SETTINGS_STORE_REGION}</p></div>
	<div class="clr"></div>
	<div>{SETTINGS_STORE_HTML_CODE}</div>
  </div>

и заменить на

<!-- Подвал сайта -->
  <div id="footer">
	<div>
	<div class="left">
	  <p>&copy; {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
	  <ul>
		{% FOR menu %}
		  {% FOR footer %}
			{% FOR links %}<li {% IF menu.footer.links.last %}class="last"{% ENDIF %}><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
	<div class="right"><p>{COPYRIGHT_FOR_DESIGN_SHINE} {SETTINGS_STORE_REGION}</p></div>
	<div class="clr"></div>
	<div>{SETTINGS_STORE_HTML_CODE}</div>
<div>
  </div>

далее найдите в файле стилей

#footer {
	background: url("http://s849353.storeland.net/footer_bg.jpg") no-repeat scroll center top transparent;
	height: 60px;
	margin: 0 auto;
	padding: 10px;
	width: 940px;
}

и замените на

#footer {
	background: url("http://s849353.storeland.net/footer_bg.jpg") repeat scroll center top transparent;
	height: 60px;
	padding: 10px 0;
	width: 100%;
}

далее добавьте

#footer > div {
	margin: 0 auto;
	width: 940px;
}
.ui-datepicker {
	display: none;
}

[audir853]

Спасибо большое, но футер не появился на сайте, почему?
Еще нужно сделать чтобы у категорий были значки, как на этом сайте http://gtuning.ru/
и еще нужно добавить изображение корзины

[miyako]

audir853 (29 Июнь 2013 - 11:59) писал:

Спасибо большое, но футер не появился на сайте, почему?
Еще нужно сделать чтобы у категорий были значки, как на этом сайте http://gtuning.ru/
и еще нужно добавить изображение корзины

Футер у вас отображается. Если вы про фон, то картинка к футеру длиной 188 px, сам футер у вас 60 px. Поэтому либо уменьшить изображение footer_bg.jpg либо увеличить длину футера.

[miyako]

Иконки для категорий  -
Найдите в шаблоне HTML примерно такой код:

<!-- Каталог -->
			  <div class="pad-box">
				<ul class="leftmenu">
				  <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
					<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">
							<a href="{catalog.URL}"
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul><br />
				  </li>

и перед кодом -

<a href="{catalog.URL}"

нужно вставить код иконок, если это изображение, то так:
<img src="путь до изображения">

Подобная тема здесь - http://forum.storela...еню/#entry28973

По изображению корзины не понятно как оно должно располагаться.

[audir853]

изображение корзины должно должно быть там где корзина вверху в хэдере, чтобы людям сразу было видно что это корзина

[miyako]

audir853 (29 Июнь 2013 - 12:21) писал:

изображение корзины должно должно быть там где корзина вверху в хэдере, чтобы людям сразу было видно что это корзина

Найдите в шаблоне HTML код:

<div id="cartInfo">

и замените на:

<div id="cartInfo"><img src="путь до изобажения" width="20px" style="
	float: left;
	padding: 0px 0px 0px 45px;
">

Найдите в main.css код:

#cartInfo a {
color: #000;
text-transform: uppercase;
padding: 5px 0px 5px 45px;
}

и замените на:

#cartInfo a {
color: #000;
text-transform: uppercase;
padding: 5px 0px 5px 7px;
}

[Intimento]

Подскажите, пожалуйста, как изменить фон в теме Сияние? Нужен однотонный фон красного или сиреневого оттенка.

[Сake]

Вы можете произвести например следующие изменения в вашем файле стилей main.css для корректного задания фона.

Найдите

#wrapper {
	background-color: #FFFFFF;
	padding-bottom: 10px;
}

и замените на

#wrapper {
	padding-bottom: 10px;
}

далее найдите

body {
	background-color: #212121;
	min-width: 960px;
}

и замените на

body {
	background-color: #EF2243;
	min-width: 960px;
}

далее найдите

.content_page {
	background: url("http://design.intimento.ru/content-page-br.gif") no-repeat scroll 230px 68px transparent;
	overflow: hidden;
	padding-bottom: 2em;
}

и замените на

.content_page {
	background: url("http://design.intimento.ru/content-page-br.gif") no-repeat scroll 230px 68px #FFFFFF;
	border-radius: 10px;
	margin-top: -10px;
	overflow: hidden;
	padding-bottom: 2em;
}

далее найдите

#footer {
	background: url("http://design.intimento.ru/footer_bg.jpg") no-repeat scroll center top transparent;
	height: 60px;
	margin: 0 auto;
	padding: 10px;
	width: 940px;
}

и замените на

#footer {
	background: #fff;
	height: 60px;
	margin: 0 auto;
	padding: 10px;
	width: 940px;
	border-radius: 10px;
}

[Intimento]

Спасибо! А возможно саму заставку "Сияние" изменить на однотонный фон?

[miyako]

Intimento (17 Июль 2013 - 10:38) писал:

Спасибо! А возможно саму заставку "Сияние" изменить на однотонный фон?

Найдите код в main.css:

.b_page {background: url(http://design.intimento.ru/header_page1.jpg) no-repeat center top;}

и замените на:

.b_page {}

Тогда у Вас будет полностью розовым цветом. Для того, чтобы появилась шапка другого цвета - добавьте в конец  main.css код:

#header{background: red;}

Цвет red измените на Ваш.

[Intimento]

Фон изменила -спасибо, но исчез логотип и корзина с поисковой строкой стали незаметны(
1. Как вставить логотип?
2. Как сделать видимой корзину с поисковой строкой?
http://intimento.ru/

[sengun]

Intimento (17 Июль 2013 - 21:55) писал:

Фон изменила -спасибо, но исчез логотип и корзина с поисковой строкой стали незаметны(
1. Как вставить логотип?
2. Как сделать видимой корзину с поисковой строкой?
http://intimento.ru/

1. В html код

<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/"><span>На главную</span></a></div>

замените на этот

<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/" alt="На главную"><img src="{ASSETS_IMAGES_PATH}Логотип.png" alt="На главную"></a></div>

2. Лучше всего картинки вставить. По крайней мере, для поиска точно, потому что там есть кнопка поиска, ее надо выделить графически.
Для поиска нужно картинку 245х28 pix , где в правок части 28х28 pix будет кнопочка поиска. Загрузите это изображение и в конец main.css добавьте код

#search div{
background: url("{ASSETS_IMAGES_PATH}Search_pic.png") no-repeat;
}

А для корзины можно пока фон прописать в коде

#cartInfo {
position:absolute;
font-size: 13px;
top: 54px;
left: 380px;
white-space:nowrap;
overflow:hidden;
height:20px;
width: 340px;
}

добавьте background: white; , например. А width: 340px; замените на width: 300px;
Либо так же загрузите картинку и вместо background: white; пропишите фон по аналогии с поиском background: url("{ASSETS_IMAGES_PATH}Search_pic.png") no-repeat;
Картинка будет ширины какой зададите (width: 340px; сейчас) и любой высоты (height:20px; сейчас).