Тело форума

admin

Администратор
Сообщения
607
Оценка реакций
65
CSS:
//Тело форума
.p-body-inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 10px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
    border-style: solid;
    border-top-color: #dfdfdf;
    border-right-color: #d8d8d8;
    border-bottom-color: #cbcbcb;
    border-left-color: #d8d8d8;
    background: #fefefe;
    border-width: 1px;
}
 

Вложения

Последнее редактирование:

demonado

Пользователь
Сообщения
3
Оценка реакций
2
Возраст
41
Не плохо было бы добавить отступы от шапки:
Код:
.p-body {
    padding-top: 15px;
    padding-bottom: 15px;
}
Ну и для примера скруглить углы и сменить цвет:
Код:
.p-body {
    padding-top: 15px;
    padding-bottom: 15px;
}

.p-body-inner {
    background: #ececec;
    box-shadow: inset 0 0 1em #ececec, 0 0 2em #bcc1bb;
    padding-left: 15px;
    padding-right: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
 
Последнее редактирование модератором:

demonado

Пользователь
Сообщения
3
Оценка реакций
2
Возраст
41
Код:
//Создаем бордюр и фон страницы на главной
.p-body {
    padding-top: 15px;
    padding-bottom: 15px;
}

.p-body-inner {
    background: #ececec;
    box-shadow: inset 0 0 1em #ececec, 0 0 2em #bcc1bb;
    width: 100%;
    max-width: 1280px;
    padding: 0 10px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
    border-style: solid;
    border-top-color: #dfdfdf;
    border-right-color: #d8d8d8;
    border-bottom-color: #cbcbcb;
    border-left-color: #d8d8d8;
    border-width: 1px;
}
Так будет правильнее.
 
Последнее редактирование модератором:

WolfGeeN

Администратор
Сообщения
28
Оценка реакций
4
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
Маленький совет - эту строчку можно оптимизировать и выводить вместо четырех всего одну:

border-radius: 8px 8px 8px 8px;
border-radius: 8px /*left-top*/ 8px /*right-top*/ 8px /*right-bottom*/ 8px /*left-bottom*/;
А вообще, т.к. все значения по углам одинаковые, можно еще проще:
border-radius: 8px;

Таким же образом можно поступать, например, с padding или margin. Вводя в них 4 значения для 4 сторон сразу, а не расписывая margin-top/margin-bottom и т.д.
 

demonado

Пользователь
Сообщения
3
Оценка реакций
2
Возраст
41
Маленький совет - эту строчку можно оптимизировать и выводить вместо четырех всего одну:

border-radius: 8px 8px 8px 8px;
border-radius: 8px /*left-top*/ 8px /*right-top*/ 8px /*right-bottom*/ 8px /*left-bottom*/;
А вообще, т.к. все значения по углам одинаковые, можно еще проще:
border-radius: 8px;

Таким же образом можно поступать, например, с padding или margin. Вводя в них 4 значения для 4 сторон сразу, а не расписывая margin-top/margin-bottom и т.д.
Все верно!
 

WolfGeeN

Администратор
Сообщения
28
Оценка реакций
4
Еще б шапку и футер поместить в тело, было б классно.
Я не помню как выглядит шаблон на ксюшу, но думаю перенести код, отвечающий за вывод футера и хедера внутрь основного контейнера форума, вполне реально.
 

admin

Администратор
Сообщения
607
Оценка реакций
65
Я не помню как выглядит шаблон на ксюшу, но думаю перенести код, отвечающий за вывод футера и хедера внутрь основного контейнера форума, вполне реально.
Сделать, по типу стиля phpbbex.
 

WolfGeeN

Администратор
Сообщения
28
Оценка реакций
4
Я так понимаю, ты хочешь чтобы шаблон выглядел как-то так?
2019-09-14_164308.jpg

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

DimmmCom

Пользователь
Сообщения
1
Оценка реакций
1
Возраст
36
Ничего так выглядит! Поставил себе.
Еще б шапку и футер поместить в тело, было б классно.
Саня, привет.
Вот тебе пример кода
Less:
.p-pageWrapper {
    padding: 15px ~"calc((100% - @xf-pageWidthMax)/2)";
}
15px - это отступы сверху и снизу страницы;
calc((100% - @xf-pageWidthMax)/2) - вычисляемые отступы слева и справа, то-есть какую ширину страницы ты не укажешь, отступы автоматически будут изменяться так, чтобы шапка и футер были одинаковой ширины с телом.
Ну и соответственно отступы сверху и снизу у класса .p-body-inner надо убрать.
 
Верх