25 марта 2007 в 12:57
Такая проблемка... Надо сделать так, чтобы в главном меню обычные, текстовые ссылки, заменить на кнопки. То бишь изображение, по нему тыкаешь - а там ссылка срабатывает.
И вообще - возможно ли такое?
Комментарии
Я тут гемора нажил только лишь захотел стиль обычного меню поменять
А ты вон чего захотел
Надо искать на drupal.org кто-то пытался такое-же сделать. Мелькало где-то.
Правда не помню увенчалось успехом или нет. Друпал вешь в себе.
Подними глаза до кнопок "Новости", "Документация"... в заголовке этой страницы. Сделано до боли просто.
В HTML выводится просто тег a, а вот CSS для него весьма витиеватый:
background:#6DA6E2 url(images/tabs.gif) repeat-x scroll 0%;
border-color:#6191C5;
border-style:solid;
border-width:1px 1px 0px;
color:#FFFFFF;
display:block;
float:left;
font-weight:bold;
margin:0px 1px 0px 0px;
padding:5px 14px;
}
Что из этого непонятно?
Конечно если это то, что нужно.
а теперь вопрос на засыпку - а куда это вставляется? Понятно, что в style.css, но куда именно?
Прежде чем править темы надо изучить HTML, CSS, PHP (желательно именно в это порядке).
Для исправления внешнего вида страниц (цвета, рамочки, шрифт, фон и т.д.), достаточно знания первых двух технологий.
2Шкипер: Ты похоже относишь к разряду людей, любящих покритиковать и покричать по незначительному поводу? Не стоит. Особенно про вещи, знания о которых (пока) у тебя ограничены. Любая система - это компромисс между удобством и универсальностью. Drupal больше придерживается стороны универсальности. Отсюда высокий порог вхождения и высокая гибкость построения системе.
эээ... А с чего такое мнение обо мне - что люблю покритиковать и покричать? Скорее уж наоборот. Я как раз не критикую, а хочу разобраться. ХТМЛ знаю неплохо, а вот CSS только начал изучать - а потому и спрашиваю.
Не думаю, что порог вхождения снизится от того, что мне не помогут
Неправильный вопрос на засыпку. Если тебе все понятно в приведенном куске, то такого вопроса возникнуть не должно. Если не понятно - задавай вопросы по порядку. Если не хочешь или все понято - тогда домашнее задание: объяснить следующие две строчки
display:block;
float:left;
мне понятно что это должно быть вставлено в style.css, потому как именно он отвечает за стиль страницы. Но вот куда именно - не вкурил мальца.
Сорри за мой резкий тон - просто уже перестал замечать, натаскался за последнюю неделю
Добавление к домашнему заданию:
Чему будет равна ширина каждой стороны рамки и почему:
border-width:1px 1px 0px;
Стиль определённый последним - главнее.
Соответственно лучше ставить в конец style.css
Допиши где-нибудь в конце файла, чтобы видны были твои модификации (если используется готовая тема)- - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - -
Переводы некоторых модулей.
All content management systems suck, Drupal just happens to suck less. -- Boris Mann at DrupalCON Amsterdam, August 2005.
А самое интересное, посмотри на саму картинку images/tabs.gif и ответь на два вопроса:
1. Какова максимальная ширина кнопки (в пикселах) "шоп красиво было"
2. Зачем такая несуразная картинка может быть использована и где искать использование ее второй половинки?
друпал отстой! тут не понятно как цсс работает?
Канешна, атстой! Непонятно даже, как хтмль работает. Может тут ваще люди на другом конце провода сидят и тексты с картинками показывают по запросу.
и ваще кто эти люди и что тут происходит?
Ок, всем спасибо за ответы.
Теперь еще один вопрос возник. Приведенный код используется для Primary links, как здесь. А вот как сдлеать то же самое для секондари? прописать в самом начале #secondary a {style.css (line 274), а не #primary a {style.css (line 274)?
И возможно ли сделать кнопки разными, а не одинаковыми?
Заранее спасибо за помощь
гы. style.css (line 274) - это я просто скопировал из файрбага. Типа чтобы было видно из какого файла и с какой строки бралось. Выкинь.
<ul class="links-menu">
...
</ul>
</div>
<div id="secondary" class="clear-block">
<ul class="links-menu">
...
</ul>
</div>
Обрати внимание на свойства id тегов div и ответь на свой первый вопрос.
По поводу второго вопроса - малой кровью никак. Если уж совсем невтерпеж разные кнопочки - создай свой блок, вставь туда любой код. Только в этом случае меню не будет динамическим. Либо патчить тему, но тогда надо знать PHP
чего? зачем что-то патчить? чтобы кнопочки разные сделать? вы с ума сошли?
Приведи свой вариант.
Спасибо за ответ!
Нда, очень жаль что динамического меню так просто не сделаешь. Ну ладно, так тоже будет хорошо. Спасибо за помощь!
Про отдельный блок со своим кодом это я давно уже думал ))
Хмм... теперь следующая проблема. Вставил код, все ок, но есть проблема... Залил картинку для кнопки, а она не отражается...
И еще. Когда картинки не было, было видно, что она должна быть - то есть была пустая рамочка, выделяющаяся на фоне всего остального. Но вот беда - на ИЕ все это хозяйство видно, а на фаирфоксе - нет. Это нормально? В смысле что когда залью картинку все появится, или я чего-то опять накосячил.
так, с отображением кнопки разобрался более-менее.
Теперь осталась другая проблема. В IE все ок, а вот в фоксе все "поплыло"...
Чтобы это могло быть?
Посмотрите сами:
http://www.desarts.ru/
это float:left
Ну я так и думал.
Только вот чего с ним делать?
попробуй у ul поставить
clear:both
но вообще нужно после меню воткнуть div или span с clear:both
тогда точно поможет
это в style.css?
ессно..
попробуй сперва для ul, который у тебя список ссылок строит, если не получится, после списка воткни какойнить div и пропиши ему
Кхм... я, конечно, дико извиняюсь, но перерыл весь style.css и не нашел там ul
Попробовал в конце фаила прописать такое вот:
}
div.menu
clear:both
{
В чем я опять накосячил? Ибо не помогло
Можете просто привести нужный код, который вставить? Я ж полный нуб в этом.
Аццкий отжыг.
Сравни и найди 10 различий:
color:#FFFFFF;
display:block;
float:left;
}
и
div.menu
clear:both
{
и вообще, если не знаешь как поступить - или читай доки или делай по образу и подобию.
#primary ul{
clear:both;
}
или какой у тебя там класс..
Разобрался. Методом научного тыка, но разобрался ))
Дело оказалось не в style.css , а в base.css
в 85 строчке надо было убрать:
padding: 0px 4px;
Т.е было:
}
#top-nav ul li {
display: inline;
padding: 0px 4px;
}
а стало:
}
#top-nav ul li {
display: inline;
}
Неправильно разобрался. Надо было не убирать из base.css, а добавлять в style.css
например padding: 0px 0px;
хммм...
а чем грозит в будущем то, что сделал я? В смысле могут ли какие-то косяки начаться?
попробовал сделать по вашему совету. Нифига. та же ботва что и раньше.