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

[Наталья]

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

Прошу оказать посильную помощь новичку в таком виде искусства как оформление сайта. В чем-то уже успела разобраться благодаря форуму, а какие-то вещи не догоняю. Очень сложно, до конца не понимаю некоторую терминологию. С Вашего позволения, решила задать свои вопросы в картинках.  Мой шаблон "Мокко". Сайт www.stoneflower-shop.ru.

Заранее спасибо.

С уважением, Наталья

 оформление сайта.htm   30,94К   162 Количество загрузок:
  

[Наталья]

Друзья, спасибо. С первым вопросом разобралась! Для этого нужно было пожаловаться...  :-)

[Vaccina]

Изображение 2:

В файле стилей main.css добавьте класс

#breadcrumb strong {
 color:#000;
}

Далее измените свойство color(цвет) на соответствующее.

Изображение 3:

В разделе редактора тем найдите и измените изображение "nav_item_bg.gif" в каком нибудь графическом редакторе, далее просто замените его на свое.

Изображение 4:

Для изменения фона и шрифта используйте класс

.cartFormThead th {
	background: none repeat scroll 0 0 #EEF5FB;
	font-weight: normal;
	padding: 0.5em;
	text-align: center;
	white-space: nowrap;
}

Для задания цвета измените #EEF5FB а для задания жирности свойство font-weight: normal; на font-weight: bold;

Для задания фона и цвета кнопок вам нужно создать класс

.ui-state-default {
	background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
	color: #555555 important;
}

далее изменить цвет в свойстве color и загрузить и поменять изображение в свойтве background или же заменить

background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;

на

background: #E6E6E6;

и поменять цвет #E6E6E6

Для придания "В корзине" вида кнопки можно использовать класс

#cartInfo a {
	color: #000000;
	text-transform: uppercase;
}

и заменить на

#cartInfo a {
	background: #DAD396;
	border-radius: 4px;
	color: #000000;
	padding: 5px;
	text-transform: uppercase;
}

#cartInfo a:hover {
	text-decoration: none !important;
}

Изображение 5:

Для задания цвета шрифта используйте класс

.goodsListItemName a {
	color: #2F97CB;
	font-size: 15px;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
}

и класс

.goodsListItemBlock a {
	color: #000000;
}

Для увеличения изображения вам нужно изменить значения в разделе Настройки -> Основные -> блок "Изображения товаров"

Изображение 6:

Найдите класс

#footer {
	background: url("http://img.storeland.ru/web/upload/assets/images/21/20823/botfade.jpg") repeat-x scroll 50% 100% transparent;
	border-top: 1px solid #CCCCCC;
	clear: both;
	color: #999999;
	font-family: verdana;
	height: 139px;
	margin: 0;
	padding: 0;
	text-align: center;
}

и измените свойство color, а так же удалите свойство height: 139px;

Далее добавьте новый класс

.ui-datepicker {
 display:none;
}

Изображение 7:

Для кнопки применяться автоматически от Изображения 4

Для заголовков используйте класс

.goodsDataMainDeliveryItemHeader {
	color: #555555;
	padding: 1em 0 0.5em 0.3em;
}

а для характеристик

.goodsDataMainDeliveryItemRules p span {
	border-bottom: 1px solid #FFFFFF;
	color: #666666;
}

Текст "Стоимость доставки зависит от суммы заказа" выводиться в одну линию, он может переноситься если не хватает места.

Изображение 8:

Используйте класс

#searchPanel label {
	padding-top: 2px;
}

для задания цвета добавьте свойство color с нужным цветом. А для переноса используйте класс

#searchPanel {
	position: absolute;
	right: 10px;
	top: 15px;
}

Для изменения местоположения меняйте значения top и right

[Наталья]

Вот спасибо! Все так популярно и наглядно! Но, к сожалению, какие-то позиции все еще требуют вашей профессиональной оценки...

1. Здесь не удалось поменять цвет шрифта и контурную рамку. Не понимаю, где напортачила, хотя цвет добавила...



2. При изменении фона с этой панелью обнаружила, что кнопка на самодельной вкладке ЛАРИДАРИЙ при поднесении курсора  не оживает, как на других. Это можно как-то исправить? Так же, чтобы привести к одной стилистике оформления хотелось бы и эти кнопки тоже округлить и внизу добавить контур. Как это сделать?



3. Когда перемещала панель поиска под шапку на левую сторону, она у меня не дошла до начала строки. Останавливается на середине надписи КАТАЛОГ ТОВАРОВ, если увеличиваю пиксили - то рассыпается сама панель поиска. Как исправить?

4. Вот здесь хотела бы центрировать заголовок ЛАПИДАРИЙ соответственно с отображением изменения на всех остальных страницах.



4. Особая благодарность за оформление кнопки В КОРЗИНЕ ТОВАРОВ НА. Здесь как можно добавить контурную рамку своего цвета и вставить элемент из паттерна в качестве фона?



5. И последнее, не сочтите за труд рассказать как сделать такую кнопку на КАТАЛОГ ТОВАРОВ с левой стороны, чтоб она была с контурной линией, с округлением и с фоном из паттерна.



С уважением, Наталья

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

• 

[Vaccina]

1.Чтобы изменять цвет шрифта и стиль окна,зайдите в редактор тем - main.css - найдите сл.блок:

input.ui-button {
	padding: 0.4em 1em;
}

и добавляйте туда нужные Вам значения.

2.В каком браузере у Вас данная кнопка "не оживает" ?
Округлить именно покнопочно или все меню целиком?
По поводу контура внизу - редактор тем - main.css - найжите сл.блок:

#mainNav table td div {
	background: url("http://img.storeland.ru/web/upload/assets/images/21/20823/nav_item_bg.gif") repeat-x scroll left bottom #FFFFFF;
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
}

и поменйте в нем значение height на 26, добавьте туда overflow: hidden;


3.От центровать не получится только подвинуть в сторону для этого в том же файле найдите:

h1 {
	color: #15852F;
	font-size: 1.9666em;
	font-weight: lighter;
	line-height: 1.1538em;
	margin: 0.7692em 0 0.3846em;
}

и добавьте туда padding-left: 130px; (значение можно менять)

4.В том же файле найдите сл.блок:

#cartInfo a {
	background: none repeat scroll 0 0 #F5F2CB;
	border-radius: 4px 4px 4px 4px;
	font-weight: bold;
	padding: 5px;
	text-transform: uppercase;
}

для бордюр используется сл.стиль: border: 2px solid #000000; (значение цвета и ширины можно вставить свое)
а чтобы вставить картинку туда же достаточно залить фаил в редакторе тем и прописать ссылку к нему в уже имеющимся background

5.немного не поняла. Вы хотите оформить саму надпись каталог товаров?

[Наталья]

Уважаемая Vaccina!

1. Не обессудьте, но не нахожу я этого блока в редакторе тем!!! Может мне нужно создать такой блок самой? Нужные значения - напомните, пожалуйста, значение цвета контурной рамки.

2. Округлить покнопочно у меня у самой как-то получилось :-) Спасибо. Этот вопрос отпал.

Не поняла вопрос с браузером. Я имела ввиду, что задний фон не увеличивается / шевелится при наведении курсора. У меня там 1 "кнопка", сделанная через Сайт - Страницы - это "Лапидарий", а вторая  - "В корзине товаров на". На тех кнопках, которые были уже в готовом шаблоне Мокко - Главная, Доставка, Корзина, Контакты - такая способность присутствует.

3.4. - Спасибо, все получилось!!!

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

6. Еще обратила внимание, что у меня пропало краткое содержание описания товара на странице товара. Можно что-нибудь сделать?

Заранее СПАСИБО!!!

Наталья.

[Vaccina]

1.Прошу простить, и в правду данный класс не в main.css
Тогда в main.css найдите сл.блок:

.ui-state-default {
	background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #F5F2CB;
}

border: ширина рамки px тип рамки #цвет рамки;
например:
border: 1px solid #000000;

2.на счет кнопки лапидарий там вроде швелится при наведении а вот где корзина нет. Чтобы и в корзине сделать такое заходим в main.css в самом низу прописываем:

#cartInfo a:hover{
 background-position: right bottom;
}

5. Для этого заходим в main.css находим сл.блок:

#leftMenuBlock {
	margin: 0 20px 0 0;
	width: 250px;
}

и прописываем туда нужные значение рамки и закругления,например:

#leftMenuBlock {
	border: 1px solid #000000;
	border-radius: 10px 10px 10px 10px;
	margin: 0 20px 0 0;
	width: 250px;
}

6.Тогда сверим код. Редактор тем - Товар - перед сл.кодом:

<!-- Короткое SEO-описание -->
{% IF GOODS_SEO_DESCRIPTION_SHORT %}
  <div style="padding-top:1em;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
{% ENDIF %}
<!-- END Короткое SEO-описание -->

должен находится этот:

<!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
  <h3>Описание {GOODS_NAME}</h3>
  <div class="htmlDataBlock">
	{GOODS_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->

если нету то допишите

[Наталья]

Ура! С 1 по 5 все получилось! Да здравствует Vaccina!

По поводу краткого описания товара - проверила, все в норме, ничего не потеряно. Есть ли другие варианты исправления или может быть удалить доставку, чтобы поднять описание товара выше...?

С уважением, Наталья.

[Vaccina]

Попробуйте после блока

<!-- Блок описания модификации -->
			  <tr>
				<td class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %} colspan="2">
				  {GOODS_MOD_DESCRIPTION}
				</td>
			  </tr>

добавить следующий блок в шаблоне "Товар"

{% IF GOODS_DESCRIPTION_SHORT %}
  <tr>
	<td class="goodsDataMainModificationsDescriptionBlock" colspan="2">
	  {GOODS_DESCRIPTION_SHORT}
	</td>
  </tr>
{% ENDIF %}

[Наталья]

Спасибо! Все получилось!