Перейти к содержимому


Вопросы По Дизайну

шапка шрифт цвет

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 20

#1 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 13:57

Вопросы:
1. Как в шапке заменить серый цвет (см.приложение) указала стрелками. Хотелось бы поменять на шоколадный цвет, как в теме "шоколад" и еще в подвале серый цвет убрать
2. Как изменить в каталоге магазина фиолетовый цвет, который выделяет разделы на другой. А также поменять шрифт и размеры в каталоге (который находится слева)

Аккаунт SL-345040

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

  • 11.jpg


#2 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Май 2015 - 14:24

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 13:57) писал:

Вопросы:
1. Как в шапке заменить серый цвет (см.приложение) указала стрелками. Хотелось бы поменять на шоколадный цвет, как в теме "шоколад" и еще в подвале серый цвет убрать
2. Как изменить в каталоге магазина фиолетовый цвет, который выделяет разделы на другой. А также поменять шрифт и размеры в каталоге (который находится слева)

Аккаунт SL-345040
Здравствуйте.
1) Нужно изменить цвет у изображений header-bg.jpg и bg-repeat-x.jpg.
2) В main.css найдите код
.block .main.ullinks li a:hover { background:url({ASSETS_IMAGES_PATH}range-white.png?design=joy) #be91cf center right no-repeat; color:#fff; }
измените цвет #be91cf на свой
так же в конец main.css добавьте
.block .main.ullinks li.anone a {
  background-color: #F00 !important;
  font-size: 13px;
  font-family: Arial;
}
изменяйте стили на свои

#3 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 16:22

я загрузила код для баннеров, но у меня почему-то нет картинок, посмотрите пожалуйста, что я не так сделала((( или надо определенного размера картинки????
картинка banner1.png
Аккаунт SL-345040

/*Главные индификаторы*/

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

#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #E09814; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }

#container{ width: 100%; overflow-x: hidden; position: relative; padding: 0; background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg?design=joy') #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;}

#content { width: 72.1%; margin-left: 0.002%; display: table-cell; float: left; margin: 0% 0.7% 0% 0%; background: white; min-height: 100%; float: right; clear: both;} #leftcolum { width: 25.9%; min-width: 247px; padding: 0em 1px 0.5em 0.7%; display: block;} #footer { clear:both; }
/* фикс для ie7 */
#content {
  *min-height: 1500px;
}
.ie7 .htmlDataBlock {
  padding:0px 4px;
}

/* фикс для ie7 */
#footer { background:url('{ASSETS_IMAGES_PATH}footer-bg.jpg?design=joy') repeat-x; margin:0 auto; width: 98%; height: 79px; }
#footer-order { margin: 1% auto; padding: 0; width: 55%; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.paymet-list {
  display: block;
}
.paymet-list li {
  padding: 2px;
  display: block;
  float: left;

я желтым выделила серый цвет? правильно????

#4 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Май 2015 - 17:49

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 16:22) писал:

я загрузила код для баннеров, но у меня почему-то нет картинок, посмотрите пожалуйста, что я не так сделала((( или надо определенного размера картинки????
картинка banner1.png
Аккаунт SL-345040

/*Главные индификаторы*/

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

#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #E09814; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }

#container{ width: 100%; overflow-x: hidden; position: relative; padding: 0; background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg?design=joy') #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;}

#content { width: 72.1%; margin-left: 0.002%; display: table-cell; float: left; margin: 0% 0.7% 0% 0%; background: white; min-height: 100%; float: right; clear: both;} #leftcolum { width: 25.9%; min-width: 247px; padding: 0em 1px 0.5em 0.7%; display: block;} #footer { clear:both; }
/* фикс для ie7 */
#content {
  *min-height: 1500px;
}
.ie7 .htmlDataBlock {
  padding:0px 4px;
}

/* фикс для ie7 */
#footer { background:url('{ASSETS_IMAGES_PATH}footer-bg.jpg?design=joy') repeat-x; margin:0 auto; width: 98%; height: 79px; }
#footer-order { margin: 1% auto; padding: 0; width: 55%; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.paymet-list {
  display: block;
}
.paymet-list li {
  padding: 2px;
  display: block;
  float: left;

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

#5 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 18:17

Как в шапке заменить серый цвет (см.приложение) указала стрелками. Хотелось бы поменять на шоколадный цвет, как в теме "шоколад" и еще в подвале серый цвет убрать, а заменить на шоколадный.
Вы мне написали :
Нужно изменить цвет у изображений header-bg.jpg и bg-repeat-x.jpg. вот я и спрашиваю, вот здесь надо цвет менять???

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

#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #E09814; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }

#6 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 18:29

А второй вопрос с баннером не получается

  </ul>
            <div class="banner" style="margin-top: 20px;">
<a href="#"><img src="banner1.png"></a>
<a href="#"><img src="banner2.png"></a>
<a href="#"><img src="banner3.png"></a>
</div>
</div>
        <div class="bottom"></div>
</div>
я как у вас написано все сделала, но картинка не появляется, я ее переименовала (т.е. свою картинку) в banner1.png и вставила в строчку которую я выделила, но картинка на сайте не появляется, их видно в левой колонке.

#7 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Май 2015 - 18:30

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 18:17) писал:

Как в шапке заменить серый цвет (см.приложение) указала стрелками. Хотелось бы поменять на шоколадный цвет, как в теме "шоколад" и еще в подвале серый цвет убрать, а заменить на шоколадный.
Вы мне написали :
Нужно изменить цвет у изображений header-bg.jpg и bg-repeat-x.jpg. вот я и спрашиваю, вот здесь надо цвет менять???

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

#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #E09814; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Цвет нужно изменять у самих изображений в графическом редакторе, как для подвала, так и для шапки.

#8 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 18:35

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

#9 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Май 2015 - 18:44

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 18:35) писал:

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

#10 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 18:50

ок)))) а с баннерами что сделать??

#11 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 21 Май 2015 - 18:51

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 18:50) писал:

ок)))) а с баннерами что сделать??
Код
<a href="#"><img src="banner1.png"></a>
<a href="#"><img src="banner2.png"></a>
<a href="#"><img src="banner3.png"></a>
замените на
<a href="#"><img src="ссылка/banner1.png"></a>
<a href="#"><img src="ссылка/banner2.png"></a>
<a href="#"><img src="ссылка/banner3.png"></a>


#12 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 18:59

все равно не идет, я картинку уже переименовала 1.png, ничего не получается, может картинка объемом большая??? какой размер должен быть?

#13 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 21 Май 2015 - 19:07

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 18:59) писал:

все равно не идет, я картинку уже переименовала 1.png, ничего не получается, может картинка объемом большая??? какой размер должен быть?

Здравствуйте.

Если я всё правильно понял, то вам нужно сделать следующее:
В шаблоне html найдите данный код:

<!-- Вывод левого меню  -->
<div id="leftcolum" class="fleft">
  <div class="block">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
				<div class="main ullinks fntarl fnt12">
						<ul>
						  {% IFNOT catalog_empty %}
								{% FOR catalog %}
								  {% IFNOT catalog.HIDE %}
										<li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								  {% ENDIF %}
								{% ENDFOR %}
						  {% ENDIF %}
						</ul>
						<div class="banner" style="margin-top: 20px;">
<a href="#"><img src="banner1.png"></a>
<a href="#"><img src="banner2.png"></a>
<a href="#"><img src="banner3.png"></a>
</div>
  </div>
				<div class="bottom"></div>
</div>

И замените его вот этим вот кодом:

<!-- Вывод левого меню  -->
<div id="leftcolum" class="fleft">
  <div class="block">
		 <div class="title green fmlptn fnt18 over "><a href="{CATALOG_URL}" class="arrow-toggle">Каталог <span>магазина</span></a></div>
				<div class="main ullinks fntarl fnt12">
						<ul>
						  {% IFNOT catalog_empty %}
								{% FOR catalog %}
								  {% IFNOT catalog.HIDE %}
										<li class="{% IF catalog.LEVEL>0%}anone{% ENDIF %} {% IF catalog.CURRENT %}fnt12 b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="margin-left:15px; background:#be91cf; color:#fff;padding-left:{catalog.LEVEL | multiply("10")}px"{% ENDIF %}>{catalog.NAME}</a></li>
								  {% ENDIF %}
								{% ENDFOR %}
						  {% ENDIF %}
						</ul>
						<div class="banner" style="margin-top: 20px;">
<a href="#"><img src="{ASSETS_IMAGES_PATH}1.png"></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}2.png"></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}3.png"></a>
</div>
  </div>
				<div class="bottom"></div>
</div>

Где 1.png, 2.png и 3.png - это имена изображений, которые вы должны загрузить точно так же, как и первое изображение в раздел Сайт -> Редактор шаблонов.

#14 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 19:09

ок, сейчас попробую

#15 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 19:21

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

вопрос снят, спасибо, сама сообразила)))

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

  • 11.jpg


#16 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 21 Май 2015 - 19:22

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 19:17) писал:

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

Да, если вы в графическом редакторе измените данное изображение, а потом его снова загрузите на сайт следующий образом:
Сайт -> Редактор шаблонов, выберите картинку, из блока Изображения, что находится слева - откройте её и после этого нажмите на кнопку заменить и выберите отредактированный файл.
После этого обновите кэш на сайте и вы увидите обновлённый логотип вашего интернет-магазина.
Проверьте, пожалуйста.

#17 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 19:31

ок, попробую, а еще вопрос возможно ли этот хедер сделать пошире?

всмысле высоту добавить???? чтобы название уместить?

#18 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 21 Май 2015 - 19:34

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 19:31) писал:

ок, попробую, а еще вопрос возможно ли этот хедер сделать пошире?

всмысле высоту добавить???? чтобы название уместить?

Не совсем понимаю что именно вы сейчас имеете ввиду.
Уточните, пожалуйста, желательно обозначив на скриншоте то, что именно вам нужно.
Спасибо.

#19 Екатерина79

Екатерина79

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

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 21 Май 2015 - 19:39

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

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

  • 11.jpg


#20 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 21 Май 2015 - 20:06

Просмотр сообщенияЕкатерина79 (21 Май 2015 - 19:39) писал:

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

Да, в принципе это возможно, если произвести изменения в коде.
Однако желательно это делать уже после установки вами нового изображения в шапку сайта.





Темы с аналогичным тегами шапка шрифт, цвет

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

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