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

Объявление

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

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

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

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

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

Предложения

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

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



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

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

1

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

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

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

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

+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 тоже заскочит.
раздели работу на этапы, начни с общих стилей: с фона, с "туловища" форума, с шапки. покажи, что получается, как вставлял, можно ли это было сделать через другое место, не поставил ли ты себе палок в колеса, которые будут впереди. :)

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

+3

3

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

+1

4

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

+1

5

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

+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 ;)

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

+1

7

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

#pun_wrap {

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

+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;..., чтобы меню под ноги персонажей не убежало, но в других дизах этого делать не надо, а то некоторые адаптивки когда делаешь, можно задолбаться убирать фиксированную ширину ото всюду ))

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

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

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

0

9

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

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

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

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

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

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

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

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

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

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

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

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

+1

10

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

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

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

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

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

0

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

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


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."