Здравствуйте. Помогите, пожалуйста, хочу, чтобы с правой стороны форума (стиль eTech) выводили красивые колоночки, типа таких: Изображение
За ранее спасибо :Rose:
Комментарии: 191

CabinetAdmin 03 апр 2014, 18:39 Сообщение

Uzanka » Сегодня, 19:44 писал(а):а сбоку по одной колонке.
В смысле с двух сторон? По типу как в портале из трёх колонок?
Uzanka » Сегодня, 19:44 писал(а):сам форум (узкий в середине), а сбоку по одной колонке. Шапка широкая на весь экран.
Это и сама html структура и стили. В принципе можно обойтись только css стилями.

А вот про ббкод я не понял, вы хотите такую картинку в теме использовать? Или надо как на том сайте?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 03 апр 2014, 18:49 Сообщение

CabinetAdmin » 5 минут назад писал(а):По типу как в портале из трёх колонок?
да, по такому типу. Т.е., я так понимаю, что это делается как таблица из трех колонок. По такому же принципу как здесь давался код, но только для колонки справа, а мне нужно будет добавить колонку слева еще. Правильно я понимаю?
CabinetAdmin » 5 минут назад писал(а):А вот про ббкод я не понял, вы хотите такую картинку в теме использовать? Или надо как на том сайте?
Не в теме, а видимо в шаблоне я должна такое вставить. Хотелось бы по типу того, как на том сайте, т.е. на главной странице моего форума и всё. Т.е. я бы хотела сделать такие "стикеры" вместо моих колонок справа. Мои колонки справа выглядят как и весь остальной форум, а хотелось бы оформить их в виде таких вот стикеров. Это возможно? Я не знаю как это правильно сказать что мне нужно. Наверное, это с помощью css стилей рисуется-делается.
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 03 апр 2014, 19:34 Сообщение

Uzanka » 10 минут назад писал(а):таблица из трех колонок
Можно пойти двумя дорогами, первая это использовать код таблицы из портала:

Код: Выделить всё

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<!-- [+] left block area -->
<td valign="top" style="width: 250px; padding-right: 6px;">
left block
</td>
<!-- [-] left block area -->
<td style="width:4px;" valign="top"></td>

<!-- [+] center block area -->
<td valign="top">
center block
</td>

<!-- [-] center block area -->
<td style="width:4px;" valign="top"> </td>

<!-- [+] right block area -->
<td valign="top" style="width: 250px; padding-left: 6px;">
right block
</td>
<!-- [-] right block area -->
</tr>
</table>
Второй сложнее, с большим количеством правок. Сегодня не могу набросать макет, завтра только наверно, если время позволит.

зы. имхо конечно, но использование таблицы в стиле на html5... Как бы ни к месту что ли, лучше всё же с помощью стилей.

А изображение вырезать не большая проблема:
Изображение

Вроде такого:

Код: Выделить всё

<div class="cont">
Info
</div>
CSS:

Код: Выделить всё

.cont {
background: url("/image.png");
width: 230px;
height: 161px;
padding: 55px 35px 15px 15px;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 03 апр 2014, 19:37 Сообщение

Спасибо огромное! :Yahoo!: я попробую сделать сегодня вечером стикер :D

апдейт: отлично получилось! :Bravo: теперь я хочу ее за пределы форума вынести :D , т.е. форум по центру, а по бокам форума стикеры :)

зы. только стикер короткий.. много не помещается.. но красивый :Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

Uzanka 03 апр 2014, 20:57 Сообщение

Я тут подумала как бы это реализовать.. а если не делать таблицей, т.е. колонки справа и слева. А вернуть форум как был узким, а поверх форума по бокам прикрепляются стикеры (в определенных местах). Такое возможно?
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 05 апр 2014, 08:46 Сообщение

Такс...
Чтобы реализовать три колонки, на главной странице форума, нам надо отредактировать шаблон index_body.html. У вас уже есть одна боковая колонка, значит в этом шаблоне должно быть:

Код: Выделить всё

<div class="left-body">
меняете его на:

Код: Выделить всё

<div class="center-body">
Далее перед ним добавляете код для левой колонки:

Код: Выделить всё

<div class="left-body">

<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl>
<dt>Заголовок</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row">
<dl>
<dd>
Информация
</dd>
</dl>
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>

<!-- Плюс дополнительные колонки -->

</div>
В теме стиля находите:

Код: Выделить всё

.left-body {
width: 80%;
float: left;
}

.right-body {
width: 18%;
padding: 5px;
float: right;
}
и меняете на:

Код: Выделить всё

.left-body {
width: 20%;
padding: 5px;
float: left;
box-sizing: border-box;
}

.center-body {
width: 60%;
padding: 3px 5px;
float: left;
box-sizing: border-box;
}

.right-body {
width: 20%;
padding: 5px;
float: right;
box-sizing: border-box;
}

По поводу этих стикеров. Есть небольшой нюанс, на небольшом разрешении изображения будут вылезать за края. Можно конечно ограничить минимальную ширину. Делается это так, находите в теме стиля body { и добавляете к нему min-width: 1150px;. Значение можно своё указать.

Второй вариант.
C учётом правок в предыдущем варианте. Весь код правой колонки, начиная с <div class="right-body"> переносите выше, сразу после левой колонки и перед центральной, должно получиться что-то вроде такого:

Код: Выделить всё

<div class="left-body">
<!-- Здесь код нашей левой колонки -->
</div>

<div class="right-body">
<!-- Здесь код нашей правой колонки -->
</div>

<div class="center-body">
<!-- INCLUDE forumlist_body.html -->
</div>
Далее правки стилей, старый код меняете на:

Код: Выделить всё

.left-body {
width: 240px;
padding: 5px;
float: left;
}

.center-body {
margin: 0 260px;
padding: 5px;
}

.right-body {
width: 240px;
padding: 5px;
float: right;
}

.section-index div.forabg, span.corners-bottom {
clear: none;
}
Этот вариант хорош тем, что колонки при любом разрешении экрана всегда остаются тех же размеров и, соответственно, изображения стикеров не будут вылезать за края форума.
Uzanka писал(а):Шапка широкая на весь экран.
По поводу шапки на весь экран. Реализовывается это всё с помощью CSS. Если интересно и есть изображение или цвет для шапки, могу рассказать как это реализовать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 05 апр 2014, 16:48 Сообщение

CabinetAdmin,
большое спасибо :Rose: я попробую реализовать второй вариант. Хотела еще спросить на счет размеров. Почему во втором варианте даны именно такие размеры? Т.е. в сумме определенное число. А елси экран будет уже этой суммы, то будет прокрутка? или при втором варианте прокрутки никогда быть не может?
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 05 апр 2014, 18:26 Сообщение

Uzanka » Сегодня, 19:48 писал(а):именно такие размеры?
Просто так указал, как оптимальное соотношение. Можно конечно колонки сделать уже или шире, за одним надо будет подбирать и отступы у центральной колонки - margin: 0 260px;. А прокрутка у вас появляется раньше, из-за широкого изображения (там где слайдер).

В первом варианте есть вариант перескакивания колонки на следующую строку, плюс так как ширина колонок указана в процентах, они сужаются вместе с размером экрана. Во втором варианте ширина фиксирована, сужается только центральная колонка.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 07 апр 2014, 14:18 Сообщение

CabinetAdmin,
спасибо за информацию :Rose:

У меня такой вопрос: а можно сделать так, чтобы в центральном блоке находился весь форум целиком? вместе с шапкой..или это невозможно? я пыталась так сделать, но видимо что-то не так, потому что не отрабатывало нормально. Я пыталась добавить блоки сразу после </head> и закрывающийся перед </body>. Но ничего толком не получилось :(
CabinetAdmin » 05 апр 2014, 18:26 писал(а):А прокрутка у вас появляется раньше, из-за широкого изображения (там где слайдер).
А как вы это узнаете? может быть есть какая-то ссылка, чтобы можно было бы посомтреть свой форум на разных разрешениях экранов?
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 07 апр 2014, 15:53 Сообщение

Uzanka » 55 минут назад писал(а):или это невозможно?
Ну почему невозможно.. возможно конечно:)
Делается это примерно так, в хедере после <body> ставите:

Код: Выделить всё

<div class="left-body">
<!-- Здесь код нашей левой колонки -->
</div>

<div class="right-body">
<!-- Здесь код нашей правой колонки -->
</div>

<div class="center-body">
Потом в футере перед </body> ставите </div>. Потом стили, и вроде всё.

Возможны правда проблемы с некоторыми стилями. Например:

Код: Выделить всё

body > header, #header {
или

Код: Выделить всё

body > header nav a, body > header nav a:visited, body > header nav span {
или

Код: Выделить всё

body.rounded > footer {
Стили написанные под ним не будут отрабатываться в вашем случае, потому что между body > header у вас появился <div>. Поэтому все подобные стили придётся переписывать:

Код: Выделить всё

body header, #header {
т.е. удалять >.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 07 апр 2014, 16:12 Сообщение

CabinetAdmin » 8 минут назад писал(а):Возможны правда проблемы с некоторыми стилями. Например:
да, теперь понятно. Из-за этого были проблемы. У меня такой стиль :crazy:
CabinetAdmin » 8 минут назад писал(а):т.е. удалять >.
это поможет? и если не трудно, то можно коротко объяснить что означает этот значек между
CabinetAdmin » 8 минут назад писал(а):body > header
Это означет лишь дополнительный <div>? открывающийся? а закрывающийся?
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 07 апр 2014, 17:51 Сообщение

Этот значок означает, что блок header вложен в body, без всяких промежуточных блоков. В шаблоне это выглядит примерно так:

Код: Выделить всё

<body>
<header>
...
</header>
Это обычно делается, чтобы отделить стили, чтобы они не применялись в других местах, а только в конкретном случае.
Например. Имеем два блока:

Код: Выделить всё

<div class="body">
<p><a href="#">Ссылка</a></p>
</div>

Код: Выделить всё

<div class="body">
<a href="#">Ссылка</a>
</div>
Css:

Код: Выделить всё

.body > a {
color: #FFF;
}
В данном случае ссылка будет белого цвета только во втором блоке, если удалить >, то будет в обоих вариантах. Всё потому, что в первом варианте ссылка вложена в тег <p>, а в стилях написано, что ссылка находится сразу в блоке с классом .body.
Чтобы, например, применить только для первого варианта, то нужно дописать тег <p>:

Код: Выделить всё

.body p a {
color: #FFF;
}
Надеюсь понятно объяснил:)

"Поехать" стиль не должен, так как блоки <header> и <footer> встречаются на странице только один раз, и смысла в таком написании стиля я не вижу.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 08 апр 2014, 13:16 Сообщение

CabinetAdmin » Вчера, 17:51 писал(а):Это обычно делается, чтобы отделить стили, чтобы они не применялись в других местах, а только в конкретном случае.
Огромное спасибо за объяснение :Rose: :Rose: :Rose: Всё понятно. Попробую сначала изменить стиль. Если всё будет нормально, то попробую блоки справа и слева :)
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

Uzanka 10 апр 2014, 13:25 Сообщение

CabinetAdmin,
а можно сделать так, чтобы левая колонка была бы резиновая, а не центральная. Т.е. форум состоит из трех колонок. Центральная (форум) и правая - фиксированной ширины, а левая будет подстраиваться под размер экрана. Как в этом случае нужно изменить кусок стиля, что вы давали выше? (у вас там центральный блок резиновый)

:Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 10 апр 2014, 15:36 Сообщение

Центральная колонка сколько то всё равно сужается, у вас ведь не фиксированный стиль, можно конечно задать точные размеры, либо минимальную ширину. Задаётся это так, для body {:

Код: Выделить всё

width: 1200px;
фиксированная ширина

Код: Выделить всё

min-width: 1200px;
минимальная.

Uzanka » Сегодня, 16:25 писал(а):чтобы левая колонка была бы резиновая
С учётом предыдущих правок, перед:

Код: Выделить всё

<div class="right-body">
<!-- Здесь код нашей правой колонки -->
</div>
ставите:

Код: Выделить всё

<div class="main-body">
В футере перед:

Код: Выделить всё

</div>
</body>
ставите </div>.

Стили меняете на:

Код: Выделить всё

.left-body {
width: 20%;
padding: 5px;
float: left;
box-sizing: border-box;
}

.main-body {
float: right;
width: 80%;
}

.center-body {
margin-right: 260px;
padding: 5px;
overflow: hidden;
}

.right-body {
width: 240px;
padding: 5px;
float: right;
}

.section-index div.forabg, span.corners-bottom {
clear: none;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!