Изменить Несколько Элементов
#1
Отправлено 07 Апрель 2014 - 23:05
Необходима Ваша помощь, хочу реализовать следующее:
1. Необходимо логотип выровнять по центру, сейчас он смещен немного влево.
2. Блок корзины необходимо выровнять по центру, сместив немного вправо, иначе сумма заказа не помещается в этом блоке.
3. Skype и номер телефона выделить жирным, чтобы более заметно было.
4. Нужно, чтобы кнопка сравнить товар была такая же как "в корзину" и "быстрый заказ"
5. Убрать надписи: выберите модификацию товара, чтобы остались только наименование свойства и выбор.
#2
Отправлено 08 Апрель 2014 - 08:28
severyanin (07 Апрель 2014 - 23:05) писал:
Необходима Ваша помощь, хочу реализовать следующее:
1. Необходимо логотип выровнять по центру, сейчас он смещен немного влево.
2. Блок корзины необходимо выровнять по центру, сместив немного вправо, иначе сумма заказа не помещается в этом блоке.
3. Skype и номер телефона выделить жирным, чтобы более заметно было.
4. Нужно, чтобы кнопка сравнить товар была такая же как "в корзину" и "быстрый заказ"
5. Убрать надписи: выберите модификацию товара, чтобы остались только наименование свойства и выбор.
Здравствуйте,
1. В файле "main.css".
Найти:
#header .topmain .logotype { width: 30%; height: 100%; margin-left: 35%;}
Заменить:
#header .topmain .logotype { width: 23%; height: 100%; margin-left: 38%;}
2. В файле "main.css".
Найти:
#header .bottommain .headright { width: 29.3%; padding: 0.7% 0 0 0; margin-right: 3%; }
Заменить:
#header .bottommain .headright { width: 32%; padding: 0.7% 0 0 0; margin-right: 3%; }
3. Телефон
В файле "main.css".
Найти:
#header .bottommain .headleft ul .phone .phoneNum a { color: #8eac07; font-size: 100%; white-space: nowrap; }
Заменить:
#header .bottommain .headleft ul .phone .phoneNum a { color: #8eac07; font-size: 18px; white-space: nowrap; font-weight:700; }
Стили для Скайпа
В файле "main.css".
Добавить код:
#header .bottommain .headleft ul .skype { font-size: 20px; font-weight:700; }
font-size размер
font-weight жирность
4. Изменение стилей для кнопки Сравнение в карточке товара
добавляем данный код В конец файла "main.css".
Добавить код:
.goodsDataCompareButton { min-height: 25px; height: auto; font-size: 11px; line-height:2 !important; text-decoration:none !important; }
В шаблоне "Товар"
Находим:
{% IFNOT SETTINGS_COMPARE_DISABLE %} <li class="aunder silver"><a class="goodsDataCompareButton add padd1 fnt11 fntarl dinline txtalgncnt" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Сравнить товар</a></li> <li class="aunder silver"><a class="goodsDataCompareButton delete padd1 fnt11 fntarl dinline txtalgncnt" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Не сравнивать</a></li> {% ENDIF %}
Заменяем на:
{% IFNOT SETTINGS_COMPARE_DISABLE %} <li class="aunder silver"><a class="goodsDataCompareButton add orangebut padd1 fnt11 fntarl fntupcase dinline txtalgncnt" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Сравнить товар</a></li> <li class="aunder silver"><a class="goodsDataCompareButton delete orangebut padd1 fnt11 fntarl fntupcase dinline txtalgncnt" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Не сравнивать</a></li> {% ENDIF %}
5. В шаблоне "Товар"
Находим:
<div class="titlegood fnt16 i fntarl txtalgnlft clr">Выберите модификацию товара:</div>
Заменяем на:
<div class="titlegood fnt16 i fntarl txtalgnlft clr"></div>
#4
Отправлено 08 Апрель 2014 - 20:08
1. Необходимо, чтобы блоки с товарами, при отображении в виде таблицы (screen3.png) были одинакового фиксированного размера, независимо от того сколько текста в описании. Ограничить, например 10 строк текста, а то, что не влезет пусть скрывается троеточием или выводится при наведении мышью, как то так.
2. Так же текст в блоках отображается с большим расстоянием между словами, как это можно исправить?
3. Как выделить цену у товаров жирным шрифтом? (screen3.png)
#5
Отправлено 08 Апрель 2014 - 21:33
severyanin (08 Апрель 2014 - 18:26) писал:
Только блоки свойств товара размещаются теперь по горизонтали.
Как сделать так, чтобы они снова располагались вертикально?
В шаблоне "Товар" найдите строку
<div class="mod goodsDataMainModificationsBlockProperty">замените ее на
<div style="width:100%" class="mod goodsDataMainModificationsBlockProperty">
#6
Отправлено 08 Апрель 2014 - 22:57
daria_dnk (08 Апрель 2014 - 21:33) писал:
В шаблоне "Товар" найдите строку
<div class="mod goodsDataMainModificationsBlockProperty">замените ее на
<div style="width:100%" class="mod goodsDataMainModificationsBlockProperty">
А по вопросам выше подскажите, пожалуйста.
#7
Отправлено 08 Апрель 2014 - 23:01
severyanin (08 Апрель 2014 - 20:08) писал:
1. Необходимо, чтобы блоки с товарами, при отображении в виде таблицы (screen3.png) были одинакового фиксированного размера, независимо от того сколько текста в описании. Ограничить, например 10 строк текста, а то, что не влезет пусть скрывается троеточием или выводится при наведении мышью, как то так.
Попробуйте сделать следующее:
в файле main.css замените код
.goodstable .maingoodstable .text { background:url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block;}на
.opis {height: 70px;overflow: hidden;z-index: 10000;position: relative;} .opis:hover {overflow: visible;} .goodstable .maingoodstable .text { background: #f6f4eb url(http://kpkmag.storeland.net/goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block; height: auto;} .goodstable .maingoodstable .text:hover {overflow: visible;position: absolute; width: 100%;}В шаблоне Товары замените строку
<div class="text fnt11 fntarl txtalgnjsf clr" >{goods.DESCRIPTION_SHORT}</div>на
<div class="opis"> <div class="text fnt11 fntarl txtalgnjsf clr" >{goods.DESCRIPTION_SHORT}</div> </div>
#8
Отправлено 09 Апрель 2014 - 08:12
daria_dnk (08 Апрель 2014 - 23:01) писал:
Попробуйте сделать следующее:
в файле main.css замените код
.goodstable .maingoodstable .text { background:url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block;}на
.opis {height: 70px;overflow: hidden;z-index: 10000;position: relative;} .opis:hover {overflow: visible;} .goodstable .maingoodstable .text { background: #f6f4eb url(http://kpkmag.storeland.net/goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block; height: auto;} .goodstable .maingoodstable .text:hover {overflow: visible;position: absolute; width: 100%;}В шаблоне Товары замените строку
<div class="text fnt11 fntarl txtalgnjsf clr" >{goods.DESCRIPTION_SHORT}</div>на
<div class="opis"> <div class="text fnt11 fntarl txtalgnjsf clr" >{goods.DESCRIPTION_SHORT}</div> </div>
При наведении курсора мыши, текст уходит в торону и блоки все равно не фиксированного размера, так и идут лесенкой.
#9
Отправлено 09 Апрель 2014 - 09:42
severyanin (09 Апрель 2014 - 08:12) писал:
При наведении курсора мыши, текст уходит в торону и блоки все равно не фиксированного размера, так и идут лесенкой.
В файле "main.css".
Найти:
.goodstable .maingoodstable { background: #f6f4eb; padding: 9px 0.2% 10px 2%; -moz-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px; }
Заменить:
.goodstable .maingoodstable { background: #f6f4eb; padding: 9px 0.2% 10px 2%; -moz-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px; height: 310px; }
Добавляем определенный размер для блока Цены параметр
.price { width: 97.8%; /* background: url({ASSETS_IMAGES_PATH}goods-price.jpg) top left repeat; */ padding: 3.1% 0% 2.5% 0%; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; height: auto; min-width: 185px; background-image: linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -o-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -moz-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -webkit-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -ms-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.43, rgb(163,196,1)), color-stop(1, rgb(222,233,167)) );}Заменяем на
.price { height:45px;width: 97.8%; /* background: url({ASSETS_IMAGES_PATH}goods-price.jpg) top left repeat; */ padding: 3.1% 0% 2.5% 0%; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; min-width: 185px; background-image: linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -o-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -moz-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -webkit-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -ms-linear-gradient(bottom, rgb(163,196,1) 43%, rgb(222,233,167) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.43, rgb(163,196,1)), color-stop(1, rgb(222,233,167)) );}
При наведении мышки на Описание, текст отображается снизу и пропадает кнопка купить.
#10
Отправлено 09 Апрель 2014 - 10:10
#12
Отправлено 09 Апрель 2014 - 10:27
severyanin (09 Апрель 2014 - 10:20) писал:
В файле "main.css".
Найти:
.goodstable .maingoodstable .text:hover { overflow: visible; position: absolute; width: 100%; }
Заменить:
.goodstable .maingoodstable .text:hover { overflow: visible; position: relative; width: 100%; }
В файле "main.css".
Найти:
.opis { height: 70px; overflow: hidden; z-index: 10000; position: relative; }
Заменить:
.opis { height: 70px; overflow: hidden; z-index: 1; position: relative; }
#13
Отправлено 09 Апрель 2014 - 11:41
Castiel (09 Апрель 2014 - 10:27) писал:
В файле "main.css".
Найти:
.goodstable .maingoodstable .text:hover { overflow: visible; position: absolute; width: 100%; }
Заменить:
.goodstable .maingoodstable .text:hover { overflow: visible; position: relative; width: 100%; }
В файле "main.css".
Найти:
.opis { height: 70px; overflow: hidden; z-index: 10000; position: relative; }
Заменить:
.opis { height: 70px; overflow: hidden; z-index: 1; position: relative; }
Но в товарах на главной все по-прежнему, только сейчас текст не уходит в сторону, а просто "ерзает", так сказать внутри блока (изменяется величина пробелов в тексте).
И кнопки с ценой и словом купить у блоков не отображаются.
#14
Отправлено 09 Апрель 2014 - 14:17
severyanin (09 Апрель 2014 - 11:41) писал:
Но в товарах на главной все по-прежнему, только сейчас текст не уходит в сторону, а просто "ерзает", так сказать внутри блока (изменяется величина пробелов в тексте).
И кнопки с ценой и словом купить у блоков не отображаются.
Исправление для текста и его ограничение до 97px
В файле "main.css".
Найти:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block; height: auto;}
Заменить:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 0 8% 0; line-height: 14px; overflow: hidden; display: block; height: 97px;}
Найти:
.goodstable .maingoodstable { background: #f6f4eb; padding: 9px 0.2% 10px 2%; -moz-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px; height: 310px; }
Заменить на
.goodstable .maingoodstable { background: #f6f4eb; padding: 9px 0.2% 10px 2%; -moz-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px; height: 345px; }
#15
Отправлено 09 Апрель 2014 - 14:32
Castiel (09 Апрель 2014 - 14:17) писал:
В файле "main.css".
Найти:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block; height: auto;}
Заменить:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 0 8% 0; line-height: 14px; overflow: hidden; display: block; height: 97px;}
Найти:
.goodstable .maingoodstable { background: #f6f4eb; padding: 9px 0.2% 10px 2%; -moz-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px; height: 310px; }
Заменить на
.goodstable .maingoodstable { background: #f6f4eb; padding: 9px 0.2% 10px 2%; -moz-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px; height: 345px; }
Все сделал, теперь вот так.
#16
Отправлено 09 Апрель 2014 - 14:56
severyanin (09 Апрель 2014 - 14:32) писал:
Все сделал, теперь вот так.
В файле "main.css".
Найти:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block; height: auto;}
Заменить:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 0 8% 0; line-height: 14px; overflow: hidden; display: block; height: 97px;}
#17
Отправлено 09 Апрель 2014 - 15:55
Castiel (09 Апрель 2014 - 14:56) писал:
Найти:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 1% 8% 0; line-height: 14px; overflow: hidden; display: block; height: auto;}
Заменить:
.goodstable .maingoodstable .text { background: #f6f4eb url({ASSETS_IMAGES_PATH}goods-table-text.jpg) bottom center no-repeat; color:#7f7f7f; padding: 0 0 8% 0; line-height: 14px; overflow: hidden; display: block; height: 97px;}
#18
Отправлено 09 Апрель 2014 - 16:11
severyanin (09 Апрель 2014 - 15:55) писал:
Здравствуйте, внесли необходимые изменения на вашем сайте.
Обновите страницы и почистить кэш браузера.
#19
Отправлено 09 Апрель 2014 - 16:40
Подскажите, пожалуйста еще пару вопросов из поста #4
severyanin (08 Апрель 2014 - 20:08) писал:
3. Как выделить цену у товаров жирным шрифтом? (screen3.png)
#20
Отправлено 09 Апрель 2014 - 16:47
severyanin (09 Апрель 2014 - 16:40) писал:
Подскажите, пожалуйста еще пару вопросов из поста #4
.txtalgnjsf {
text-align: justify;
}
2. Класс txtalgnjsf отвечает за эти пробелы, вы можете их отключить удалив данный класс из этих строк.
В шаблоне "HTML" и в шаблоне "Товары"
Находим:
<div class="text fnt11 fntarl txtalgnjsf clr">
Заменяем на:
<div class="text fnt11 fntarl clr">
3.
В конец файла "main.css".
Добавить код:
.price ul.cost li .num { font-weight: 700; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных