Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

3

Как Поменять Дизайн Сайта Радость.

Автор arutyun, 27 окт. 2013 01:58

Авторизуйтесь для ответа в теме

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

#1 arutyun

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

Пользователи
13 сообщений

Отправлено 27 Октябрь 2013 - 01:58

Помогите поменять шапку сайта, расположение корзины, поиска и т.д, хочу чтобы хотя бы не много отличался от шаблона. Спасибо.

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

Наверх

#2 miyako

Активный участник

Модератоpы
5 372 сообщений

Отправлено 27 Октябрь 2013 - 06:52

arutyun (27 Октябрь 2013 - 01:58) писал:

Помогите поменять шапку сайта, расположение корзины, поиска и т.д, хочу чтобы хотя бы не много отличался от шаблона. Спасибо.

Укажите пожалуйста Ваш номер аккаунта. Уточню по вопросам -
1) в каталоге как я поняла нужно сделать темнее фон категорий и увеличить не шрифт, а длину категорий?
2) путь в зеленом фоне нужно увеличить и в ширину и в длину? Шрифт не нужно менять?

Наверх

#3 arutyun

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

Пользователи
13 сообщений

Отправлено 27 Октябрь 2013 - 23:42

Аккаунт SL-161459.
1) Хотелось чтобы не фон, а само название сделать (гарнитура, телефоны и т.д) черным цветом, чтобы было легче читать каталог товаров и увеличить шрифт названий в этом же разделе.
2) А в зеленом фоне все оставить как есть только шрифт не много увеличить.

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

Наверх

#4 ne_yana

Активный участник

Модератоpы
1 190 сообщений

Отправлено 28 Октябрь 2013 - 09:21

arutyun (27 Октябрь 2013 - 23:42) писал:

Аккаунт SL-161459.
1) Хотелось чтобы не фон, а само название сделать (гарнитура, телефоны и т.д) черным цветом, чтобы было легче читать каталог товаров и увеличить шрифт названий в этом же разделе.
2) А в зеленом фоне все оставить как есть только шрифт не много увеличить.

Здравствуйте, чтобы увеличить текст на зеленом фоне, добавьте в файл main.css

.crumbs.padd51.fnt12.clr.txtalgnlft {
font-size: 15px;
}

Сейчас у Вас по-другому оформлено боковое меню, актуален ли вопрос насчет него?

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

Наверх

#5 arutyun

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

Пользователи
13 сообщений

Отправлено 30 Октябрь 2013 - 11:00

да

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

Наверх

#6 ne_yana

Активный участник

Модератоpы
1 190 сообщений

Отправлено 30 Октябрь 2013 - 12:03

arutyun (30 Октябрь 2013 - 11:00) писал:

да

Здравствуйте, чтобы изменить цвет и увеличить шрифт бокового меню, нужно в файле main.css заменить

.block .main.ullinks li a {
background: url(http://design.aksesiti.ru/range-black.png) #f6f4eb center right no-repeat;
padding: 0.4em 1.4em 0.4em 0.8em;
color: #707070;
display: block;
text-decoration: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

на

.block .main.ullinks li a {
background: url(http://design.aksesiti.ru/range-black.png) #f6f4eb center right no-repeat;
padding: 0.4em 1.4em 0.4em 0.8em;
color: #000000;
display: block;
text-decoration: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 14px;
}

Наверх

#7 arutyun

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

Пользователи
13 сообщений

Отправлено 01 Ноябрь 2013 - 23:27

Спасибо. Как мне шапку сайта и фон поменять. Фото я прилагаю, вот как хотелось чтоб было.

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

Наверх

#8 Koderhan

Активный участник

Модератоpы
6 227 сообщений

Отправлено 02 Ноябрь 2013 - 00:24

Не простая задача.
Предварительно создав резервную копию шаблона.

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "HTML".
Найти код:

<div id="header" class="clr">
  <div class="topmain over">
		<div class="logotype fleft txtalgnlft over"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}header-logo.jpg" alt="{SETTINGS_STORE_NAME}" title="{SETTINGS_STORE_NAME}" /></a></div>
		<div class="barright fright txtalgnrgh">
		 <div class="search fright over clr">
			<form action="http://{NET_DOMAIN}/search" id="searchform" method="get">
				<div class="block-shadow">
				  <input type="text" id="s" class="fnt11i" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" />
				  <div id="delete"><span id="x" >x</span></div>  
				</div>
				<input type="submit" class="button toSearch" src="{ASSETS_IMAGES_PATH}spacer.gif" value="" />
			</form>

	</div>
		</div>
	</div>
<div class="bottommain over clr">
	 <div class="headleft fleft txtalgncnt fmlptn fnt16 ">
			<ul>
				<li class="title"><a href="http://{NET_DOMAIN}/feedback"><span>Связаться</span> с Нами</a></li>
				{% IF SETTINGS_STORE_ICQ %}<li class="headerIcq"><img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" />{SETTINGS_STORE_ICQ}</li>{% ENDIF %}
				<li class="skype">{% IF SETTINGS_STORE_SKYPE %}<span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a>{% ENDIF %}</li>
				<li class="phone">
					<span class="phoneNum">
					  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<a class="tel1" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a>{%ENDIF%}
					  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<a class="tel2" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a>{%ENDIF%}
					  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<a class="tel3" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a>{%ENDIF%}
					</span>
				</li>

			</ul>
		</div>
		<div class="headright fright txtalgncnt fnt11 fmlptn cartInfo">
			<ul>
				<li class="title fnt16"><a href="{CART_URL}"><span>Ваша </span>Корзина</a></li>
				<li class="fntarl fnt11 i cartSum">В корзине товаров на сумму: {% IF cart_count_empty %} 0 {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %}{cart_sum.NOW | money_format}{% ENDFOR %}{% ENDIF %}</li>
				<li class="fntarl fnt11 i opencart"><a href="{CART_URL}">Открыть корзину</a></li>
			</ul>
		</div>
		{% IF SETTINGS_STORE_WORK_TIME %}<div class="headcent over fleft txtalgncnt fnt14 fmlptn"><span>Работает {SETTINGS_STORE_WORK_TIME}</span></div>{% ENDIF %}
	</div>
</div>

Заменить:

<div id="header" class="clr">


	<div class="headright fright txtalgncnt fnt11 fmlptn cartInfo">
			<ul>
				<li class="title fnt16"><a href="{CART_URL}"><span>Ваша </span>Корзина</a></li>
				<li class="fntarl fnt11 i cartSum">{% IF cart_count_empty %} 0 {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %}{cart_sum.NOW | money_format}{% ENDFOR %}{% ENDIF %}</li>

			</ul>
	</div>
	<div class="headleft fleft txtalgncnt fmlptn fnt16 ">
			<ul>
				<li class="title"><a href="http://{NET_DOMAIN}/feedback"><span>Связаться</span> с Нами</a></li>
				{% IF SETTINGS_STORE_ICQ %}<li class="headerIcq"><img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" />{SETTINGS_STORE_ICQ}</li>{% ENDIF %}
				<li class="skype">{% IF SETTINGS_STORE_SKYPE %}<span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a>{% ENDIF %}</li>
				<li class="phone">
					<span class="phoneNum">
					  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<a class="tel1" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a>{%ENDIF%}
					  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<a class="tel2" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a>{%ENDIF%}
					  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<a class="tel3" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}"><span class="telColor">&nbsp;|&nbsp;</span>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a>{%ENDIF%}
					</span>
				</li>

			</ul>
		</div>
	{% IF SETTINGS_STORE_WORK_TIME %}<div class="headcent over fleft txtalgncnt fnt14 fmlptn"><span>Работает {SETTINGS_STORE_WORK_TIME}</span></div>{% ENDIF %}

		  <div class="search fright over clr">
			<form action="http://{NET_DOMAIN}/search" id="searchform" method="get">
				<div class="block-shadow">
				  <input type="text" id="s" class="fnt11i" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" />

				</div>
				<input type="submit" class="button toSearch" src="{ASSETS_IMAGES_PATH}spacer.gif" value="" />
			</form>

	</div>

</div>

Панель администратора, "Сайт"->"Редактор Шаблонов".
В конец файла "main.css".
Добавить код:


.headleft.fleft.txtalgncnt.fmlptn.fnt16 {
	position: relative;
	top: 56px;
	left: 10%;
}
.headcent.over.fleft.txtalgncnt.fnt14.fmlptn {
	position: relative;
	left: 20%;
	top: 158px;
}
.search.fright.over.clr {
	position: relative;
	top: -55px;
	right: 4%;
	width: 17%;
}
#s {
	display: block;
	float: left;
	border: 1px solid black;
	line-height: 2;
	padding: 0px 3px;
}
#searchform > input {
	float: right;
	background-position:  1px 2px;
	height: 24px;
}

@media screen and (max-width: 760px) {
	#header {
		height: 200px;
		background: white;
}
}
@media screen and (max-width: 480px) {
	.headright.fright.txtalgncnt.fnt11.fmlptn.cartInfo {
	float: left;
	margin: 0;
	margin-top: 7px;
	margin-left: 8px;
}
.headleft.fleft.txtalgncnt.fmlptn.fnt16 {
	float: left;
	position: static;
	width: 100%;
	top: 0;
	left: 0;
	text-align: left;
	padding-left: 10px;
	padding-top: 10px;
}
.headcent.over.fleft.txtalgncnt.fnt14.fmlptn {
	position: static;
	padding-left: 10px;
	padding-top: 8px;
}
.search.fright.over.clr {
	position: static;
	width: 58%;
	float: right;
	padding-top: inherit;
}
.block-shadow {
	width: auto;
	border: 0;
	-webkit-box-shadow: initial;  
	-moz-box-shadow: initial;  
	box-shadow: initial;
	padding-top: 8px;
}
#searchform > input {
	height: 35px;
	float: right;
	display: block;
}
#s {
	float: right;
}
}

И для добавления на фон картинки.

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "main.css".
Найти код:

#header { background: url('{ASSETS_IMAGES_PATH}header-bg.jpg') -10px 42px no-repeat; height: 200px; width: 100%; margin:0 auto; position:relative; z-index: 22; }

Заменить:

#header { background: url('адрес до картинки') -10px 42px no-repeat; height: 200px; width: 100%; margin:0 auto; position:relative; z-index: 22; }

Размеры картинки должны быть похожи на размеры картинки header-bg.jpg

Наверх

#9 arutyun

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

Пользователи
13 сообщений

Отправлено 03 Ноябрь 2013 - 20:29

Очень благодарю, я попробую .

Наверх

#10 arutyun

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

Пользователи
13 сообщений

Отправлено 05 Ноябрь 2013 - 17:09

Данные которые я ввожу, все потом сливается на сайте. Не буду делать такие глубокие изменения, оставлю основу как есть, немного цвета поменяю. Подскажите пожалуйста, как мне сделать длиннее файл картинки header-bg.jpg. И как полностью поменять цвет темно-серой полосы.

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

Наверх

#11 Stasya

Активный участник

Модератоpы
4 007 сообщений

Отправлено 05 Ноябрь 2013 - 22:12

Вам необходимо скачать картинку header-bg.jpg и изменить ее в граф.редакторе.

Наверх

#12 arutyun

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

Пользователи
13 сообщений

Отправлено 06 Ноябрь 2013 - 15:51

я так и сделал и картинка получается короткой, как я и указал в изображении.

Наверх

#13 Koderhan

Активный участник

Модератоpы
6 227 сообщений

Отправлено 06 Ноябрь 2013 - 18:16

попробуйте переопределить фоновую картинку на другой блок. Просто данный блок ограничен шириной блока родителя.

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "main.css".
Найти код:

.devMainContent {
	max-width: 1000px;
	min-width: 300px;
	margin: 0 auto;
	width: 100%;
}

Заменить:

.devMainContent {
	max-width: 1000px;
	min-width: 300px;
	margin: 0 auto;
	width: 100%;
	background: url('{ASSETS_IMAGES_PATH}header-bg.jpg') -10px 42px no-repeat;
}

Найти код:

#header { background: url('{ASSETS_IMAGES_PATH}header-bg.jpg') -10px 42px no-repeat; height: 200px; width: 100%; margin:0 auto; position:relative; z-index: 22; }

Заменить:

#header { height: 200px; width: 100%; margin:0 auto; position:relative; z-index: 22; }

Наверх

#14 arutyun

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

Пользователи
13 сообщений

Отправлено 08 Ноябрь 2013 - 00:33

ни чего не изменилось.

Наверх

#15 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 08 Ноябрь 2013 - 04:51

Данное изменение у вас отсутствует.

.devMainContent {
		max-width: 1000px;
		min-width: 300px;
		margin: 0 auto;
		width: 100%;
		background: url('{ASSETS_IMAGES_PATH}header-bg.jpg') -10px 42px no-repeat;
}

Наверх

#16 arutyun

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

Пользователи
13 сообщений

Отправлено 09 Ноябрь 2013 - 19:47

Я все добавил. но все равно ни чего не изменилось.

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

Наверх

#17 miyako

Активный участник

Модератоpы
5 372 сообщений

Отправлено 10 Ноябрь 2013 - 07:59

arutyun (09 Ноябрь 2013 - 19:47) писал:

Я все добавил. но все равно ни чего не изменилось.

Найдите код -

#footer {
background: url('{ASSETS_IMAGES_PATH}footer-bg.jpg') repeat-x;
margin: 0 auto;
width: 98%;
height: 79px;
}

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

#footer {
background: url('{ASSETS_IMAGES_PATH}footer-bg.jpg') repeat-x;
margin: 0 auto;
width: 98%;
height: 79px;
max-width: 1000px;
min-width: 300px;
}

Далее найдите код -

#container {
width: 100%;
overflow-x: hidden;
position: relative;
padding: 0;
background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg') #fff left top repeat-y;
-moz-border-radius: 0em 0em 10px 10px;
-webkit-border-radius: 0em 0em 10px 10px;
border-radius: 0em 0em 10px 10px;
}

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

#container {
width: 100%;
overflow-x: hidden;
position: relative;
padding: 0;
background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg') #fff left top repeat-y;
-moz-border-radius: 0em 0em 10px 10px;
-webkit-border-radius: 0em 0em 10px 10px;
border-radius: 0em 0em 10px 10px;
max-width: 1000px;
min-width: 300px;
margin: 0 auto;
}

Далее найдите код -

#header {
height: 200px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 22;
}

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

#header {
height: 200px;
width: 100%;
margin: 0 auto;
position: relative;
max-width: 1000px;
min-width: 300px;
z-index: 22;
}

Далее найдите код -

.devMainContent {
max-width: 1000px;
min-width: 300px;
margin: 0 auto;
width: 100%;
background: url('{ASSETS_IMAGES_PATH}header-bg.jpg') -10px 42px no-repeat;
}

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

.devMainContent {
margin: 0 auto;
width: 100%;
background: url('{ASSETS_IMAGES_PATH}header-bg.jpg') -10px 42px repeat-x;
}

Наверх

#18 arutyun

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

Пользователи
13 сообщений

Отправлено 10 Ноябрь 2013 - 18:37

Спасибо. Он стал шире, но теперь вылезает за поля на фото все видно.

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

Наверх

#19 Stasya

Активный участник

Модератоpы
4 007 сообщений

Отправлено 11 Ноябрь 2013 - 00:23

Не совсем понятно что именно залезает за поля. Уточните, пожалуйста.

Наверх

#20 arutyun

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

Пользователи
13 сообщений

Отправлено 11 Ноябрь 2013 - 15:37

Вот вам изображение. Хочу чтоб шапка сайта была как на верхнем фоне.

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

Наверх

Обратно в Изменение общей стилистики

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Как Поменять Дизайн Сайта Радость.

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

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

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

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

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

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

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

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

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

Количество пользователей, читающих эту тему: 0

Войти

Google поиск