Zoltan, оно работает...

Форум » Вопросы дизайна » Zoltan, оно работает... » Ответить

Zoltan, оно работает...

Serifa: Zoltan, оно работает! Благодарю!)) Наверное, на smf тоже будет. (Там надо еще над фоном поработать... Закругленные уголки в шаблоне много неудобства доставляют. Они ведь там закрашенные!) Заодно добавила в код для борды отображение для убунтовских шрифтов. Разница то ли есть, то ли нет... На зернистом фоне таблицы сразу не определишь. Похожая тема здесь (про движок SMF): http://forroll.forum24.ru/?1-6-0-00000237-000-80-0

Ответов - 47 новых, стр: 1 2 3 4 All

Serifa: Нет, так не получится... Как мне фоновую заливку-то сделать? Тут ведь просто используются маленькие картинки. А там на фоне - целый готовый прямоугольник(

Zoltan: Serifa пишет: Как мне фоновую заливку-то сделать? для которого из блоков? или общий бэкграунд всего и вся?

Serifa: Как на этом форуме: заливку на фон таблицы форума. Я так понимаю, придется полностью переписать для этого структура форума SMF :) Потому что то, что там сейчас генерится, в принципе отличается от форума на борде. Так что это дохлый номер...

Zoltan: Serifa пишет: Так что это дохлый номер... По идее, так можно, проблема в том, что половина дизайна залита картинкой, main block тот самый. Даже если сделать заливки для остальных частей, то их нужно будет стыковать с этим спрайтом %) мороки больше, чем надо

Serifa: Это точно... Мне хотя бы версию форума обновить и моды обратно поставить - это проблема)

Serifa: Zoltan, может, ты знаешь, как сделать такую вот менюшку, как здесь: http://lastchance.0bb.ru/ Где кнопочки "События", "Инфо", "Реклама"... По клику внизу в рамке появляется новое сообщение.

Zoltan: Serifa пишет: http://lastchance.0bb.ru/ Шанс всё еще жив? О_о Это нечто Serifa пишет: может, ты знаешь, как сделать такую вот менюшку, как здесь Да легко Это обычные jquery tabs. Можно использовать mootools, но там именно jq и второй вариант я лично недолюбливаю. Исторически так сложилось. Вот здесь в блоге человек описывает свой небольшой скриптик для подобных вещей, там же с примерами и прочим (: Единственное, там не описано, как добавить картинки в заголовки. Можно сделать вот так <ul class="tabs"> <li class="FIRST current">Первая вкладка</li> <li class="SECOND"> Вторая вкладка</li> <li class="THIRD"> Третья вкладка</li> <li class="FOURTH"> Червертая вкладка</li> </ul> выделенное жирным - это то, чего там, в блоге, нет. Поясню, class="current" будет переключаться скриптом при клике, это указание на то, что данная вкладка - активна. Т.е кликнем по второй, будет первая class="first", а вторая class="second current", автоматом. Значит, нужно просто указать стили Оригинальный css, без картинок, такой <style type="text/css"> * {margin: 0; padding: 0;} body {margin: 30px; font: 13px/1.5 "Trebuchet MS", Tahoma, Arial;} a {color: #0094D6;} p {padding: 7px 0;} h1 {font-size: 21px; font-weight: normal; margin: 0 0 30px;} .section { width: 600px; background: #EFEFEF; margin: 0 0 30px; } ul.tabs { height: 28px; line-height: 25px; list-style: none; border-bottom: 1px solid #DDD; background: #FFF; } .tabs li { float: left; display: inline; margin: 0 1px -1px 0; padding: 0 13px 1px; color: #777; cursor: pointer; background: #F9F9F9; border: 1px solid #E4E4E4; border-bottom: 1px solid #F9F9F9; position: relative; } .tabs li:hover, .vertical .tabs li:hover { color: #F70; padding: 0 13px; background: #FFFFDF; border: 1px solid #FFCA95; } .tabs li.current { color: #444; background: #EFEFEF; padding: 0 13px 2px; border: 1px solid #D4D4D4; border-bottom: 1px solid #EFEFEF; } .box { display: none; border: 1px solid #D4D4D4; border-width: 0 1px 1px; background: #EFEFEF; padding: 0 12px; } .box.visible { display: block; } .section.vertical { width: 440px; border-left: 160px solid #FFF; } .vertical .tabs { width: 160px; float: left; display: inline; margin: 0 0 0 -160px; } .vertical .tabs li { padding: 0 13px; margin: 0 0 1px; border: 1px solid #E4E4E4; border-right: 1px solid #F9F9F9; width: 132px; height: 25px; } .vertical .tabs li:hover { width: 131px; } .vertical .tabs li.current { width: 133px; color: #444; background: #EFEFEF; border: 1px solid #D4D4D4; border-right: 1px solid #EFEFEF; margin-right: -1px; } .vertical .box { border-width: 1px; } </style> А мы добавим 1. для активной первой вкладки .tabs li.first.current { background: url(путь_к_нашей_картинке);} 2. Наводим курсор на вкладку .tabs li.first:hover { background: url(путь_к_нашей_второй_картинке);} 3. вкладка неактивна .tabs li.first { background: url(путь_к_нашей_третьей_картинке);} Соответственно, картинки нужно припаять к каждой вкладке, т.е дальше .tabs li.second.current { background: url(путь_к_нашей_картинке_для второй вкладки);} И далее, далее . Сложно описываю, на самом деле всё это просто делается, хоть на том же шансе немного по-другому, табы загнаны в ссылки, скорее всего, это делалось для старых версий ие, у которых могут быть проблемы с hover. З.Ы. должно работать.

Serifa: Совсем простой десткий вопрос: для SMF в файлик index.css куда все это добавлять? Уж хотя бы без картинок...

Serifa: Позволю себе процитировать ответ с форума русской техподдержки СМФ. Скрипт для календарных ссылок будет оформлен в виде мода, как примерно и было задумано. По ссылке можно его скачать. Может, будут еще идеи... ... Да, конечно, правки изначально оформлены в виде мода. От окончательной стартовой версии отделяет только отсутствие внятных названий/описаний. Сам мод можете взять здесь: http://smf2.maestrosite.ru/maestrosite-CalendarMessages-0.1.tar.gz. По теме от Золтана. Приведённое решение примерно совпадает, отличия в деталях. Кроме того, в моде ссылки будут нормальными, в соответствии с настройками в админке. Мы говорили об этом здесь: http://forroll.forum24.ru/?1-9-0-00000365-000-280-0

Zoltan: Serifa пишет: Совсем простой десткий вопрос: для SMF в файлик index.css куда все это добавлять? да можно просто в самый конец добавить (: По моду - ну, раз скачать можно и даже настройки есть, то вообще гуд)

Serifa: Выдираю из контента, чтобы скриптик не потерялся. Zoltan пишет здесь: http://forroll.forum24.ru/?1-16-0-00000039-000-160-0 <html> <script type="text/javascript" src="http://путь_к_скрипту/jquery.js"></script> <style> #tabs { position: relative; z-index:3; top:-60px; width: 100%; } #boxLinks { list-style: none; overflow: hidden; } #boxLinks li { display: inline; } #boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: 1px solid #ccc; float: left; display: block; margin-left: -1px; position: relative; left: 1px; } #boxLinks li a:hover { color: #fff; background: #000; } #boxLinks li.current a { background: red; } #box { height: 250px; border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; } .box { display: none; height: 250px; overflow: auto; display: block; position: relative; overflow-x: hidden; } #box1:target, #box2:target, #box3:target { display: block; } </style> <script> $(function(){ $('li.tabs').click(function(){ $('li.tabs').removeClass('current'); $(this).addClass('current'); }); }); </script> <div id="box"> <div id="box3" class="box"> BOX3  </div> <div id="box1" class="box"> BOX1 </div> <div id="box2" class="box"> BOX2 </div> </div> <div id="tabs"> <ul id="boxLinks" > <li class="tabs"><a href="#box2" >Tab 2</a></li> <li class="tabs"><a href="#box1">Tab 1</a></li> <li class="tabs"><a href="#box3">Tab 3</a></li> </ul> </div> </html> Если не подключать jquery, то выделенное жирным не нужно, но не будет выделять кликнутый элемент. Разберёшься?

Serifa: Нашла какой-то скриптик (на яндексе). Шум моря, чайки, красивая картинка. А как его правильно вставлять? И насколько это безопасно? <embed src="http://www.yapfiles.ru/files/452847/vedenei.more_chaiki..swf" quality="high" allowscriptaccess="always" width="450" height="625" wmode="transparent"/>

Serifa: Zoltan пишет: #header{ background: url(../images/imgs/-1.jpg); /* указываем фон */ /*отступ, который вообще не нужен padding-left: 20px; */ -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; } #header div.frame{ display: block; padding: 5px 20px 1em 0; } Отступ-таки нужен, поэтому оставляем padding-left: 20px; Экспериментирую с одной из тем на форролл орг.

Serifa: Получилось нечто такое: Как-то смущают теперь кнопки меню. Вокруг кнопки светлый ореол, т.к. файлик-основа покрашен в цвета main блока. И вот как теперь его перекрашивать? Или что-то другое с меню можно сделать? Золтан, ну ты уже знаешь, что ты гений?))

Serifa: На этом форуме отвалились красивые цитаты :( И это не браузер, потому что тут http://forroll.org/index.php цитаты на месте, видно на главной странице. Куда делись цитаты? :(

полная версия страницы