-
Posts
147 -
Joined
-
Last visited
Content Type
Profiles
Forums
Marketplace
Articles
FAQ
Our New
Store
Blogs
module__dplus_manager
Everything posted by vavan1955
-
Выпадающее меню категорий
vavan1955 replied to vavan1955's topic in Шаблони, дизайн та оформлення магазину
Забыл добавить две картинки а при правке вставить уже никак, вот они: -
Как то спрашивали выпадающее меню для модуля категорий, покажу как сделать но... Вводить имя категорий и под категорий придётся вручную! Открываем файл header.tpl вашего шаблона оформления и перед </head> добавляем скрипт: <script type="text/javascript"> $(document).ready(function() { $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url/images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url/images/down.png)"}); }); }); </script> Затем открываем файл таблицы стилей stylesheet.css и дописываем внизу: /* БЛОК МЕНЮ - ВЫПАДАЮЩАЯ ЧАСТЬ */ .menu_head { display:block; cursor: pointer; padding:5px 0px; border-top:1px solid #fff; border-bottom:1px solid #ceeaf8; color:#666; padding-left:8px; font-size:12px; font-weight:bold; } .menu_body { display:none; } .menu_body a{ padding:5px 0px; display:block; font-size:12px; } .menu_body a: hover { color:#d37f35; font-size:12px; text-decoration:none; ) } .mcont a{ display:block; padding:5px 0px; border-top:1px solid #fff; border-bottom:1px solid #ceeaf8; background:url(../image/myfon.gif) no-repeat; color:#666; padding-left:18px; } .mcont { display:block; color:#666; padding-left:4px; } .mcont a:hover { background:url(../image/myfon2.gif) no-repeat; color:#d37f35; } Теперь осталось открыть category.tpl и заменить вот этим: <div class="box"> <div class="top"><?php echo $heading_title; ?></div> <div id="category" class="middle"> <div class="mcont"> <div style="border-bottom:1px solid #ceeaf8;"></div> <div id="firstpane"> <p class="menu_head">DVD проигрыватели</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> <p class="menu_head">Автомагнитолы</p> <div class="menu_body"> <a href="/car_radio/Alpine/">Alpbne</a> <a href="/car_radio/Blaupunkt/">Blaupunkt</a> </div> <p class="menu_head">Видеокамеры</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> <p class="menu_head">Музыкальные центры</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> <p class="menu_head">Плееры</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> <p class="menu_head">Телевизоры</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> <p class="menu_head">Усилители НЧ</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> <p class="menu_head">Фотоаппараты</p> <div class="menu_body"> <a href="/">Первая категория</a> <a href="/">Втораяая категория</a> </div> </div></div></div> <div class="bottom"> </div> </div> Не забываем сохранять эот файл в utf-8 (Без BOM) Ну и сам файл category.tpl пересохраните, чтоб вернуться назад.Всё, меню правите под себя, так как я выложил свои категории, прописываете пути и пользуетесь. Понимаю про неудобство но я и ничего не требую в замен, можете поблагодарить нажав плюсик. Посмотреть и потыкать в меню можно у меня на сайте ЗДЕСЬ Поправил, работает
-
gdi31 - ну я сам стараюсь делать код валидным во всех отношениях а спросил из любопытства. Как доделаю проект потом буду чистить, сейчас имею 23 ошибки. А про noindex набери в поиске (валидный noindex) и тебе будет счастье. Я вообще то много нашел решений в сети, как флешку вставить, счётчики и подобное.
-
Я тоже мечтаю об таком но мне сказали - НИКАК. Потому что скачивание товара происходит с кабинета. Вот так.
-
Да нет, не помогу видимо. У меня свой шаблон и я сам накосячил а у него дефолтный. Как копировал файлы на сервер? , попробуй перезалить только в zip формате а на самом сервере распакуй, предварительно сохранив файлы конфигурации, ну ты понял наверное для чего.
-
А чего вам так валидация далась? В сети 95% сайтов имеют ошибок как минимум 150, даже сейчас на этом форуме валидатор кажет 35 ошибок 4 предупреждения.
-
Ну а сам то как думаеш по этому поводу: background-position : center left; Как это по центру и слева сразу. Давай ка мы тебя так поставим, как будешь смотреться? Выбери уж чего то одно. И это тоже box-shadow: 0px 0px 3px #333; Свойство box-shadow не существует в CSS2.1, но существует в : 0 0 3px #333 0 0 3px #333 Конечно валидацию твой css не пройдёт
-
Делаем свой дизайн блока категорий
vavan1955 replied to vavan1955's topic in Шаблони, дизайн та оформлення магазину
Причем здесь картинки фри.Как реалиовать выпадающее меню???? Всё можно но... -
Да вы посмотрите, сверху видна шапка и пустые правые блоки. Обновлять то надо по умному, затронутые ранее файлы не стоило заменять.А ссылка бы на сайт не помешала.
-
Делаем свой дизайн блока категорий
vavan1955 replied to vavan1955's topic in Шаблони, дизайн та оформлення магазину
Да, я был на работе, спешил и видимо не понял вопрос. Я не задавался целью менять что либо для подкатегорий, оно мне и не надо. Я же написал -...дальше разбираемся сами. Мне разбираться нет времени да и в кодинге я не очень, сам прошу помощи. -
Делаем свой дизайн блока категорий
vavan1955 replied to vavan1955's topic in Шаблони, дизайн та оформлення магазину
А я для чего прокомметировал в таблице стилей? .box_category .top { padding: 8px 0px 8px 7px; color: #000000; // Цвет заголовка категории ; font-size: 14px; // Размер шрифта заголовка ; font-family: Arial, Helvetica, sans-serif; // Без комментариев ; font-weight: bold; // Определяет что шрифт жирный ; text-transform: uppercase; } -
Вопросы по дизайну сайта.
vavan1955 replied to tehnikawdom's topic in Шаблони, дизайн та оформлення магазину
Вот, специально ДЛЯ ТЕБЯ СОЗДАЛ ТЕМУ -
По просьбе юзера данного форума - tehnikawdom решил написать как сделать своё оформление блока категорий, по аналогии можно изменить дизайн всех блоков. И так начнем: По ЭТОЙ ТЕМЕ была задача сделать меню категорий по дизайну КАК ЗДЕСЬ - 9 Меню. Качаем себе вот эту картинку и кидаем в папку image своего шаблона оформления. Сделали? Молодцом!!! Теперь откроем таблицу стилей, это файл stylesheet.css вашего шаблона. Находим вот этот код, который отвечает за дизайн всех левых и правых блоков: .box { margin-bottom: 10px; background: url('../image/box_top.png') no-repeat; } .box .top { padding: 8px 0px 8px 7px; color: #000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; } .box .top img { float: left; margin-right: 5px; } .box .middle { border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; background: #FFFFFF; padding: 10px; } .box .bottom { height: 5px; background: url('../image/box_bottom.png') no-repeat; } Выделяем, копируем и вставляем ниже. Далее для класса .box добавляем canegory. У нас должно получиться так - .box_category Добавляем везде в скопированном коде. Находим #category и меняем его содержимое на: #category ul { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 0px; list-style: none; // Убираем картинку-стрелку и блокируем вывод метки ; } #category { margin: 0px; width: 178px; // Ширина внутреннего контента блока, можно поставить 100% ; } #category li a { text-decoration: none; } #category li a:link, #category li a:visited { background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // Картинка когда курсор не наведён ; color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ; display: block; padding: 0 0 0 32px; } #category li a:hover { background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя; color: #000;height:32px; padding: 0 0 0 32px; }Дплее в своём шаблоне в папке module находим файл category.tplВ самом начале тоже добавляем category чтоб получилось вот так - <div class="box_category"> Всё. Этот класс будет отвечать за дизайн только блока категорий и некоим образом не коснётся других блоков. Теперь правим класс как нам хочется. Для tehnikawdom я сделал вот так: .box_category { margin-bottom: 10px; // Определяет отступ между блоками по вертикали ; background: url('../image/box_top.png') no-repeat; // Верхняя картинка блока - Шапочка; } .box_category .top { padding: 8px 0px 8px 7px; color: #000000; // Цвет заголовка категории ; font-size: 14px; // Размер шрифта заголовка ; font-family: Arial, Helvetica, sans-serif; // Без комментариев ; font-weight: bold; // Определяет что шрифт жирный ; text-transform: uppercase; } .box_category .top img { float: left; margin-right: 5px; } .box_category .middle { border-left: 1px solid #DDDDDD; // Левая бордюра бокса ; border-right: 1px solid #DDDDDD; //Правая бордюра бокса ; background: #FFFFFF; padding: 0px; } .box_category .bottom { height: 5px; background: url('../image/box_bottom.png') no-repeat; // Нижняя картинка бокса ; } #category ul { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; padding-left: 0px; list-style: none; // Убираем картинку-стрелку и блокируем вывод метки ; } #category { margin: 0px; width: 178px; // Ширина внутреннего контента блока, можно поставить 100% ; } #category li a { text-decoration: none; } #category li a:link, #category li a:visited { background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // Картинка когда курсор не наведён ; color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ; display: block; padding: 0 0 0 32px; } #category li a:hover { background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя; color: #000;height:32px; padding: 0 0 0 32px; }Вроде всё расписал, даже комментарии к классам сделал. Вопросов не должно быть, дальше разбираемся сами. Использовал дефолтный шаблон!!! Спасибо за внимание.
-
Во, с 23 июня вопрос висит и ни одного ответа ввиду не верного создания темы. Что за версия что за модуль... только догадывайся.
-
Вопросы по дизайну сайта.
vavan1955 replied to tehnikawdom's topic in Шаблони, дизайн та оформлення магазину
Это просто html меню с таблицей стилей. Никаких категорий там нет. Используется 1 картинка menu9.gif <h2>Tab Menu 9</h2> <div id="menu9"> <ul> <li><a href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" title="Link 5">Link 5</a></li> </ul> </div> -
Резиновый или фиксированный?
vavan1955 replied to vavan1955's topic in Шаблони, дизайн та оформлення магазину
Нет ничего идеального потому многие и мучаются с определением, сделать фиксированный, но тогда на широкоформатном по бокам много свободного места. Или делать резиновый, но тогда сайт плывёт, как я писал выше. Этот вопрос поднимается часто на веб форумах и у всех свои мнения. Я не спорю что лучше но когда лет пять-шесть назад резинку было просто оформить то сейчас это гемор. Вы не видели контент при разрешении 1600px, где текст с картинками просто перемешивался. Делать всё меняющимся, контент и блоки это не есть гуд. Лишний код и http запросов будет уйма а пользователей надо уважать. Для чего же мы стараемся большую часть перенести в таблицы стилей, да потому что она подгружается один раз. Да, вспомнил, эту статью я писал для форума Антислаед. Впринципе, если немного переделать то и под опен подойдёт. Здесь описан сам принцип а привязать можно к любому двигу. -
Перед любым web-дизайнером, не важно начинающий он или уже опытный, встаёт вопрос: а какой выбрать для создания сайта, резиновый или фиксированный? Для того, чтобы ответить на вопрос какой из них лучше давайте дадим им определение, что означает тот и другой дизайн. Резиновый – табличный дизайн в котором ширина столбца, рисунка задана в процентах. Фиксированный – табличный дизайн в котором ширина столбца или рисунка, оговорены точно, заданы в пикселях. Разберём недостатки и преимущества обоих видов дизайна. Фиксированный дизайн: Преимущества: - Такой дизайн гораздо легче разрабатывать, можно заранее предугадать, как будет выглядеть сайт. - У дизайнера есть возможность следить за размером строки. Недостатки: - На различных расширениях может появиться вертикальный скроллинг, у сайта существует только одно оптимальное разрешение экрана. Резиновый дизайн: Преимущества: - Сайт будет заполнять всё пространство браузера, что значительно улучшает его вид. - Сайт с таким дизайном будет одинаково смотреться на разных расширениях. Недостатки: - Разработка такого дизайна сплошной эксперимент, не знаешь, как поведёт себя вся структура сайта в тот или иной момент. - На больших расширениях возможно появление слишком длинных строк, что значительно утруждает читателя. В общем у каждого вида дизайна, есть свои минусы и плюсы какой выбрать решать вам. Я же могу посоветовать вам использовать смешанный дизайн, некоторые столбцы табличного дизайна задать в процентах а другие в пикселях. Также не стоит забывать, что в нынешнее время HTML используется не только для создания сайтов, но и для создания различных электронных книг, введения рассылок. И снова встает вопрос о типе дизайна… Решать вам, но более 90 % людей ведущих рассылку и пишущих книги, используют фиксированный дизайн. А это согласитесь большая цифра. Да и книга и рассылка как правило, должны напоминать страницу, э эффект страницы легче добиться фиксированным дизайном. Ваше мнение насчёт фиксированного и резинового дизайна можете изложить здесь в комментариях. И так, мы разобрали преимущества и недостатки обоих типов верстания веб страниц. Каждый вправе выбрать для себя своё но я наблюдал страницы сверстанные резиновым дизайном на мониторах с разрешением 1600 рх, картина была удручающая. Все элементы сайта расползались, текст становился не читабельным, графика перемешана с текстом. На такой сайт было страшно смотреть. Многие пользователи используют современные мониторы с разрешением по горизонтали 1600рх а в свойствах выставлено разрешение не более 1280рх. Давайте применим одну хитрость с резиновым дизайном и зафиксируем его в пределах 1152рх, это стандартный размер мониторов. Как следует поступить? К примеру, во многих темах оформления для задания ширины страницы, в таблицах стилей служит такой код: #wrapper { margin: 0 auto; background: #FFF; width: 944px; text-align: left; clear: both; } Как видно, это фиксированный размер страницы и составляет 944рх Если заменить width: 944рх; на width: 100%; то дизайн будет растягиваться на всю ширину экрана монитора при любых разрешениях последнего. Но как выше сказано, нам следует зафиксировать ширину в пределах 1152рх. Для этого выше указанный код заменяем на: #wrapper { margin: 0 auto; background: #FFF; max-width:1152px; width: 100%; width: expression (document.body.clientWidth > 1152? ‘1152px’: ‘100%’); text-align: left; clear: both; }И о ля-ля! Ваш сайт растягивается (имеет резиновый дизайн) до размеров в 1152рх а затем становится фиксированным. Выглядит такой сайт более пристойно чем при размере в 100%, поверте.И немного для самых начинающих. Не всё так просто как кажется на первый взгляд. Если в "Шапке сайта" используются простые фоновые элементы то растянуть не представляет сложности. Но когда применяется разработанная картинка с фиксированными размерами то при резиновом дизайне она не будет растягиваться и вы увидите по краям цвет фонового заполнения. Есть несколько способов избежать такого неприятного момента но это уже другая тема. Масштабируемый логотип (Шапка сайта) Последнее время всё часто встречаются случаи когда при изготовлении сайта применяется своя широкая картинка для верха сайт (шапка сайта). Вот здесь то и сталкиваются сайтостроители (дизайнеры) с неприятностью, картинку можно применить только к сайту с фиксированным дизайном. Как я уже неоднократно указывал, в пользовании очень много старых мониторов 17', имеющих разрешение по горизонтали 1024px а то и того меньше, таких осталось единицы. Современные мониторы позволяют просматривать html страницы вплоть до 1600px по горизонтали. Представте как будет смотреться картинка в шапке сайта если она сделана размером примерно 960px а размер сайта выбран не фиксированным, в 960px а установлено значение в 100%. Сайт растянется на всю ширину монитора а картинка так и останется в 960px по середине, если дизайнер задал ей положение по центру или прижата к левому краю страницы. Зрелище не из приятных. Выход есть!!! Для воплощение описываемого метода, а он очень прост, следует нарисовать шапку размером по ширине в пределах 1200px-1500px а по высоте от 100 до 300px, кому как нравится. Открываем файл index.html (на примере табличной темы оформления "csfever"), находим строку <td wight="100%" height="100" background="templates/$ThemeSel/images/logo.jpg"><a href="index.php" title="Главная"></td> и заменяем её на строку. Кстати, в оригинале ошибка со ссылкой на главную страницу, ну да ладно... <td wight="100%" height="auto"><a href="index.php" title="Главная"><img src="templates/$ThemeSel/images/logo.jpg" border="0" width="100%" /></a></td> Заметьте, размер логотипа-шапки height="100" заменён на height="auto" а сама картинка ставится не как background а как обыкновенная картинка. Теперь ваш сайт будет выглядеть приятно на мониторах от 800 и выше. И даже при размерах по ширине 640px!!! Вот два скриншота при разных разрешениях дисплея: В следующем дополнении постараюсь показать как всё это делается на слоях а пока экспериментируйте и у Вас всё получится. ВНИМАНИЕ!!! Статья писалась для другого движка но суть не меняется.
-
Вопросы по дизайну сайта.
vavan1955 replied to tehnikawdom's topic in Шаблони, дизайн та оформлення магазину
Вообще то так не делается. Делается резиновая шапка, контент и футер но никак левые-правые блоки. Можно сделать резинку от и до но как правило сейчас полную резинку делает только дизайнер-идиот. Почему... Потому как стали применять широкоформатные мониторы и если делать полную резинку то вид будет ужасным, всё расплывётся. Я как то писал статью по поводу изменяемой размеры шапки, не помню тот форум, поищу выложу, потому как исходника нету. Но, опять же скажу, изменение от и до. Например, минимальная ширина 1024px максимальная 1200px но не более. В этих пределах сайт будет растягиваться, в просторечии - резинка а затем фиксированная ширина. В твоём варианте придётся много править от шапки до контента. Сам ты не сделаешь так как не смог даже картинку в шапку встроить, увеличить. Во, нашел свои статьи и скописастил сюда: -
Как сменить цвет одной категории?
vavan1955 replied to hybrid's topic in Шаблони, дизайн та оформлення магазину
Всё работает. Ты нужный id категории поставил? Или скопипастил приведенный код как есть? -
Вопросы по дизайну сайта.
vavan1955 replied to tehnikawdom's topic in Шаблони, дизайн та оформлення магазину
Где вы брали HTML модуль+ там всё расписано как размножать такие модули, я себе сделал 3 разных на базе HTML модуль+ -
Извиняюсь, я что то не стой оперы сказал. Удалил.
-
Спасибо. Тупо убрал плюсик, перестал суммировать
-
Я поставлю немного по другому вопрос. Если в корзине есть товар "А" а затем продолжить покупку и опять кликнуть на товар "А" то он плюсуется и удалить лишний нет возможности, приходится удалять полностью эту позицию и вновь совершать покупку. Столько не нужных телодвижений... Если человек покупает сервисный мануал на фотоаппарат то ему не нужно 2 мануала. Я знаю что есть в корзине кнопка слева, "ОБНОВИТЬ" или "УДАЛИТЬ", кому как, но это не то, надо чтоб один и тот же товар не добавлялся повторно. А вот теперь и вопрос: Где это поправить?
-
обновление с OC 0.0.7 до OC 0.2.2
vavan1955 replied to Googlah's topic in Встановлення, оновлення, налаштування
По версии... Пусть тебя не смущает, видимо так и не исправили, хотя вопросы по этому поводу были. -
А при загрузке страницы постоянно растягивается шаб и справа вылазят правые колонки вот так: Не правильная вёрстка слоями.