Форум временно переведен в режим "Только для чтения". По вопросам технической поддержки, обращайтесь, пожалуйста на admin@getbb.ru

Боковая колонка

Вопросы оформления, приемы HTML и JavaScript, обсуждение прочих стилей, не представленных в предыдущем разделе.
Правила форума
Если ваш вопрос касается стиля, загруженного в разделе "Стили для вашего форума", задайте пожалуйста вопрос в том разделе в теме конкретного стиля. Если ваш вопрос касается предустановленного стиля, задайте вопрос в соответствующей теме.
Создавайте НОВУЮ ТЕМУ только в том случае, если еще нет темы посвященной вашему стилю или вопрос не касается какого-то конкретного стиля.
Задавая вопрос, не забывайте написать название вашего стиля.
Спасибо! :)
Аватара пользователя

Автор темы
Dzhina
Сообщения: 56
Зарегистрирован: 19 июл 2015, 12:50
Откуда: mybaby.zp.ua
Благодарил (а): 29 раз
Поблагодарили: 6 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Dzhina » 28 ноя 2015, 20:05

На версии 3,0 у меня стояла справа боковая колонка, хочется и в этой версии ее вернуть. Путем методом проб и ошибок нашла код колонки. Вставляла по инструкции, но она у меня получалась справа. Что куда мне вставить и как вообще составлена таблица? с ошибками или нет?
Вот что куда вставляла
через вставки кода в overall_header_page_body_before.html вставляла эту часть таблицы

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

<table cellpadding="0" cellspacing="0" border="0" width="100%" >
   <tr>
      <td valign="top" style="width: 200px; padding:0 10px 10px 0;" >
      
<!-- Первый блок -->

<div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>

      <table class="table1" cellspacing="1">
      <thead>
      <tr>
         <th align="center">Важное на форуме</th>
      </tr>
      </thead>
      <tbody>
      <tr class="bg1">
         <td>
<a href="{U_CONTACT}"><b>Связаться с администратором</b></a>
<br /><br />
<a href="http://mybaby.zp.ua/viewtopic.php?f=2&t=3"><b>ПРАВИЛА ФОРУМА</b></a><br /><br />
<a href="http://mybaby.zp.ua/viewtopic.php?p=236236&f=2#p236236">ПРАВИЛА ПОВЫШЕНИЯ РЕПУТАЦИИ</a><br /><br />
<a href="http://mybaby.zp.ua/viewtopic.php?f=2&t=4570">Помогите найти тему на форуме</a><br /><br />
<a href="http://mybaby.zp.ua/viewtopic.php?f=2&t=107">Основные подсказки по работе с форумом</a><br /><br />
                        </td>
      </tr>
      </tbody>
      </table>
      <span class="corners-bottom"><span></span></span>
    </div>
</div>

<!-- конец первого блока -->


</td>
      <td valign="top">
в overall_footer_page_body_after.html вставляла это

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

</td>
   </tr>
</table>

Вот форум на котором стоит сейчас колонка http://zpbaby.ukrbb.net/index.php на форуме сейчас 7 блоков, я выложила в пример один
Последний раз редактировалось Dzhina 28 ноя 2015, 21:36, всего редактировалось 1 раз.

Аватара пользователя

Merlin
Сообщения: 789
Зарегистрирован: 03 янв 2015, 10:04
Благодарил (а): 34 раза
Поблагодарили: 290 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Merlin » 28 ноя 2015, 20:51

Код лучше не использовать или доработать его, т.к. на мобильных устройствах все очень криво.
Снимок.JPG
Отправлено спустя 3 минуты 37 секунд:
Устаревшее с прошлой версии форумов.

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

<span class="corners-top"><span></span></span>
<span class="corners-bottom"><span></span></span>
Вместо таблиц лучше использовать дивы, например - <div class="kolonka1"></div><div class="kolonka2"></div>
Колонку лучше делать справа, т.к. вставляемые скрипты иногда сильно тормазят, из-за этого будет тормозить загрузка основного содержимого страницы.

Аватара пользователя

Автор темы
Dzhina
Сообщения: 56
Зарегистрирован: 19 июл 2015, 12:50
Откуда: mybaby.zp.ua
Благодарил (а): 29 раз
Поблагодарили: 6 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Dzhina » 28 ноя 2015, 21:18

Merlin писал(а): Колонку лучше делать справа
мне и надо справа, я незнаю как :unknown:
Merlin писал(а): Вместо таблиц лучше использовать дивы, например - <div class="kolonka1"></div><div class="kolonka2"></div>
и тут я поняла, что осталась вообще без колонки, так как для меня это темный лес :cry:

Аватара пользователя

Автор темы
Dzhina
Сообщения: 56
Зарегистрирован: 19 июл 2015, 12:50
Откуда: mybaby.zp.ua
Благодарил (а): 29 раз
Поблагодарили: 6 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Dzhina » 05 дек 2015, 02:20

Вернулась к своим баранам.
Кое как перенесла колонку вправо, код оставила старый, другой так и не придумала как сделать. Осталась проблема с выравниванием по высоте, хочется что бы колонка была на уровне с блоками форума, на картинке нарисовала красную линию
[+] картинки
ИзображениеИзображение
Колонку все таки хочется и посетила идея.
Возможно ли привинтить такую функцию в мобильную версию, что бы вся боковая колонка пряталась в меню(как тут меню Ссылки, с активными темами, топ лист благодарности и тд)

Аватара пользователя

beholder
Администратор
Сообщения: 1462
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 51 раз
Поблагодарили: 542 раза
Пол:
Контактная информация:

Боковая колонка

Сообщение beholder » 05 дек 2015, 17:36

Dzhina писал(а): Вернулась к своим баранам.
Кое как перенесла колонку вправо, код оставила старый, другой так и не придумала как сделать. Осталась проблема с выравниванием по высоте, хочется что бы колонка была на уровне с блоками форума, на картинке нарисовала красную линию
Читая "рецепты" на PHPBB.COM экспериментировал с правой боковой колонкой, получилось как-то так: (может вам больше подойдет)
на экране монитора:
sidebar-full.PNG
на экране планшетника:
sidebar-mobile.PNG
т.е. на экране мобильного устройства колонка автоматически скрывается. К кнопкой конечно было-бы интересней, так сделать можно и я такое встречал, но на это знаний не хватает.

как делал:

в таблицу стилей (через "настройки стилей") добавил:

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

#page-body { float: left; width: 100%; margin-right: -200px; }
.page-body-inner { margin-right: 200px; }
.sidebar-left + #page-body { clear: none; }
.sidebar-left { float: left; width: 180px; margin-right: 10px; }
.sidebar-right { float: right; width: 180px; }
.sidebar-right { margin: 40px 0 0 0;}
#page-footer { clear: both; }

@media (max-width: 1000px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar-left { display: none; }
  .sidebar-right { margin: 0 auto; }
  .sidebar-left, .sidebar-right, .sidebar-left + #page-body { clear: both; }
}
в событие overall_header_content_before.html добавить в конец:

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

<div class="page-body-inner">
в событие overall_footer_page_body_after.html добавить в начало:

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

</div>
<div class="panel sidebar-right responsive-hide"> 
														<p>Боковая колонка без заголовка и без рамки</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><img src="http://qvectors.net/downloads/images/preview/yellow-vector-car.png" alt="" width="200" height="74" data-mce-src="http://qvectors.net/downloads/images/preview/yellow-vector-car.png"></p><p><br></p><p>низ</p>

</div>
Если шаблоны не испорчены лишними тегами, то должно получиться как на скриншотах.
отступ от верхнего края регулировать здесь:
.sidebar-right { margin: 40px 0 0 0;}

ширину колонки числами вместо 180 и 200

Делал не в шаблонах, а на "событиях" т.к. экспериментировал с предустановленными стилями. Можно переделать на шаблоны, можно оставить как есть - будет работать сразу во всех любых стилях.
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Аватара пользователя

Автор темы
Dzhina
Сообщения: 56
Зарегистрирован: 19 июл 2015, 12:50
Откуда: mybaby.zp.ua
Благодарил (а): 29 раз
Поблагодарили: 6 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Dzhina » 05 дек 2015, 20:06

beholder, спасибо,приеду домой,попробую. Попутно возник вопрос,если мне надо несколько блоков друг под другом, тут код представлен для одной сплошной таблицы,что мне размножать?))) и еще, куда прописать классы с которых взять оформление, или можно прописать как то через тему чисто для этой колонки? Меня устроило бы оформление,как в меню в расширения сайт мейкер.

Отправлено спустя 45 минут 49 секунд:
Dzhina писал(а): если мне надо несколько блоков друг под другом, тут код представлен для одной сплошной таблицы,что мне размножать?))
это решила так.скопировала это

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

<div class="panel sidebar-right responsive-hide"> 
                                          <p>Боковая колонка без заголовка и без рамки</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><img src="http://qvectors.net/downloads/images/preview/yellow-vector-car.png" alt="" width="200" height="74" data-mce-src="http://qvectors.net/downloads/images/preview/yellow-vector-car.png"></p><p><br></p><p>низ</p>

</div>
и просто добавила ниже

Единственно, когда добавляла код

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

<div class="page-body-inner">
в событие overall_header_content_before.html , то таблица была в самом низу, в футере, затем перенесла в событие overall_header_page_body_before.html и стало как надо.
С выравниванием я поняла что не получится, в активных темах и в самой теме высота отличается чем на главной странице(на главной меньше отступ от хедера чем в активных темах), и если выставлять значение, то оно влияет и на расстояние между блоками таблицы.
beholder писал(а): Если шаблоны не испорчены лишними тегами,
а как это проверить? я там столько делала, что уже незнаю, испортила что то или нет :oops:
beholder писал(а): К кнопкой конечно было-бы интересней, так сделать можно и я такое встречал, но на это знаний не хватает.
меня и без кнопки устраивает, главное что бы в мобильном режиме было все ровненько и форум не ломался :) .

Еще вопросик, где прописать отступ между таблицами форума и колонкой
Изображение

Аватара пользователя

beholder
Администратор
Сообщения: 1462
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 51 раз
Поблагодарили: 542 раза
Пол:
Контактная информация:

Боковая колонка

Сообщение beholder » 06 дек 2015, 06:23

Dzhina писал(а): С выравниванием я поняла что не получится, в активных темах и в самой теме высота отличается чем на главной странице(на главной меньше отступ от хедера чем в активных темах), и если выставлять значение, то оно влияет и на расстояние между блоками таблицы.
Автоматически выравнивать высоту теоретически, конечно, можно. В том-же SITE MAKER боковая колонка постоянно выравнена, но мне это представляется очень трудоемким. Скорее всего придется переверстывать всю структуру в шаблонах.

Если блоков несколько и не нужно чтобы расстояние между ними увеличивалось,
то самый первый блок, сделайте такой:
вместо

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

<div class="panel sidebar-right responsive-hide"> 
сделайте

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

<div class="panel sidebar-right responsive-hide" style="margin-top: 50px"> 
тогда отступ сверху в 50px будет только именного у этого первого блока.
Dzhina писал(а): Еще вопросик, где прописать отступ между таблицами форума и колонкой
в тех стилях что я цитировал выше есть кусок:

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

#page-body { float: left; width: 100%; margin-right: -200px; }
.page-body-inner { margin-right: 200px; }
.sidebar-left + #page-body { clear: none; }
.sidebar-left { float: left; width: 180px; margin-right: 10px; }
.sidebar-right { float: right; width: 180px; }
в этом куске если число 200 заменить на 230 (в двух местах, соответственно -200 на -230 ), то появится отступ. Т.е. эти два значения должны быть на некоторое число больше, чем два параметра у sidebar-right (там где сейчас 180)
Dzhina писал(а): куда прописать классы с которых взять оформление, или можно прописать как то через тему чисто для этой колонки? Меня устроило бы оформление,как в меню в расширения сайт мейкер.
ну можно как-то, например так:

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

<div class="panel sidebar-right responsive-hide"> 
<div class="inner">
<h2> Заголовок </h2>
<div class="content">

<p>Боковая колонка без заголовка и без рамки</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><img src="http://qvectors.net/downloads/images/preview/yellow-vector-car.png" alt="" width="200" height="74" data-mce-src="http://qvectors.net/downloads/images/preview/yellow-vector-car.png"></p><p><br></p><p>низ</p>


</div>
</div>
</div>
sidebar6.PNG
без скромности - у меня знания HTML верстки околонулевые, возможно все эти вещи можно сделать элегантнее...
Жалко, что в расширении SITE MAKER заблокирована возможность использования тега SCRIPT. Если бы этого не было, можно было вообще все сделать на SITEMAKER (кроме ббкодов там можно вставлять любой HTML , но кроме javascript. Хотя если скриптов немного можно попробовать сделать из них ббкоды....)
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Аватара пользователя

beholder
Администратор
Сообщения: 1462
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 51 раз
Поблагодарили: 542 раза
Пол:
Контактная информация:

Боковая колонка

Сообщение beholder » 06 дек 2015, 11:26

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

Отправлено спустя 3 минуты 49 секунд:
Например оборачивать все блоки в еще один DIV

например
<div class="sidebar-right responsive-hide">
КОД НЕСКОЛЬКИХ БЛОКОВ
</div>

Отправлено спустя 2 минуты 52 секунды:
т.е. например:

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

<div class="sidebar-right responsive-hide">

<div class="panel sidebar-right responsive-hide" style="margin-top: 50px">
<div class="inner">
<h2> Заголовок №1</h2>
<div class="content">
ТЕКСТ БЛОКА №1
</div>
</div>
</div>


<div class="panel sidebar-right responsive-hide">
<div class="inner">
<h2> Заголовок №2</h2>
<div class="content">
ТЕКСТ БЛОКА №2
</div>
</div>
</div>

</div>

Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Аватара пользователя

Автор темы
Dzhina
Сообщения: 56
Зарегистрирован: 19 июл 2015, 12:50
Откуда: mybaby.zp.ua
Благодарил (а): 29 раз
Поблагодарили: 6 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Dzhina » 06 дек 2015, 11:35

beholder писал(а):Dzhina,
там еще другая проблема вас подстерегает с моим вариантом - сейчас пробовал если блоков несколько, а высота страницы небольшая, то нижние блоки начинают "разбредаться" по всей страницы. Что-то нужно думать...
Я как раз с этой проблемой пришла))) я тут подумала,может их в таблицу можно собрать до кучи как то, просто оформление уснуть ваше в нее? По аналогии как была 3.0?я начала делать,но руки кривые, не получилось.
И еще, пробовала на чистом просильвере вставлять первую часть кода блоков как вы писали(в предыдущем сообщении описывала проблему), все равно сбоку не получалось,снизу были блоки :unknown:

Отправлено спустя 1 минуту 12 секунд:
Пока с телефона писала,уже решение придумали :roll: Доберусь до компа проверю

Аватара пользователя

Автор темы
Dzhina
Сообщения: 56
Зарегистрирован: 19 июл 2015, 12:50
Откуда: mybaby.zp.ua
Благодарил (а): 29 раз
Поблагодарили: 6 раз
Пол:
Контактная информация:

Боковая колонка

Сообщение Dzhina » 06 дек 2015, 18:58

Dzhina писал(а): Доберусь до компа проверю
все работает, поставила на основной форум, единственно взяла другой класс
beholder писал(а): <div class="panel sidebar-right responsive-hide" style="margin-top: 50px">
<div class="inner">
<h2> Заголовок №1</h2>
<div class="content">
ТЕКСТ БЛОКА №1
</div>
</div>
вместо content поставила

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

<div class="list-inner">
в контент слишком шрифт мелкий был, а другой с буквами я на форуме не нашла)))

Ответить