ugh

Страница: « 1 2 3 4 5 »

Сообщений 11 страница 20 из 44

Поделиться1129.10.23 14:07

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

маленькое спойлеровое к будущему дизайну в стол. как я рада, что у меня наконец-то получилось выстроить это всё ровно так, как мне хотелось

Цитировать Сообщение 11

Поделиться1229.10.23 19:05

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9026

#p190167,starling написал(а):

наконец-то получилось выстроить это всё ровно так, как мне хотелось

А каким именно образом получилось выстроить? Через скрипт или цсс?

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер‌‍

Поделиться1329.10.23 19:12

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

Automation Baby
"тем и сообщений" перенесла скриптом, привязав к h3, остальное выравнивала гридами. А, ну и в tcr были флексы, чтобы всё вертикально по центру выравнивалось

Цитировать Сообщение 13

Поделиться1429.10.23 23:03

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

и себе заметка на будущее, как оно должно будет выглядеть, когда я доберусь до адаптации под мобильные

Цитировать Сообщение 14

Поделиться1515.02.24 11:22

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

меню навигации и юзер-меню для мобильной версии

Спасибо дискорду за обновление
Сделано за тридцать минут на коленке одной рукой с целью посмотреть, как оно будет смотреться на форуме в мобильной версии.
В мобильной версии (именно в мобильной для смартфонов, для планшетов такое решение сомнительно) подразумевается управление одной рукой на бегу, чтобы можно было не тянуться через весь экран к нужным кнопкам навигации, а иметь все кнопки навигации внизу, куда дотянуться намного проще. С этой же целью текст двух главных кнопок был заменён на иконки: длинная надпись "меню навигации" на маленьком экране не будет смещаться на две строки и ломать всю красоту срезанным текстом второй строки. Выбор иконок, в целом, немного сомнительный, но вроде бы ступора они не вызывают: home - основное меню навигации, menu - уже более "персональные" ссылки.
В целом почти на всех сайтах, где обновили интерфейс, все основные кнопки меню вынесены вниз, опять же, для удобства. Тут должно было быть полотно текста, почему в мобильных версиях на мубб их упорно делают наверху, но будем честны, на мубб и мобильных версий не так много сделано.
Возможно, я апдейтну превьюху и перенесу вниз ещё и панельку с приветствием юзера.
Допилить хоть один дизайн в стол? Нет.
Исполнять сомнительные и никому ненужные решения? Дайте два.

потыкать живое превью на codepen
--text1 - основной цвет текста на форуме
--background, --background1 - фоны контейнеров
для корректной работы иконок нужно подключить шрифт гугловских иконок или заменить их в коде на любой другой иконочный шрифт

код

Код:

/* Меню навигации */
#pun-navlinks .container {
margin: 0;
padding: 8px 10px;
}
#pun-navlinks li {
display: inline;
padding-right: 10px;
}

/* Юзер меню */
#pun-ulinks .container {padding: 8px 10px;}
#pun-ulinks li {
display: inline;
padding-right: 10px;
}

@media screen and (max-width: 540px){
/* Меню навигации */
#pun-navlinks h2 {
  position: fixed;
  bottom: 0;
  left: 0; 
  overflow: initial;
  height: 22px;
  background: var(--text1);
  color: var(--background);
  padding: 7px 0;
  width: calc(50% - 2px);
  border-radius: 0 20px 0 0;
}
#pun-navlinks h2 span {font-size: 0;}
#pun-navlinks h2 span::before {
  font-family: Material Symbols Outlined;
  content: "\e88a";
  color: #ededed;
  font-size: 24px;
  }

#pun-navlinks .container {
  position: fixed;
  left: 0;
  bottom: 36px;
  margin: 0;
  width: calc(50% - 22px);
  padding: 8px 10px;
  background-color: var(--background);
  border-radius: 0 20px 20px 0;
}
#pun-navlinks ul {
  display: none !important;
}
#pun-navlinks:hover ul {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}
#pun-navlinks li {
  display: block;
  text-align: center;
  padding: 4px;
  margin: 5px;
  width: calc(100% - 10px);
  border: 1px solid var(--background1);
}

/* Юзер меню */
#pun-ulinks h2 {
  position: fixed;
  bottom: 0;
  right: 0; 
  overflow: initial;
  height: 22px;
  background: var(--text1);
  color: var(--background);
  padding: 7px 0;
  width: 50%;
  border-radius: 20px 0 0;
}

#pun-ulinks h2 span {font-size: 0;}
#pun-ulinks h2 span::before {
  font-family: Material Symbols Outlined;
  content: "\e5d2";
  color: #ededed;
  font-size: 24px;
  }
  
#pun-ulinks .container {
  position: fixed;
  right: 0;
  bottom: 36px;
  margin: 0;
  width: calc(50% - 20px);
  padding: 8px 10px;
  background-color: var(--background);
  border-radius: 20px 0 0 20px;
}
#pun-ulinks ul {
  display: none !important;
}
#pun-ulinks:hover ul {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}
#pun-ulinks li {
  display: block;
  text-align: center;
  padding: 4px;
  margin: 5px;
  width: calc(100% - 10px);
  border: 1px solid var(--background1);
}

Цитировать Сообщение 15

Поделиться1615.02.24 14:04

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9026

#p194853,starling написал(а):

Исполнять сомнительные и никому ненужные решения? Дайте два.

Это крутое решение! smile

Можно добавить в свободный каталог?

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

Поделиться1715.02.24 14:07

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

#p194860,Automation Baby написал(а):

Можно добавить в свободный каталог?

Да, конечно.

Цитировать Сообщение 17

Поделиться1827.02.24 17:41

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

Это не талант, а скорее кусочек склада, но я однажды теряла уже на него ссылку, второй раз не хочется.

RPG-Awesome

RPG-Awesome is a simple fantasy themed font and CSS toolkit built by nerds, for nerds. We give you 495 easy to use scalable vectors that can be customized to fit your own awesome projects. Change size, color, drop shadow - you can do anything that can be done with the power of CSS.
Шрифт с 495 иконками на фэнтези тематику. Как и любой шрифт, может быть настроен по размеру, цвету, наличию тени — всё зависит от вашей фантазии.

Отредактировано starling (27.02.24 17:42)

Цитировать Сообщение 18

Поделиться1927.02.24 18:47

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9026

#p197391,starling написал(а):

RPG-Awesome

Какое чудо! Не знала что такое есть!

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

Поделиться2004.03.24 13:54

Автор: starling
Модератор
Последний визит:
17.12.24 09:41
Уважение: +1235

Полчаса времени и я такая "а, то есть это до такой степени просто было сделать, да?" Из плюсов: оно даже для мобильной версии требует минимум правок, как я поняла.

Отредактировано starling (04.03.24 13:55)

Цитировать Сообщение 20

Ответить

Страница: « 1 2 3 4 5 »

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»

Имя

font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens

format_align_left format_align_center format_align_right list table_view

link add_photo_alternate ondemand_video mood mic

content_cut lock_open format_quote code

horizontal_rule anchor live_help emoji_symbols library_add

ТочкамиDots

КружочкамиCircles

КвадратамиSquares

ЦифрамиNumbers

Римскими цифрамиRoman Numerals

Без обозначенийNo Markers

Многострочный пункт спискаMultiline List Item

ТекстText

HTML

Javascript

Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms

10px 12px 14px 16px 18px 20px 22px

ЗаголовокTitle Автосжатие больших картинокAuto-resize large images Скрыть от гостейHide from guests Ссылка «скачать» Download link Имя читателяReader's name Добавлено спустя…Added after... Надстрочный текстSuperscript text Подстрочный текстSubscript text БлокBlock HTML иконка

Скрыть инструментарий Показать инструментарий

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],

Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],

Красный пост[block="saledpost"]saledpost[/block],

Синий пост[block="forsalepost"]forsalepost[/block],

Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]

Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]

Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]

Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]

Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)

Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,

Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)
Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)

Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,

Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)

Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,

Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)

Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]

Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]

Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]

Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]

Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]

Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]

Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]

Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]

Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]

Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]

Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]

Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]

Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе

ugh

Сообщений 11 страница 20 из 44

Поделиться1129.10.23 14:07

Поделиться1229.10.23 19:05

Поделиться1329.10.23 19:12

Поделиться1429.10.23 23:03

Поделиться1515.02.24 11:22

Поделиться1615.02.24 14:04

Поделиться1715.02.24 14:07

Поделиться1827.02.24 17:41

Поделиться1927.02.24 18:47

Поделиться2004.03.24 13:54

Быстрый ответ

Теги оформления специальных постов

Теги оформления картинок

Теги оформления контента