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

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

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

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

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

Zoltan: Serifa пишет: Надо вентилятор, однако. Можно просто следить за температурой, если не греется, то зачем вентиляторы лишние? будет и на смф работать, почему нет? это же не от движка зависит. А закруглённые уголки я бы вообще выбросил и сделал закругление через бордер радиус, благо, это уже даже на ие работает, и мороки меньше в разы. И выделенное */ - можно не копировать, это комментарий, который браузером не обрабатывается, просто уже привык их ставить везде, где можно.

Serifa: Дык... Сейчас 24 градуса на улице, один диск - 44 градуса, другой - 48. Уж лучше лишний вентилятор, наверное. Комментарии надо! Я через неделю уже забуду, об чем там речь шла, прочитаю и вспомню И как мне выбросить закругленные уголки?? Там же одна картинка. Я пыталась их затереть до прозрачности, в итоге проклятый файл сразу становился в два раза тяжелее(

Serifa: Офф: Пыталась отрезать кусок от флудовой темы, в итоге часть ушла в новую тему, а часть вообще куда-то пропала. За почти пять лет эксплуатации форы на борде у меня получилось правильно разделить тему только ОДИН раз! :))

Zoltan: Serifa пишет: Сейчас 24 градуса на улице, один диск - 44 градуса, другой - 48 На улице 35 в тени, 44-43 градуса в системнике. Это нормальные рабочие температуры) C углами как, я сделал себе так кнопки. И сделал их квадратными, жпег, мало весит и всё такое. А потом присвоил ей стиль со скруглением углов. Очень удобно. Уже знакомые -moz-border-radius: 7px 7px 7px 7px; -webkit-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; После чего кнопка стала с закруглёнными углами. Хоть на самом деле углы ей закругляет сам браузер. Точно так же можно сделать с любой картинкой-блоком-кнопкой.

Serifa: Zoltan пишет: На улице 35 в тени, 44-43 градуса в системнике. Это нормальные рабочие температуры) Может, лучше предохраняться?)) Алгоритм, значит, для smf будет такой: 1. Перерисовываю из пнг-шаблона жпег 2. Прописываю пути к жпег в стилях темы 3. Плюс присвоить стиль со скруглением углов... В общем, это надо экспериментировать.

Zoltan: Serifa пишет: Может, лучше предохраняться?)) ну так если оно может до сотни градусов греться, а потом само вырубится, вдруг что, зачем беспокоиться зря? хоть за температурой стоит следить, но бояться на 40-50 градусов рановато. Хоть это просто моё мнение) Serifa пишет: Алгоритм, значит, для smf будет такой: да просто написал, как можно, не обязательно же так делать надо будет на досуге поизвращаться над темами смф, ещё ни разу не трогал его стили. upd. установил. Вёрстка совсем не нравится

Serifa: Zoltan пишет: Вёрстка совсем не нравится А кому она нравится?) Все ругаются, а работать надо. Потому и дизайнерские темы стоят от 5 тысяч. Хотя находила я тут одного дезигнера, который портфолио собирал и обещал сделать бесплатно мне тему. Показал мне эскиз. Чесслово, от такого эскиза дефолт кажется чудом дизайнерской мысли. А потом мне этот "дезигнер" сказал: не надо обновлять версию форума, зачем? моды же слетят! А я-то не знала, ага :) Уж лучше я сама себе диз слеплю из того, что есть. Куда-то пропали красивые цитаты( Наверное, это из-за добавленного кода для формы ответа(

Zoltan: Serifa пишет: А кому она нравится?) Все ругаются, а работать надо. Не знаю, я так подумал, сейчас выброшу оттуда эти спрайты и огромный main_block.png, чтоб хоть работать с шаблоном было попроще. Serifa пишет: Показал мне эскиз. Чесслово, от такого эскиза дефолт кажется чудом дизайнерской мысли. Зато бесплатно cорри, максимум в течение 20 часов цитаты вернутся, технические небольшие проблемы. UPD. Чтобы избавиться от кучи спрайтов в шапке можно сделать вот так Берём в index.css вот это #header { background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px; padding-left: 20px; } #header div.frame { background: url(../images/theme/main_block.png) no-repeat 100% -480px; display: block; padding: 5px 20px 1em 0; } И вот так переделываем #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; } Фон ставим любой, я брал жпг с квадратными углами.

Serifa: А пример можно увидеть? Я запихнула фон как на этом форуме, а углы тупо закрасила вверху и внизу потемнее. Конечно, это не самое остроумное решение, но вроде бы не очень заметно. Но теперь проблема с копирайтами в подвале! Может, им как-то фон заделать? Как вставить фон для ссылки? background, вроде, надо?

Zoltan: раз цитаты вернулись, то и пример будет видно.. http://smf.darknessworld.ru/ картинка-фон шапки Просто заливка и скругление углов. Я так подумал, там вёрстка удобная для резиновой шапки, но как понимаю, она не резиновая изначально. Serifa пишет: Конечно, это не самое остроумное решение, но вроде бы не очень заметно. Если всё устраивает, то можно дальше и не заморачиваться, наверное) Serifa пишет: Как вставить фон для ссылки? background, вроде, надо? В каком смысле, можно конкретнее, а то не понимаю что надо)

Serifa: Вот эти ссылки внизу форума (копирайты): В идеале было бы здорово, чтобы они отображались внутри блока main. А не под ним. Но трогать копирайты лишний раз чревато. Я однажды правила index.russian-utf8.php, случайно кавычку лишнюю не туда воткнула - у меня копирайты исчезли! И появилось предупреждение внизу форума! Так я еще полчаса не могла понять, почему. Про index.russian-utf8.php подумала в последнюю очередь. http://smf.darknessworld.ru/ Зачем такой ядовитый зеленый?)) А что ты поставил вместе main_block.png? Такое странное фоновое изображение открывается: все ядовито-зеленое и какой-то черный хвостик

Zoltan: Serifa пишет: В идеале было бы здорово, чтобы они отображались внутри блока main. А не под ним. Это нужно лезть в шаблоны, для форума это index.template.php, ну и + шаблон для портала. Для форума достаточно найти theme_copyright() и перенести в нужное место. Да, на счёт кавычек, на них всё держится, если есть лишняя, либо недостаёт одной - то всё сломается. Если что, можно дать мне файл шаблона, переставлю) Serifa пишет: А что ты поставил вместе main_block.png? так зелень эту и поставил, чтоб было видно, где эта картинка используется вообще, огромный же спрайт. Оказалось, по всему форуму используется Serifa пишет: Такое странное фоновое изображение открывается Странно, а у меня на фоне стандартный голубой градиент. И вообще, я говорил о шапке, только шапку трогал, остальное так, просто.

Serifa: Слишком сложно. Хотя бы копирайты как-то выделить, а то нецивильно выглядят: http://itmages.ru/image/view/524858/58258a8c Zoltan пишет: Странно, а у меня на фоне стандартный голубой градиент. И вообще, я говорил о шапке, только шапку трогал, остальное так, просто. Да, но правой кнопкой мыши и "открыть фоновое изображение". А там всё зелёное :)

Zoltan: Serifa пишет: Хотя бы копирайты как-то выделить Без этой картинки я бы так и не понял В css можно добавить .copyright { background: white; /* любой цвет или изображение */ } И, по идее, фон появится Serifa пишет: Да, но правой кнопкой мыши и "открыть фоновое изображение". А там всё зелёное :) Ну вот я просто зелень вставил, чтоб долго не искать, где ещё эта картинка используется. У меня бывают "дизайны" такие, просто чтоб разобраться. Ещё часто бордюрки блокам делаю, чтобы видно было, где какой блок. Для удобства.

Serifa: А как дальше будешь развивать дизайн? Вдруг изобретешь нечто экстраординарное :) Интересно же! Zoltan, оно работает! :) Немного "модифицировала", заглянув в код твоих красивых цитат: .copyright { background: grey; /* любой цвет или изображение */ padding: 5 15 5; -moz-border-radius:13px 35px; -webkit-border-radius:13px 35px; border-radius:13px 35px;} Оказалось, что кроме копирайтов, там еще две строки надо также оформить. Надо еще найти, что там за стили.

Zoltan: Serifa да ну, какое экстраординарное, откуда? Хмм, строчки, наверное, можно сделать вот так .frame ul { } это будет стиль фона для копирайтов и ссылок на валидатор-рсс-вап. Т.е .copyright { } можно будет убрать. По идее. И ещё #footer_section p { } это будет для времени генерации и запросов.

Serifa: Сейчас я спать, завтра буду пробовать дальше :) Спокойной ночи, камрады! А также доброе утро и добрый день! :)

Serifa: Опять спать... уже три дня сплю... на ходу... Что ли в выходные отоспаться уже на неделю вперед?

Zoltan: Заранее выспаться невозможно, сколько бы не спал - завтра всё равно захочется ещё

Serifa: Продолжаем мучить форум :) Zoltan пишет: Хмм, строчки, наверное, можно сделать вот так .frame ul { } это будет стиль фона для копирайтов и ссылок на валидатор-рсс-вап. Т.е .copyright { } можно будет убрать. По идее. Это приводит к неожиданным последствиям, пришлось отказаться: Теперь выглядит вот так: Таким манером, проблема с ссылками для rss и версией для телефонов осталась.

Zoltan: Serifa пишет: Это приводит к неожиданным последствиям, пришлось отказаться: Хм, действительно Должно быть хорошо с div#footer_section .frame ul { } но это охватывает и копирайт смф, и ссылки на вап-рсс.

Serifa: Теперь вот так: Гораздо более приемлемый вариант.

Zoltan: Serifa пишет: Теперь вот так А как же #footer_section p {} ? (:

Alexandra Forbarra: Zoltan пишет: А как же #footer_section p {} ? (: Хм... а куда его надо?( Вот кусок из кода, вставка даже с твоими комментариями )) /* the footer wih copyright links etc. */ #footer_section { text-align: center; background: url(../images/theme/main_block.png) no-repeat 0 -820px; padding-left: 20px; } #footer_section span.smalltext { font-size: 100%; } #footer_section div.frame { background: url(../images/theme/main_block.png) no-repeat 100% -820px; display: block; padding: 60px 0 0 0; } #footer_section ul li, #footer_section p { font-size: 0.8em; } #footer_section ul li { display: inline; padding-right: 5px; } #footer_section ul li.copyright { display: block; } div#footer_section .frame ul { color:grey; background: #222222; /* любой цвет или изображение */ padding: 5 15 5; -moz-border-radius:13px 35px; -webkit-border-radius:13px 35px; border-radius:13px 35px; }

Zoltan: Alexandra Forbarra пишет: Хм... а куда его надо?( Нууу, это время генерации страницы, раньше было же выделено тоже, теперь нет) Если без особых отличий от остального, то можно div#footer_section .frame ul просто заменить на div#footer_section .frame ul, #footer_section p

Serifa: А как лучше - выделить от остального или нет? Вспомнила, это я уже пробовала: #footer_section p { Вот так делала: #footer_section p { color:grey; background: #222222; /* любой цвет или изображение */ padding: 5 15 5; -moz-border-radius:13px 35px; -webkit-border-radius:13px 35px; border-radius:13px 35px;} В итоге получается вот такое, как на картинке на первой странице: Почему-то "футер" у форума во всех местах натыкан)

Zoltan: Serifa пишет: Вот так делала: #footer_section p { А на скрине .frame ul который действительно, и вверху, и внизу. По-моему, с #footer_section p { } всё будет работать хорошо, это из-за frame ul такое было. Serifa пишет: А как лучше - выделить от остального или нет? Это уже на выбор админа. Да и не думаю, что кто-то особо всматривается во время генерации страниц

Serifa: Ладно, завтра еще попробую, вдруг оно будет симпатичнее... Опять спать хочется, что такое...

Serifa: Zoltan, еще спросить хотела, какую картинку ты использовал в своем эксперименте вместо main_block.png? Хочу тоже поэкспериментировать. А то не получается сделать фоновую заливку на форуме - файл сразу становится очень тяжелым (до мегабайта весом и больше). Если будет jpg, то можно будет сделать заливку на фон, как на этой форе.

Zoltan: Serifa Ну так на предыдущей странице писалось же) сам main_block - зелёный, а в шапку вставил совершенно другую, серую картинку jpg.

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 цитаты на месте, видно на главной странице. Куда делись цитаты? :(

Zoltan: Serifa пишет: Куда делись цитаты? :( мой сайт отвалился, а т.к всё тянулось оттуда - всё и отвалилось. Немного не вовремя заболел и три недели потерял, с этими госпитализациями постараюсь скоро вернуть. З.Ы. ужос-ужос. Serifa пишет: Или что-то другое с меню можно сделать? не понял в чем беда. Почему не перекрасить основу снова?

Serifa: Zoltan пишет: не понял в чем беда. Почему не перекрасить основу снова? На тот момент я перекрасила этих "основ" штук семь, так что сил уже не было на них ( Там уж если занялся перекраской, то туеву хучу файлов надо через гимп отредактить. А потом захожу на дефолт, и вижу, что он всё равно ярче и читабельнее. Что значит - профессиональный дизайн. Что ли плясать от дефолта? Тем более, камрады из SMF пилят уже версию 3.0! Параллельно с версией 2.1! И обе версии - очень светлые в дизайне, что, видимо, выбрано как классическая модель для SMF. Ждем-с возврат красивых цитат))

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