Помогите С Дизайном Новичку, Ничего Не Знаю, Делаю Первые Шаги
#21
Отправлено 04 Апрель 2014 - 09:44
Помогите со следующими изменениями(в приложении)
1. Удалить поиск
2. Сделать границы самого сайта поуже симитрично с двух сторон
3. Уменьшить ширину слайдера
4. Сделать цвет фона шапки как и фон сайта.
#22
Отправлено 04 Апрель 2014 - 10:03
Den1922 (04 Апрель 2014 - 09:44) писал:
Помогите со следующими изменениями(в приложении)
Изменения.jpg
1. Удалить поиск
2. Сделать границы самого сайта поуже симитрично с двух сторон
3. Уменьшить ширину слайдера
4. Сделать цвет фона шапки как и фон сайта.
1) В шаблоне HTML удалите код
<!-- Форма поиска --> <div id="search_block_top"> <form id="searchbox" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search_query_top').val()=='Поиск...') return false;"> <div class="search_block_top_form"> <input id="search_query_top" type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск...{% ENDIF %}" onfocus="if(this.value=='Поиск...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск...';}" class="search_query light ac_input" /> <input type="submit" name="submit_search" title="Искать" value="" class="search_button"> </div> </form> </div> <!-- /Форма поиска -->
2-3) В style.css найдите код:
.flexslider { width: 1160px; margin: 0 auto 30px auto; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
и замените его на:
.flexslider { width: 943px; margin: 0 auto 30px auto; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
4) В style.css найдите строчку:
#header-fluid{position:relative;background: #FAFAFA url('{ASSETS_IMAGES_PATH}header-top-bg.png') repeat-x 0 0;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}
и замените на:
#header-fluid{position:relative;background: url('{ASSETS_IMAGES_PATH}header-top-bg.png') repeat-x 0 0;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}
#23
Отправлено 04 Апрель 2014 - 10:19
1. Надо выровнить весь сайт под эти поля, всех меню, если это очень сложно то скажите сразу пока оставлю эту затею)))
2. Ещё уменьшить ширину слайдера.
3 Линия не должна выступать за границы.
4.Как убрать черную полоску в шапке?
Den1922 (04 Апрель 2014 - 10:17) писал:
Доработки.jpg
1. Надо выровнить весь сайт под эти поля, всех меню, если это очень сложно то скажите сразу пока оставлю эту затею)))
2. Ещё уменьшить ширину слайдера.
3 Линия не должна выступать за границы.
4.Как убрать черную полоску в шапке?
#24
Отправлено 04 Апрель 2014 - 13:26
Вы поможете?
#25
Отправлено 04 Апрель 2014 - 13:36
Den1922 (04 Апрель 2014 - 13:26) писал:
Вы поможете?
У нас в порядке очереди рассматриваются вопросы, поэтому возможны задержки.
1) Найдите в style.css код:
.container { width: 1200px; margin: 0 auto; }
и замените на:
.container { width: 940px; margin: 0 auto; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); }
2) В коде:
.flexslider { width: 943px; margin: 0 auto 30px auto; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
поменяйте значение width на нужное.
3-4) Найдите код:
#header-fluid { position: relative; background: url('http://den1922.storeland.net/header-top-bg.png') repeat-x 0 0; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); z-index: 10; }
и замените на:
#header-fluid { position: relative; z-index: 10; }
#26
Отправлено 04 Апрель 2014 - 14:08
Применил все что вы сказали.
1. Подскажите, как убрать эти еле видные границы сайта, они не нужны
2. Я ошибся слайдер надо уменьшить не по ширине, а по высоте как в картинке. Как сделать чтобы он был ровно по полям сайта.
#27
Отправлено 04 Апрель 2014 - 17:23
Den1922 (04 Апрель 2014 - 14:08) писал:
Применил все что вы сказали.
Изменения.jpg
1. Подскажите, как убрать эти еле видные границы сайта, они не нужны
2. Я ошибся слайдер надо уменьшить не по ширине, а по высоте как в картинке. Как сделать чтобы он был ровно по полям сайта.
1. В шаблоне style.css замените код
.container { width: 940px; margin: 0 auto; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); }на такой
.container { width: 940px; margin: 0 auto; }2. Чтобы уменьшить высоту слайдера, замените код в style.css
.flexslider .slides img { display: block; margin: 0 auto; }на такой
.flexslider .slides img { display: block; margin: 0 auto; max-height: 150px; }здесь значением 150px определяется высота слайдера.
#28
Отправлено 04 Апрель 2014 - 18:09
Прошу помочь в следующей пачке вопросов)
В принцепе вопрос в картинке, как это осуществить и как сделать это визуально симметрично и пропорционально. Опять же как на сайте http://brandshop.ru/ у меня 3 карточки под банером планируется.
И один вопрос не по теме главной страницы, как убрать эти вещи и перенсти описание сразу после заголовка
#29
Отправлено 04 Апрель 2014 - 23:27
Den1922 (04 Апрель 2014 - 18:09) писал:
Прошу помочь в следующей пачке вопросов) Исправления.jpg
В принцепе вопрос в картинке, как это осуществить и как сделать это визуально симметрично и пропорционально. Опять же как на сайте http://brandshop.ru/ у меня 3 карточки под банером планируется. Исправления.jpg
И один вопрос не по теме главной страницы, как убрать эти вещи и перенсти описание сразу после заголовка
1.jpg 2.jpg
Т.е. добавляем 3 товара, допустим, в "товары на главной", потом заменим код их вывода, чтобы это соответствовало вашей идее.
По вопросу страницы категорий товаров. В шаблоне style.css замените строку
.content_sortPagiBar{margin:20px 0;position: relative;display: block;border-bottom: 1px solid #c0c0c0;padding-bottom: 10px;}на такую
.content_sortPagiBar{margin:20px 0;position: relative;display: block;border-bottom: 1px solid #c0c0c0;padding-bottom: 10px; display: none;}
И в шаблоне "Товары" код
<!-- Для полного отображения страницы товаров оторазим описания --> {% IFNOT ONLY_BODY %} {% IF CATEGORY_DESCRIPTION %} <div class="col-main" style="margin-top:10px;"> <div class="htmlDataBlock" style="*padding: 0px;"> {CATEGORY_DESCRIPTION} </div> </div> {% ENDIF %} <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div class="col-main" style="margin-top:10px;"> <div class="htmlDataBlock"> {CATEGORY_SEO_DESCRIPTION_SHORT} </div> </div> {% ENDIF %} {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div class="col-main" style="margin-top:10px;"> <div class="htmlDataBlock"> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> </div> {% ENDIF %} {% ENDIF %} <!-- /Для полного отображения страницы товаров оторазим описания -->вырежьте и вставьте выше, чтобы он оказался перед строкой
<!-- В корне каталога товаров отобразим все корневые категории если они есть на сайте -->
#31
Отправлено 05 Апрель 2014 - 12:26
Den1922 (05 Апрель 2014 - 11:41) писал:
Прошу помочь в следующей партии вопросов)
Как разместить все что я выделил красным на странице?
Изменения 1.jpg
Здравствуйте,
В файле "style.css".
Найти:
<h4>Товары на главной</h4>
Заменить:
<h4 style="display:none;">Товары на главной</h4>
Найти:
<h2>{PAGE_NAME}</h2>
Заменить:
{% IFNOT index_page %} <h2>{PAGE_NAME}</h2> {% ENDIF %}
Для описания фирмы
В разделе Сайт - Страницы выбираем страницу "Мы рады видеть Вас!" и редактируем ее описание.
В файле "style.css".
Найти:
.container { width: 940px; margin: 0 auto; }
Заменить:
.container { width: 940px; height: 180px; margin: 0 auto; }
В файле "style.css".
Найти:
#header-logo { position: relative; display: table; float: left; margin-top: 30px; width: 210px; z-index: 30; margin-left: 10px; }
Заменить:
#header-logo { position: relative; display: table; float: left; margin-top: 10px; z-index: 30; }
В файле "style.css".
Найти:
#megamenu { position: absolute; height: 54px; top: 90px; left: 238px; }
Заменить:
#megamenu { position: absolute; height: 35px; top: 140px; border-top: 1px solid #000; float: left; width: 100%; }
В файле "style.css".
Найти:
#megamenu li.root_menu { padding: 25px 8px 5px 8px; float: left; position: relative; }
Заменить:
#megamenu li.root_menu { padding: 10px 8px 5px 8px; float: left; position: relative; }
#32
Отправлено 05 Апрель 2014 - 14:05
Есть следующая партия вопросов:
1. Не нашёл этот код
Найти:
<h2>{PAGE_NAME}</h2>
Заменить:
{% IFNOT index_page %}
<h2>{PAGE_NAME}</h2>
{% ENDIF %}
Какие исправления должен был исправить этот код?
2. Впоросы по изображению:
1.как сделать полоску сверху как в низу бледно серого цвета и чтобы она была по границам сайта
2 и 3 как сделать текст и меню по границам сайте
4. как перенести одно из меню в другую чать ровно по границам
5. как выровнять товар на главной по границам сайта
Совсем забыл, как удалить меню Каталог но только с главной!
#33
Отправлено 05 Апрель 2014 - 19:24
Den1922 (05 Апрель 2014 - 14:05) писал:
Найти:
<h2>{PAGE_NAME}</h2>
Заменить:
{% IFNOT index_page %}
<h2>{PAGE_NAME}</h2>
{% ENDIF %}
Какие исправления должен был исправить этот код?
Этот код расположен в шаблоне "Страница".
Удаляет название страницы, если это главная станица. Как у вас было на скриншоте - зачеркнутый текст "Мы рады видеть Вас" - это было название страницы. Но так как у вас сейчас там другой заголовок, предшествующий описанию фирмы, то, видимо, эту часть инструкции следует опустить.
Den1922 (05 Апрель 2014 - 14:05) писал:
#megamenu { position: absolute; height: 35px; top: 140px; border-top: 1px solid #000; float: left; width: 100%; }на такой код
#megamenu { position: absolute; height: 35px; top: 140px; border-top: 1px dotted #c0c0c0; float: left; width: 100%; }
Den1922 (05 Апрель 2014 - 14:05) писал:
Есть следующая партия вопросов:
1. Не нашёл этот код
Найти:
<h2>{PAGE_NAME}</h2>
Заменить:
{% IFNOT index_page %}
<h2>{PAGE_NAME}</h2>
{% ENDIF %}
Какие исправления должен был исправить этот код?
2 и 3 как сделать текст и меню по границам сайте
Меню по левому краю.
В конец style.css добавьте
#megamenu > li.root_menu:first-child {padding-left: 0px !important}
Контент страницы растянуть по границам.
В style.css замените строку
.two-third{width:930px;float:right}на такую
.two-third{width:100%;float:right; margin: 0;}
Den1922 (05 Апрель 2014 - 14:05) писал:
"Вход/регистрация" по правому краю.
В шаблоне HTML замените строку
<li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" >на такую
<li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" {% IF menu.header.links.NAME = Вход / Регистрация %}style="float:right;"{% ENDIF %}>
Den1922 (05 Апрель 2014 - 14:05) писал:
Растянуть до правой границы до конца не получится. Максимальный результат достигается так:
В шаблоне style.css замените
.autumnshowcase_block li{position:relative;width:210px;height:auto;margin:0;padding:0 30px 0 0;text-align:center}на такую строку
.autumnshowcase_block li{position:relative;width:210px;height:auto;margin:0;padding:0 33px 0 0;text-align:center}
Den1922 (05 Апрель 2014 - 14:05) писал:
<div class="column one-third">на такую
<div class="column one-third" {% IF index_page %}style="display: none;"{% ENDIF %}>
#34
Отправлено 05 Апрель 2014 - 20:16
Прошу помочь в следующих вопросах:
1. Как переместить корзину по границе сайта?
2. Как удалить с главной страницы данные под товаром но только с главной страницы, чтобы это не пропало из каталога
3. Как поправить вид каталога как в картинке, тоесть будет по 3 товара в строчке и как сделать чтобы это все было симметрично и по границам сайта?
4. Как сделать вид внутри категории как на файле, опять же симметрично и по границам сайта.
#35
Отправлено 06 Апрель 2014 - 20:11
Den1922 (05 Апрель 2014 - 20:16) писал:
Прошу помочь в следующих вопросах:
1. Как переместить корзину по границе сайта? 1.jpg
2. Как удалить с главной страницы данные под товаром но только с главной страницы, чтобы это не пропало из каталога 2.jpg
3. Как поправить вид каталога как в картинке, тоесть будет по 3 товара в строчке и как сделать чтобы это все было симметрично и по границам сайта?
3.jpg
4. Как сделать вид внутри категории как на файле, опять же симметрично и по границам сайта. 4.jpg
Если Вы имели ввиду перемещение корзины вверх\вниз, то в шаблоне style.css найдите строку
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
в ней за положение корзины относительно верхней границы отвечает параметр margin-top - изменяя его значение, будете изменять расположение корзины.
2) В шаблоне HTML в блоке
<!-- Список товаров на главной -->удалите строки
<div class="rating"> <!-- Среднее значение по результатам всех отзывов об этом товаре --> {% IF index_page_goods.OPINION_RATING_VALUE %} <img src="{FORALL_IMAGES_PATH}stars/{index_page_goods.OPINION_RATING_VALUE | number("0","","")}.gif" alt="{index_page_goods.OPINION_RATING_VALUE}" /> {% ENDIF %} {% IF index_page_goods.OPINION_RATING_CNT_ALL>0 %} <a href="{index_page_goods.URL | url_amp}?generally_is_good=-1&page=1">Отзывы ({index_page_goods.OPINION_RATING_CNT_ALL})</a> {% ELSE %} <a href="{index_page_goods.URL | url_amp}?&form%5Bgoods_id%5D=opinion#goodsDataOpinionAdd">Оставить отзыв первым</a> {% ENDIF %} </div> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" /> <!--a class="exclusive" href="" onclick="$('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Оформить заказ">В корзину</a--> <a class="exclusive" href="#" onclick="quickorder('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстрый заказ">Быстрый заказ</a> </form>в блоке
<!-- Список новинок на главной -->удалите строки
<div class="rating"> <!-- Среднее значение по результатам всех отзывов об этом товаре --> {% IF index_page_new_goods.OPINION_RATING_VALUE %} <img src="{FORALL_IMAGES_PATH}stars/{index_page_new_goods.OPINION_RATING_VALUE | number("0","","")}.gif" alt="{index_page_new_goods.OPINION_RATING_VALUE}" /> {% ENDIF %} {% IF index_page_new_goods.OPINION_RATING_CNT_ALL>0 %} <a href="{index_page_new_goods.URL | url_amp}?generally_is_good=-1&page=1">Отзывы ({index_page_new_goods.OPINION_RATING_CNT_ALL})</a> {% ELSE %} <a href="{index_page_new_goods.URL | url_amp}?&form%5Bgoods_id%5D=opinion#goodsDataOpinionAdd">Оставить отзыв первым</a> {% ENDIF %} </div> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_new_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_new_goods.MIN_PRICE_NOW_ID}" /> <!--a class="exclusive" href="" onclick="$('.product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Оформить заказ">В корзину</a--> <a class="exclusive" href="" onclick="quickorder('.product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстрый заказ">Быстрый заказ</a> </form>в блоке
<!-- Список избранных товаров на главной -->удалите строки
<div class="rating"> <!-- Среднее значение по результатам всех отзывов об этом товаре --> {% IF index_page_favorites_goods.OPINION_RATING_VALUE %} <img src="{FORALL_IMAGES_PATH}stars/{index_page_favorites_goods.OPINION_RATING_VALUE | number("0","","")}.gif" alt="{index_page_favorites_goods.OPINION_RATING_VALUE}" /> {% ENDIF %} {% IF index_page_favorites_goods.OPINION_RATING_CNT_ALL>0 %} <a href="{index_page_favorites_goods.URL | url_amp}?generally_is_good=-1&page=1">Отзывы ({index_page_favorites_goods.OPINION_RATING_CNT_ALL})</a> {% ELSE %} <a href="{index_page_favorites_goods.URL | url_amp}?&form%5Bgoods_id%5D=opinion#goodsDataOpinionAdd">Оставить отзыв первым</a> {% ENDIF %} </div> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_favorites_goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_favorites_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_favorites_goods.MIN_PRICE_NOW_ID}" /> <!--a class="exclusive" href="" onclick="$('.product-form-{index_page_favorites_goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Оформить заказ">В корзину</a--> <a class="exclusive" href="" onclick="quickorder('.product-form-{index_page_favorites_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстрый заказ">Быстрый заказ</a> </form>Таким образом отзывы и кнопка быстрого заказа не будут отображаться у товаров на главной странице.
3) В шаблоне Товары после строк
<h5><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a></h5> </div> </div> </div> </li>вставьте код
{% IFNOT nested_categories_list.last %}{nested_categories_list.index | is_divided("3","</tr><tr>","")} {% ENDIF %}4)перед строками
{% ENDFOR %} </ul> </div> <!-- /Список товаров. Таблица -->добавьте строку
{% IFNOT goods.last %}{goods.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
#36
Отправлено 06 Апрель 2014 - 21:25
Пункт 1, я имел ввиду что переместить корзину в правую сторону к границе сайта.
По пункту 2, все получилось.
Пункт 3 и 4 был выполнен как Вы подсказали, но к сожалению никакого результата. Помогите все поправить, буду ждать вашего ответа!
#37
Отправлено 06 Апрель 2014 - 21:32
Den1922 (06 Апрель 2014 - 21:25) писал:
Пункт 1, я имел ввиду что переместить корзину в правую сторону к границе сайта.
#header-right{float:right;height:100px;position: relative; z-index:20;margin-right: 10px;}на
#header-right{float:right;height:100px;position: relative; z-index:20;margin-right: 1px;}
#38
Отправлено 06 Апрель 2014 - 22:29
Жду помощи по пункту 3 и 4.
#39
Отправлено 07 Апрель 2014 - 08:50
Den1922 (06 Апрель 2014 - 22:29) писал:
Жду помощи по пункту 3 и 4.
У вас что-то произошло с меню, оно уехало вниз. Так и задумано?
Что касается третьего вопроса, у Вас там товаров нет, у вас там всего 2 категории в каталоге, поэтому и отображается их две. Если будет 3, должно отображаться 3 в строчке.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных