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

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Внимание! Объявлены спойлеры о новом проекте "Ролевой информатор" читать часть 1 и часть 2.

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

Привет, Гость! Войдите или зарегистрируйтесь.



Верстка и бродяга

Сообщений 1 страница 10 из 49

1

https://i.imgur.com/gvbCAht.jpg

сей топик - обучалка и техподдержка для @бродяга , который решил встать на путь крутого вебдевелопера.

Словарик используемых терминов Герды
Туловище, тело форума/сайта - основная часть форума/сайта, которая содержит весь контент. для майбб это селекторы #pun_wrap, #pun и .punbb
Фон форума/сайта - то, что пихается в body или html, то есть фоновые элементы, не затрагивающие контент.

тестовик: http://magiclibrary.0pk.ru/

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+2

2

@бродяга
дарю тебе свой тестовик (в ЛС доступ)
один из клевых, там много чего настроено - есть и многостраничные топики и все виды топиков (почти - не хватает опросов, это новый тип), и ЛС настроено на тест новых и больших сообщений, и всякие описания и виды стандартного контента постов в наличии.

на него на данный момент установлен код, с которым отныне ты начинаешь верстку:

Код:
@import url(style_cs.css);

/* Стандартные коды майбб, которые пригодятся */

.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {padding: 0; list-style: none;}
.punbb img {border:none}
.punbb .main table {table-layout: fixed; width: 100%;}
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
}

.punbb .post-content em {font-style: italic}
.punbb optgroup {font-weight: bold;}

#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
}

.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
}

а вот тебе макет на тренировочку от бруксы: https://drive.google.com/file/d/1mks0fC … sp=sharing
поверстаем его на почти "голый" движок.

схема проста. ты верстаешь, а проверяю, подсказываю, направляю, если надо - исправляю. мб @satsana тоже заскочит.
раздели работу на этапы, начни с общих стилей: с фона, с "туловища" форума, с шапки. покажи, что получается, как вставлял, можно ли это было сделать через другое место, не поставил ли ты себе палок в колеса, которые будут впереди. :)

сроки, есесвенно, не горят. когда хошь - занимайся. :)

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+3

3

Герда
Значит, как я понял, в свой стиль мне надо вставить код выше и уже на него верстать скачанный макет?
Сносить всё можно в стиле спокойно?

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

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+1

4

бродяга
да, он там уже - в своём стиле.
осталось ток включить свой стиль и можно эксперементировать

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

5

Герда
Я там ночером попытался поставить части диза по фэншую. Чот накрутил, дальше затык - как приделать рамочку картинкой на расстоянии в 1 пиксель от тела форума (в макете вижу, там прозрачность) и надо ли. Почти уверен, что надо как-то по-другому.
В общем, я не очень уверен, как лучше порезать макет и куда вставлять. Посмотрел, как у тебя и у Сатсаны, но всё ж расстояние в 1 пиксель от рамки смущает.

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

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+2

6

так, сначала замечания по фону и шапке.

1. форматы
https://forumstatic.ru/files/0002/c4/43/95418.png
https://forumstatic.ru/files/0002/c4/43/44727.png
если в картинке нет прозрачности, не над сохранять в пнг, делай в джпеге. вот тут про форматы картинок можно почитать
ну или пойди на подвиг (до которого я еще не дошла) и используй вебп. :)
переделывать этот момент, думаю, не надо. так, на будущее.

размер картиночек хороший, молодец, что не стал делать огромную ололо-шапку из всего того, что сверху, а стал пытаться отделять котлеты от яиц. :cool:

2. как лучше сделать наезды элементов шапки на "туловище"
с шапкой можно поступить более жадно и практично.

во-первых, у тебя персы отделены от фона полностью (чтобы их ноги залезли на форум). получаются достаточно крупные такие пнг-поцаны.
слепи их с фоном, а дополнительно выреж пнг-картинки ног, которые будут залазить на туловище - именно их спозиционируем поверх туловища.
таким образом достигнем вот таких крутых штук:
1. можно будет ставить шапку в фон (чтобы она не образовывала нижний скролл на разрешении 1024пкс)
2. пнг-ножки будут меньше весить, чем полноценные пнг-поцаны
3. при мобильной верстке можно будет убрать ноги, оставив поцанов на фоне.
4. пригодится для тех же самых линий и бордюров вокруг туловища

3. куда лучше вставлять шапку
во, вторых, пихай шапку тоже на фон, куда впихнул остальные фоновые элементы:

Код:
background: url(https://forumstatic.ru/files/0002/c4/43/95418.png) repeat-x top center, url(https://forumstatic.ru/files/0002/c4/43/44727.png) repeat top center;

фон сам "обрежется" при меньшем разрешении, а со всякими контейнерами внутренними приходится "колдовать", чтоб прокрутки не было.
вообще старайся не сувать внутрь "тела" что-либо, что выходит за пределы его ширины.

и нижнюю картинку туда же можно засунуть.

4. ширина
во-первых, начни для блоков (не табличек) вместо width использовать max-width - пригодится для адаптивных стилей.
если что-то по умолчанию растянуто на всю ширину, то устанавливай максимальную ширину, а не фиксированную.
тогда на больших экранах этот элемент займёт НЕ всё пространство, ты добиваешься того же эффекта, что и при использовании width
зато на маленьких элемент, не будет "выезжать" за пределы экрана. если экран будет меньше max-width, то на нем элемент просто займет весь экран.

что важно (на всякий случай про это говорю, т.к. часто наблюдаю) - не надо прописывать ширину для КАЖДОГО внутреннего элемента.
если ты поставил ширину 1030 на "туловище", то внутренние блоки будут такой же ширины.
конкретно в этом дизайне ты прописываешь #pun-navlinks {width: 900px;..., чтобы меню под ноги персонажей не убежало, но в других дизах этого делать не надо, а то некоторые адаптивки когда делаешь, можно задолбаться убирать фиксированную ширину ото всюду ))


бродяга написал(а):

дальше затык - как приделать рамочку картинкой на расстоянии в 1 пиксель от тела форума (в макете вижу, там прозрачность) и надо ли.

а зачем картиночкой? это же линия, а линии можно делать через border

нам надо опоясать всё "тело" форума линиями и отступами от этих линий. что у нас для этого есть?
у нас есть #pun_wrap, #pun и .punbb - эти селекторы оборачивают ВЕСЬ форум.
#pun_wrap есть проблемы, т.к. его нет в админке... но это не проблема, для админки можно отдельно наколдовать стили и там не нужна особая красота.

кароче, линия номер раз + прозрачность:

#pun_wrap {
max-width: 1200px; /* поправь ширину под себя */
margin: 240px auto 40px;  /* первая цифра = высота шапки, вторая = высота отступа внизу */
border-color: #93e9be; /* поправь цвет бордюра, если криво взяла */
border-style: solid;
border-width: 0 1px 1px 1px; /* это ширина бордюра (линия сверху не нужна, а в остальных местах мы ее прописали шоб был) */
padding: 0 5px 5px; /* это секрет прозрачного отступа, поправь под себя его ширину */
}

у нас получается "туловище", с бирюзовой линией и прозрачным фоном

берем по аналогии #pun - ширину в него вставлять уже не надо, он уже подстроился под ширину #pun_wrap и отступает от него через padding: 0 5px 5px;.
в него надо вставить оранжевую линию. но оранжевая у нас текстурная, поэтому вставлять надо фоном.
сделай картинку на верх, право и лево. вставляй через background
и добавь padding, чтоб содержимое не наезжало на ширину оранжевой линии + сбоку еще прозрачное пространство есть.

ну а в .punbb можно тупо ставить белый фон #fff и padding для внутренних отступов самого контента от краев.

ларчик просто открывается. :)
секрет прозрачности в том, чтоб просто не "заливать" контейнер цветом и делать от него отступ внутри. :)

ЗЫ. естественно, надо будет убрать фоны для #pun-ulinks ;)

ЗЗЫ. добавила в первопост словарик, чтоб перестать брать нестандартные термины в кавычки, буду пополнять

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

7

Герда написал(а):

#pun_wrap {

кстати, если не нравится юзать этот селектор (он реально стрёмный), можно всё сделать через #pun
прописываем в него всё то, что касается ширины и бирюзовой линии.
добавляем оранжевый фон и через циферки двигаем его от бирюзовой линии, типа: url(картинка) repeat-x top 5px
паддинг делаем так, шоб включал в себя и отступ от бирюзовой линии, и отступ от оранжевой.

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

8

Герда написал(а):

https://forumstatic.ru/files/0002/c4/43/95418.png
https://forumstatic.ru/files/0002/c4/43/44727.png
если в картинке нет прозрачности, не над сохранять в пнг, делай в джпеге. вот тут про форматы картинок можно почитать
ну или пойди на подвиг (до которого я еще не дошла) и используй вебп.

Я всё читал, но по привычке сделал в пнг, потом когда пришёл к шапке подумал, что надо б в жпг. Ну и шапку уже сделал по феншую.
Вебп в душе ниипу как делать. Он у меня в фш даже с плагином нормально не открывается. Если есть проги, которые вканонно умеют работать с вебп, можн попробовать, конечно.

Герда написал(а):

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

С фоном - в смысле, с фоном шапки? Шапку так оставить как есть, без зелёного резать?

Герда написал(а):

во, вторых, пихай шапку тоже на фон, куда впихнул остальные фоновые элементы:

Примерно понял, главное разобраться с порядком.

Герда написал(а):

вообще старайся не сувать внутрь "тела" что-либо, что выходит за пределы его ширины.

Тела - это в смысле body или pun?

Герда написал(а):

4. ширина
во-первых, начни для блоков (не табличек) вместо width использовать max-width - пригодится для адаптивных стилей.
если что-то по умолчанию растянуто на всю ширину, то устанавливай максимальную ширину, а не фиксированную.
тогда на больших экранах этот элемент займёт НЕ всё пространство, ты добиваешься того же эффекта, что и при использовании width
зато на маленьких элемент, не будет "выезжать" за пределы экрана. если экран будет меньше max-width, то на нем элемент просто займет весь экран.

Оке, понял.

Герда написал(а):

что важно (на всякий случай про это говорю, т.к. часто наблюдаю) - не надо прописывать ширину для КАЖДОГО внутреннего элемента.
если ты поставил ширину 1030 на "туловище", то внутренние блоки будут такой же ширины.
конкретно в этом дизайне ты прописываешь #pun-navlinks {width: 900px;..., чтобы меню под ноги персонажей не убежало, но в других дизах этого делать не надо, а то некоторые адаптивки когда делаешь, можно задолбаться убирать фиксированную ширину ото всюду ))

Я сделал так, потому что иначе не центрируется по-моему. Но я посмотрю, как можно обыграть, если получится.

Далее про линии не всё понял, буду уже на практике смотреть, что получится. Только очухаюсь нимношк, переварю всё и ближе к ночи займусь.

Спасибо за разбор :З

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

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

0

9

бродяга написал(а):

С фоном - в смысле, с фоном шапки? Шапку так оставить как есть, без зелёного резать?

да, с фоном шапки. а там, где лапы "выходят" на фон зеленой текстуры - подставляй зеленую текстуру как на фоне форума.

бродяга написал(а):

Тела - это в смысле body или pun?

добавила в первопост словарик:

Герда написал(а):

Словарик используемых терминов Герды
Туловище, тело - основная часть форума/сайта, которая содержит весь контент. для майбб это селекторы #pun_wrap, #pun и .punbb

бродяга написал(а):

Я сделал так, потому что иначе не центрируется по-моему. Но я посмотрю, как можно обыграть, если получится.

прекрасно центрируется.
я думала это, чтоб меню было меньше "туловища", в которое заезжают ноги персонажей...
можно, кстати, через паддинг решать вопрос, чтоб на ноги не "наезжали" меню.

а если что-то не цитрируется width 100% более логичен для растягивания элемента на ширину "туловища". когда где-то что-то в пикселях у родителя указано, то лучше на это и опираться - один раз указать, чтоб меньше для мобилок переписывать.

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

10

Герда
Я всё сделал :з
Ну, что смог, по крайней мере. Вопрос в том, наскок правильно, но главная страница приобрела адекватный вид XDD

Единственное: хз, как лучше грамотно поменять порядок навигационных и пользовательских ссылок. Поставил через абсолют, но сдвинул паддингом приветствие. Хз, как его адекватно сдвинуть.

С таблицами поморочился нимношк, хз, насколько правильно селекторы прописал и не будет ли это всё дело эпично пидорасить XD

Про .punbb и паддинги с ним не оч понял. Не получилось сделать так, чтобы отступы внутренних селекторов прописались одним махом без ущерба для конструкции тела(

Внутри тем буду на следующем заходе колдовать.

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

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

0