Помогите С Дизайном! Срочно!
#1
Отправлено 08 Август 2013 - 08:07
0)Меню поднять на верх, а каталог сделать в отдельном от страницы блоке чуть выше, отметил на 5 скрине
1)Нужно сделать такую же корзину как на первом скрине вот сайт http://masterpuf.ru/
2) Сделать все блоки раздельными и скругленными. На скрине выделил пустые места красным.
3) сделать такой жепоиск как на этом сайте http://tonometr5.ru/, указал на втором скрине, надо так же над блоками
мой сайт http://bigb.storeland.ru
4) Сделать такие же отзывы, как на этом сайте http://masterpuf.ru/, он работает тоже на storeland, значит и мне можно реализовать такое же. Отметил на 3 скрине!
5) Сделать ещё один блок который будет находиться между страницей и шапкой, или сделать его прямо на шапке. В этот блок будут так же вставляться изображения. отметил на 4 скрине
Заранее тому кто поможет очень сильно благодарен!
.
#3
Отправлено 08 Август 2013 - 12:47
#logo { height: 134px; }и замените его на
#logo { height: 134px; margin-left: -155px; }Теперь в шаблоне HTML найдите блок
<!-- Верхний блок навигации --> <div class="containerin" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->скопируйте, удалите и вставьте после блока
<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/"><span>На главную</span></a></div>Теперь в файле maiin.css найдите блок
#top-menu { height: 40px; overflow: hidden; margin-top: 125px; }и замените его на
#top-menu { height: 40px; overflow: hidden; }
Далее найдите блок
<ul class="leftmenu"> <li class="categories"> <div class="sdvig"> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> <div></div> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul></div><br /> </li></ul>удалите его и после строки
<!-- end Поиск -->вставьте блок
<ul class="leftmenu" style="margin-top:119px;"> <li class="categories"> <div class="sdvig"> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> <div></div> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul></div><br /> </li></ul>1. В файле main.css найдите блок
#cartInfo { position: absolute; font-size: 13px; top: 14px; left: 283px; white-space: nowrap; overflow: hidden; height: 20px; width: 340px; color: white !important; }и замените его на
#cartInfo { position: absolute; font-size: 13px; top: -1px; left: 637px; white-space: nowrap; overflow: hidden; height: 23px; width: 189px; color: rgb(17, 16, 16) !important; background: rgb(209, 209, 211); padding-top: 15px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
2. В том же файле найдите блок
.content_catalog .pad-box .leftmenu { border: 1px solid #E5E5E5 !important; border-radius: 5px; box-shadow: 0 0 8px rgba(0,0,0,0.5); padding: 5px; }и замените его на
.content_catalog .pad-box .leftmenu li { border: 1px solid #E5E5E5 !important; border-radius: 5px; box-shadow: 0 0 8px rgba(0,0,0,0.5); padding: 5px; margin-bottom: 10px; }
3. В шаблоне hTML найдите блок [size=4]
[/size] <!-- Поиск --> <div id="search"> <form action="http://{NET_DOMAIN}/search" id="searchform" method="get"> <div> <input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" id="s" class="search_box alignleft" name="q" /> <input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" /> <div class="clr"></div> </div> </form> </div> <div class="clr"></div> <!-- end Поиск -->и удалите его. Теперь найдите блок
<li class="categories"> <br /> </li>и замените его на
<li > <!-- Поиск --> <div id="search"> <form action="http://{NET_DOMAIN}/search" id="searchform" method="get"> <div> <input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" id="s" class="search_box alignleft" name="q" /> <input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" /> <div class="clr"></div> </div> </form> </div> <div class="clr"></div> <!-- end Поиск --> <br /> <br /> </li>В файле main.css найдите блок
#search { height: 35px; float: right; padding-top: 5px; padding-right: 15px; width: 247px; right: 136px; position: absolute; }и замените его на
#search { height: 35px; float: right; padding-top: 5px; padding-right: 15px; width: 202px; right: 136px; position: absolute; margin-right: -92px; margin-top: -5px; }
4. Данный магазин находиться не нашей платформе. И у нас такое, к сожалению реализовать нельзя.
5. Вам поможет данная тема.
#4
Отправлено 08 Август 2013 - 12:55
#5
Отправлено 08 Август 2013 - 16:21
#6
Отправлено 08 Август 2013 - 18:37
#8
Отправлено 09 Август 2013 - 07:22
Вот ещё меня выше не много не поняли.
1)по поводу страницы, она должна быть отдельно стоять от блоков, т.е. так же как и блоки скруглена и не должна доходить до блоков, я отметил зелёным.
2)По поводу корзины, мне надо что бы там был значок тележки или корзинки, и написано "Корзина(0)", т.е. что бы было число вместо "на сколько рублей товаров в корзине"
3)Верхнее меню, перегородки между пунктами надо сделать, меньше я указал голубой стрелочкой.
4)Нижнее меню, которое находится под блоками надо обрамить в тоже скругленую форму как блоки. ещё я заметил что когда на него наводишь оно сдвигается вправо, теперь это можно убрать, т.к. вместе с ним дёргаются картинки товаров
5)Выделил жёлтым, то что там написано, это я в граф редакторе сделал, как сделать точно такое же только уже на сайте?
6)По поводу пункта 5 выше, по той теме котрую вы мне дали я сделать не могу, т.к. у меня в файле html нету блока <Шапка сайта>
Опять я много написал, заранее спасибо.
#9
Отправлено 09 Август 2013 - 12:31
далее
1) найдите в файле main.css код
#cpages { background:; /* Цвет фона */ -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */ box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Параметры тени */ padding: 10px 10px 10px 0px; }
замените на код
#cpages { padding: 10px 10px 10px 0px; }
там же найдите код
.content_body { vertical-align:top; }
замените на код
.content_body { vertical-align:top; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */ box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Параметры тени */ padding: 10px 10px 10px 0px; }
2)
прежде всего загрузите через вкладку Сайт-Редактор шаблонов- добавить файл изображение корзины которое вы хотите видеть на сайте.
3) перегородки это изображение что бы они стали меньше по высоте вам необходимо скачать изображение с сайта уменьшить его высоту в графическом редакторе и снова загрузить на сайт
ссылка на изображение для наглядности http://bigb.storeland.net/78.png
#10
Отправлено 09 Август 2013 - 12:39
.sdvig a { -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; color:#222; display:block; }
И замените на код
.sdvig a { -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; color:#222; display:block; }
#11
Отправлено 09 Август 2013 - 12:42
#12
Отправлено 09 Август 2013 - 12:45
.sdvig ul li {border: 1px solid #E5E5E5 !important; border-radius: 5px; box-shadow: 0 0 8px rgba(0,0,0,0.5); padding: 5px; margin-bottom: 10px; }
найдите код
#header { height: 374px; }
замените на код
#header { height: 400px; }
#13
Отправлено 09 Август 2013 - 12:55
найдите код
#contactInfo { position:absolute; font-size:1.8em; top: 79px; left: 605px; color: #9605c5; }
и замените на код
#contactInfo { position:absolute; font-size:1.8em; top: 47px; left: 643px; color: yellow; border: solid; }
#14
Отправлено 09 Август 2013 - 13:01
Ещё у нижнего меню надо убрать полосы
5) Да мне не рамку надо, а что бы эти надписи вывелись, точно такие же.
Что бы они не на картинки были а как текст на сайте!
7) А можно ещё мне кнопочку обратного звонка?
#15
Отправлено 09 Август 2013 - 13:04
по пункту 6)
из темы на которую вам дали ссылку вставьте код
<div class="blocks"><table><tbody><tr> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block1.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block2.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block3.png" alt="Описание изображения"></a> </div> </div></td> </tr></tbody></table> </div>
ПЕРЕД кодом в вашем файле html
</div> <div class="container" id="cpages">
замените block1.png block2.png block3.png на ваши названия изображений
так же учтите что после вставки вам необходимо будет увеличить высоту шапки в коде
#header { height: 400px; }
#16
Отправлено 09 Август 2013 - 13:10
2) по корзине я думаю должно быть понятно.
5)http://tonometr5.ru/ вот видите у них номер и кнопка обратного звонка, мне надо так же, У них номер с текстом не на картинке, а текстом прописан.
6)Помогите мне ещё по 6 пункту.
Кстати, а там премиальные за нахождение ошибки не дают?
По пункту 6, там изображения получаются под меню, а мне надо НАД ним сделать
#17
Отправлено 09 Август 2013 - 13:28
Roman(GRR) (09 Август 2013 - 13:01) писал:
Ещё у нижнего меню надо убрать полосы
Найдите код
.leftmenu li li div { border-bottom: 1px solid #D6D6D6; }
и удалите его из файла main.css
код для блоков вы вставили не корректно
еще раз прочитайте инструкцию
Цитата
форум - это сторонний ресурс, не наша разработка
у наших разработчиков возможно есть открытый код форума и они смогут поправить ошибку, но премиальные начисляются за нахождение ошибок на нашей платформе storelend.ru
В любом случае, спасибо Вам за внимательность.
Что бы закруглить карая у страницы найдите код
.content_body { vertical-align:top; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */ box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Параметры тени */ padding: 10px 10px 10px 0px; }
и замените его на код
.content_body { vertical-align:top; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */ box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Параметры тени */ padding: 10px 10px 10px 0px; border-radius: 5px; }
что бы поменять текст корзины найдите в файле html код
<!-- Корзина --> <div id="cartInfo"> <a href="{CART_URL}">в корзине товаров на</a>: <span id="cartSum">
меняйте текст в корзине товаров на на нужный вам
перезалейте ваш файл изображения корзины заменив название на ЛАТИНСКИЕ буквы.
размер картинки сделайте именно таким по ширине и высоте каким он у вас должен отображаться на сайте
сейчас она слишком большая
по шестому пункту
вы не верно вставили код - я писала вам о это выше в сообщении
пожалуйста внимательно читайте инструкции
найдите у вас в файле html код
</div> <!-- контент --> <div class="blocks"><table><tbody><tr> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block1.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block2.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block3.png" alt="Описание изображения"></a> </div> </div></td> </tr></tbody></table> </div> <div class="container" id="cpages">
и замените на код
<!-- контент --> <div class="blocks"><table><tbody><tr> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block1.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block2.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block3.png" alt="Описание изображения"></a> </div> </div></td> </tr></tbody></table> </div></div> <div class="container" id="cpages">
#18
Отправлено 09 Август 2013 - 13:31
6 пункт тоже не получается сделать
#19
Отправлено 09 Август 2013 - 13:40
<!-- Корзина --> <div id="cartInfo"> <a href="{CART_URL}">в корзине товаров на</a>:
и заменить на код
<!-- Корзина --> <div id="cartInfo"> <img src="{ASSETS_IMAGES_PATH}тут имя изображения вашей корзины.jpg"> <a href="{CART_URL}">в корзине товаров на</a>:
по вопросу кнопки "заказать звонок"
ознакомьтесь пожалуйста с темой
http://forum.storela...братный-звонок/
что бы телефоны на сайте были не картинкой а текстом заполните соответствующие поля в админке магазина вкладка Настройки-Основные
поля
Телефоны на сайте:
Время работы магазина: и тд.
прочитать всплывающую подсказку по этим полям можно наведя курсором мышки на иконку знака вопрос рядом с названиями полей.
#20
Отправлено 09 Август 2013 - 23:16
<div class="blocks"><table><tbody><tr> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block1.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block2.png" alt="Описание изображения"></a> </div> </div></td> <td width="33%" class="w"><div class="block"> <div class="img"> <a href="адрес на страницу" title="Описание адреса"><img src="{ASSETS_IMAGES_PATH}block3.png" alt="Описание изображения"></a> </div> </div></td> </tr></tbody></table> </div>необходимо переместить и поставить перед:
<ul class="leftmenu" style="margin-top:293px;"> <li class="categories"> <div class="sdvig"> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> <div></div> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul></div><br /> </li></ul>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных