Блок Новостей, Заголовки На Главной
#1
Отправлено 31 Июль 2013 - 11:12
1)Вопрос такой, как сделать оформленный блок новостей, точно так же как оформлено левое меню каталог товаров? Или как на картинке желаемое? (Такой же фон, выделение заголовка)
2)Соответственно черную полоску с надписью новинки и хиты?
3)Как изменять цвета заголовков новости, новинки,хиты?
4)Как применить единый формат шрифта для блока описание и сделать в рамку, как остальные блоки (Цвет, размер), чтобы не редактировать при добавлении?
Аккаунт: SL-135649
Спасибо
#2
Отправлено 31 Июль 2013 - 14:06
найдите в коде файла html код
<!-- Список новинок на главной --> {% IFNOT index_page_new_goods_empty %} <div class="pad-box" > <h3 style="margin-bottom:25px; "><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3> <!-- Список товаров. Таблица -->
и замените на код
<!-- Список новинок на главной --> {% IFNOT index_page_new_goods_empty %} <div class="pad-box" id="novinki"> <h3 style="margin-bottom:25px; "><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3> <!-- Список товаров. Таблица -->
далее добавьте в конец файла main.css код
#novinki { background: url(http://design.puncherstore.ru/menu-bg1111.png) 0 0 repeat-x; border-radius: 3px 3px 0 0; min-height: 16px; padding: 10px;}
Цитата
добавьте в конец файла main,css код
#novinki h3 a {color:green;}
green замените на нужный вам цвет
#3
Отправлено 31 Июль 2013 - 14:25
<!-- Список хитов продаж на главной --> {% IFNOT index_page_favorites_goods_empty %} <div class="pad-box"> <h3 style="margin-bottom:25px; "><a href="{CATALOG_TOP_SALES_URL}" class="indexPage">Хиты продаж</a></h3>
и замените его на код
<!-- Список хитов продаж на главной --> {% IFNOT index_page_favorites_goods_empty %} <div class="pad-box" id="novinki"> <h3 style="margin-bottom:25px; "><a href="{CATALOG_TOP_SALES_URL}" class="indexPage">Хиты продаж</a></h3>
#4
Отправлено 31 Июль 2013 - 14:37
.news_shop h2 { background: url(http://design.puncherstore.ru/menu-bg1111.png) 0 0 repeat-x; border-radius: 3px 3px 0 0; min-height: 16px; padding: 10px; }
Что бы сделать белую рамку у новостей найдите в файле main.css код
.contentTbodyNews {padding-left:0.7em;}
и замените его на код
.contentTbodyNews {padding-left:0.7em;padding:10px;}
далее в коней файла main.css добавьте код
.news_shop{background-color:white; }
по поводу 4 пункта не совсем понятно о каком описании идет речь, уточните пожалуйста
#5
Отправлено 01 Август 2013 - 16:21
Далее назрели новые вопросы:
1) У заголовков Новинки, Хиты и Новости магазина сделать шрифт такой же как Каталог товаров или верхнее меню. И выровнять длину полоски со слайдером
2) Второй вопрос это более точная формулировка моего 4того вопроса, товар мы добавляем чаще всего копируя описание к нему с разных сайтов. И оно всегда получается в разных стилях и с разными размерами шрифта, возможно ли как-то в коде задать один стиль и размер шрифта? или каждый товар вручную переделывать?
Плюс если описания много оно выходит за границы, как чуть чуть уменьшить блок?
И сделать блоку описания рамку, как у остальных блоков?
3) Как название вещи перенести над ценой, а кнопку в корзину перенести над блоком с размером, причем сделать ее примерно в длину блоков размер (ну или как мне самому поиграть с размерами кнопки)
Картинку прикреплю в следующем сообщении
Картинка к 3 вопросу
#6
Отправлено 01 Август 2013 - 17:11
Leprekon20 (01 Август 2013 - 16:21) писал:
Далее назрели новые вопросы:
1) У заголовков Новинки, Хиты и Новости магазина сделать шрифт такой же как Каталог товаров или верхнее меню. И выровнять длину полоски со слайдером
2) Второй вопрос это более точная формулировка моего 4того вопроса, товар мы добавляем чаще всего копируя описание к нему с разных сайтов. И оно всегда получается в разных стилях и с разными размерами шрифта, возможно ли как-то в коде задать один стиль и размер шрифта? или каждый товар вручную переделывать?
Плюс если описания много оно выходит за границы, как чуть чуть уменьшить блок?
И сделать блоку описания рамку, как у остальных блоков?
3) Как название вещи перенести над ценой, а кнопку в корзину перенести над блоком с размером, причем сделать ее примерно в длину блоков размер (ну или как мне самому поиграть с размерами кнопки)
Картинку прикреплю в следующем сообщении
Картинка к 3 вопросу
1. В main.css код
#novinki { background: url(http://design.puncherstore.ru/menu-bg1111.png) 0 0 repeat-x; border-radius: 3px 3px 0 0; min-height: 16px; padding: 10px;}замените на
#novinki { background: url(http://design.puncherstore.ru/menu-bg1111.png) 0 0 repeat-x; border-radius: 3px 3px 0 0; min-height: 16px; padding: 10px; width: 696px; }Чтобы выровнять полоску.
Чтобы сменить стиль шрифта, в коде
#novinki h3 a {color:White;}внесите такие изменения
#novinki h3 a {color:White; font-family: 'PT Sans Narrow', sans-serif;}И в коде
.news_shop h2 a {color:White;}такие
.news_shop h2 a {color:White; font-family: 'PT Sans Narrow', sans-serif; }2. Разные стили получаются, так как они тоже копируются. Есть вариант изменять описания каждого товара (редактируя код описания, т.е. нажав кнопку "Источник"), удаляя блоки кода вида
style=" ... "Но можно просто прописать стили для описаний в целом. В main.css добавьте код
.htmlDataBlock { font: 14px normal 'PT Sans Narrow' !important; color: black !important; }где 14px - размер шрифта, 'PT Sans Narrow' - его стиль, color: black; - его цвет.
В шаблоне "Товар" код
<!-- Блок описания товара. Показываем его есть описание товара --> {% IF GOODS_DESCRIPTION_LARGE %} <h3>Описание {GOODS_NAME}</h3> <div class="htmlDataBlock"> {GOODS_DESCRIPTION_LARGE} </div> {% ENDIF %} <!-- END Блок описания товара. Показываем его есть описание товара -->измените так
<!-- Блок описания товара. Показываем его есть описание товара --> {% IF GOODS_DESCRIPTION_LARGE %} <div id="goods_description"> <h3>Описание {GOODS_NAME}</h3> <div class="htmlDataBlock"> {GOODS_DESCRIPTION_LARGE} </div> </div> {% ENDIF %} <!-- END Блок описания товара. Показываем его есть описание товара -->И в конец main.css добавьте код
#goods_description { border: 1px solid #E5E5E5; padding: 10px; border-spacing: 2px; max-width: 93%; border-radius: 8px; }Скоро по 3-му вопросу.
#7
Отправлено 01 Август 2013 - 17:45
Чтобы вставить название товара над таблицей с ценой, в шаблоне "Товар" перед строкой
<div class="goodsDataMainOrder cornerAll">вставьте код
<h2 style="padding-left: 17px; font: 18px 'PT Sans Narrow', sans-serif; margin-bottom: 10px;">{GOODS_NAME}</h2>Здесь два раза замените h2 на h1, если все же решитесь удалить заголовок. Он удаляется в том же шаблоне в самом начале
<div class="page-headline"> <h1>{GOODS_NAME}</h1> </div>Перенесем кнопку. В main.css в коде
.goodsDataMain td {vertical-align:top}внесите такие изменения
.goodsDataMain td {vertical-align:top; width; 285px;}В шаблоне "Товар" удалите строку
<a class="button" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">В корзину</a><br /><br />а перед кодом
</td> </tr> </table> </div> </form> <!-- Блок описания товара. Показываем его есть описание товара -->вставьте такой код
<td><a class="button to_cart" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">Добавить в корзину</a></td>и в конец main.css добавьте код
a.to_cart { width: 285px; text-align: center; margin-left: 17px; margin-top: 20px; font-size: 17px; }По высоте кнопку можно будет сделать, если вы загрузите для ее фона отдельно изображение.
#8
Отправлено 02 Август 2013 - 14:12
По описанию сделал все как Вы написали, спасибо, стиль изменился, однако размер шрифта разный и кое где вылазит
http://puncherstore....horts?from=NWRm
http://puncherstore....Short?from=Mzhl
http://puncherstore....Shirt?from=YTNm
И как попробовать сделать рамку, как у остальных блоков?
#9
Отправлено 03 Август 2013 - 01:50
<div class="page-headline">
и заменив её на
<div class="page-headline" style="display: none;">
Хотя в любом случае не совсем понятна целесообразность данного действия.
Стили описания вы можете переопределить глобально для всех тегов - добавив в файл стилей main.css
.htmlDataBlock * { font-family: arial !important; font-size: 13px !important; line-height: 18px !important; }
хотя лучше всего задавать корректные стили в визуальном редакторе. Для добавлении рамки описанию - добавьте
.htmlDataBlock { border: 1px solid #E5E5E5; padding: 8px; width: 94%; } .htmlDataBlock:hover { border-color: #FF8D13 !important; }
#11
Отправлено 03 Август 2013 - 16:21
Leprekon20 (03 Август 2013 - 15:59) писал:
Теперь вопрос в другом, пропало название товаров на главной
И как сделать в правом верхнем углу бирки new, hit в моем шаблоне?
по поводу названия товаров:
у Вас в main.css есть строчка
#novinki h3 a {color:White; font-family: 'PT Sans Narrow', sans-serif;font-size: 13px;font-weight: normal;}там Вы написали: color:White
измените White на #000
Для Вашего шаблона инструкция находится здесь
#12
Отправлено 04 Август 2013 - 09:16
Сделал все инструкции из темы, что вы скинули, получается вот такая картина (фото прикрепил), адрес до изображения прописать не забыл.
А вот по названию товара, если я делаю как вы говорите у меня заголовок новинки и хиты тоже выкрашивается в черный и сливается) как его оставить белым?
#13
Отправлено 04 Август 2013 - 10:54
Leprekon20 (04 Август 2013 - 09:16) писал:
Сделал все инструкции из темы, что вы скинули, получается вот такая картина (фото прикрепил), адрес до изображения прописать не забыл.
А вот по названию товара, если я делаю как вы говорите у меня заголовок новинки и хиты тоже выкрашивается в черный и сливается) как его оставить белым?
Как я понимаю код Вы удалили. В той иснтрукции нужно заменить в коде -
.goods-image-other { max-width: 185px; max-height: 185px; background: url("http://mediatory.ru/Pics/di_processing/di_bw_color_final.jpg") no-repeat top right; z-index: 9999; position: relative; background-size: 37px auto; }background: url("http://mediatory.ru/...olor_final.jpg") no-repeat top right;
путь - http://mediatory.ru/...color_final.jpg
Сейчас что еще поправить сложно сказать, нужно, чтобы Вы ее еще раз проделали и оставили изменения
#14
Отправлено 04 Август 2013 - 12:35
А что нужно поменять чтобы на главной заголовок новости,хиты оставить белым, а цвет названия черным?
#novinki h3 a {color:White; font-family: 'PT Sans Narrow', sans-serif;font-size: 13px;font-weight: normal;}
Это сразу все перекрашивает
#15
Отправлено 04 Август 2013 - 12:58
<img width="30px" src="путь до изображения" style="right: 31px;z-index: 9999;position: absolute;" alt="">
<img class="goods-image-other" src="{% IF index_page_favorites_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}http://puncher.store.../hit.png?9750{% ELSE %}{index_page_favorites_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_favorites_goods.NAME}" /></a>
<div class="product-description">
<div class="product-indent">
<h3 class="product-name">
<a href="{index_page_favorites_goods.URL}" title="Перейти на страницу «{index_page_favorites_goods.NAME}»">{index_page_favorites_goods.NAME}</a>
</h3>
А где правильно заменять код? тут такое начало в двух местах <a href="{index_page_favorites_goods.URL},<a class="product-image" title="Перейти на страницу «?
Или где отдельная строка?
пробовал везде, но результат один)
#16
Отправлено 04 Август 2013 - 13:47
Leprekon20 (04 Август 2013 - 12:35) писал:
А что нужно поменять чтобы на главной заголовок новости,хиты оставить белым, а цвет названия черным?
#novinki h3 a {color:White; font-family: 'PT Sans Narrow', sans-serif;font-size: 13px;font-weight: normal;}
Это сразу все перекрашивает
Посмотрите на скриншот, Путь до изображения не указан. Проверяла по Главной. В каталоге на сайте не нашла у Вас бирок, они съехали? или Вы код убрали?
А по заголовкам не понятно. Вы хотите фон сделать белым а текст черным?
Leprekon20 (04 Август 2013 - 12:58) писал:
<img width="30px" src="путь до изображения" style="right: 31px;z-index: 9999;position: absolute;" alt="">
<img class="goods-image-other" src="{% IF index_page_favorites_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}http://puncher.store.../hit.png?9750{% ELSE %}{index_page_favorites_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_favorites_goods.NAME}" /></a>
<div class="product-description">
<div class="product-indent">
<h3 class="product-name">
<a href="{index_page_favorites_goods.URL}" title="Перейти на страницу «{index_page_favorites_goods.NAME}»">{index_page_favorites_goods.NAME}</a>
</h3>
А где правильно заменять код? тут такое начало в двух местах <a href="{index_page_favorites_goods.URL},<a class="product-image" title="Перейти на страницу «?
Или где отдельная строка?
пробовал везде, но результат один)
Вам нужно указать в коде -
<img width="30px" src="путь до изображения" style="right: 31px;z-index: 9999;position: absolute;" alt="">путь до изображения.
Это и есть бирка.
А здесь -
<img class="goods-image-other" src="{% IF index_page_favorites_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}http://puncher.store.../hit.png?9750{% ELSE %}{index_page_favorites_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_favorites_goods.NAME}" />у Вас явно ошибка в коде
Так указывать ссылку до изображения нельзя - {ASSETS_IMAGES_PATH}http://puncher.store...../hit.png?9750
#17
Отправлено 04 Август 2013 - 15:22
support 2.0 (03 Август 2013 - 16:21) писал:
у Вас в main.css есть строчка
#novinki h3 a {color:White; font-family: 'PT Sans Narrow', sans-serif;font-size: 13px;font-weight: normal;}там Вы написали: color:White
измените White на #000
Для Вашего шаблона инструкция находится здесь
Этот параметр изменяет цвет заголовка и цвет названия товара, а так как у меня черная полоса, заголовок с ней сливается. Надо название товара сделать черным, а заголовок оставить белым, фото прикрепил
2)Думаю, я что-то упустил, бирки только на главной и только у крайних вещей. В каталоге товаров вообще ничего нет. Все сделал по инструкции, все три описанных блока заменил по инструкции. Как сделать чтобы бирки были на всех отмеченных вещах (новинки,хиты) на главной и в каталоге?
#18
Отправлено 04 Август 2013 - 19:35
Leprekon20 (04 Август 2013 - 15:22) писал:
2)Думаю, я что-то упустил, бирки только на главной и только у крайних вещей. В каталоге товаров вообще ничего нет. Все сделал по инструкции, все три описанных блока заменил по инструкции. Как сделать чтобы бирки были на всех отмеченных вещах (новинки,хиты) на главной и в каталоге?
#novinki h3.product-name a { color: black; }Бирки. Во-первых в html коды бирок надо немного поменять. 2 раза встречается строка
<img width="30px" src="http://puncher.storeland.net/new.png" style="right: 31px;z-index: 9999;position: absolute;" alt="">оба раза замените ее на
<img class="newhit" src="{ASSETS_IMAGES_PATH}new.png" alt="">И один раз встречается строка
<img width="30px" src="http://puncher.storeland.net/hit.png" style="right: 31px;z-index: 9999;position: absolute;" alt="">ее замените на
<img class="newhit" src="{ASSETS_IMAGES_PATH}hit.png" alt="">Далее в main.css код
.products-grid .product-image { display:block; margin:0 10px; height: 185px; }измените так
.products-grid .product-image { display:block; margin:0 10px; height: 185px; position: relative;}и в конец шаблона добавьте код
.newhit { width: 30px; right: 0px; z-index: 9999; position: absolute; }Так мы "отладили" бирки. В каталоге товаров коды бирок не прописаны. Откройте шаблон "Товары", в нем после строки
<a class="product-image" title="Перейти на страницу «{goods.NAME}»" href="{goods.URL}">вставьте такой код
<img class="newhit" {% IF goods.IS_NEW %} src="{ASSETS_IMAGES_PATH}new.png" {%ELSEIF goods.IS_TOP %} src="{ASSETS_IMAGES_PATH}hit.png" alt="">
#19
Отправлено 07 Август 2013 - 08:25
С шапкой можете помочь? на картинке все должно выглядеть, есть залитые лого, иконки. (лого LOGOnew.png, значки tel.png,telega.png)
Только фон пока останется прежним.
Как сделать лого, значки и телефоны как на картинке?
#20
Отправлено 07 Август 2013 - 11:58
Leprekon20 (07 Август 2013 - 08:25) писал:
Логотип -
Найдите в шаблоне HTML примерно следующий код -
<div class="logotype"><a href="http://puncherstore.ru"><img src="{ASSETS_IMAGES_PATH}logo.png" alt=""></a></div>в этом коде - logo.png замените на - LOGOnew.png
В main.css найдите код -
#hdr .right ul li.tele { font-size: 14px; background: url({ASSETS_IMAGES_PATH}tele.png) left center no-repeat; padding: 0 0 0 35px; }tele.png замените на tel.png
Далее в файле main.css найдите код -
#hdr .rever a { background: url({ASSETS_IMAGES_PATH}tov.png) no-repeat; padding: 35px 10px 0 85px; margin: 0; height: 51px; display: block; float: left; font: normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; text-decoration: underline; }tov.png замените на telega.png
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных