Техническая поддержка «WoT.pw» Среднее время ответа службы поддержки 5 дней, кроме выходных

Форум

ФорумПомогите настроить сайтДве боковые колонки

Разработчики
Zhenja_Tag
Отправлено 25.07.2015 - 23:44

Всем привет.
Подскажите, как сделать в «Goliath» theme вторую боковую колонку (справа), а то в одно всё не влезает :)
Спасибо

 

Вариант решения задачи

Код CSS

.content-wrapper {

     max-width:1380px;
     margin:0 auto; padding:0 30px;
}

.content-inner {
     position:relative;
}

main.column {
     position:absolute;
     top:0;
     padding:0 270px;
     width:100%;
}

aside.column {
     overflow:hidden;
     width:100%;
}

.first-sidebar,
.second-sidebar {
     overflow:hidden;
     width:240px;
     background:#ccc;
}

.first-sidebar {
     float:left;
}

.second-sidebar {
     float:right;
} 

Код для HTML боковой колонки 

<div class="first-sidebar">
     {MENU_BLOCK}
     {VK color1=212121 color2=eeeeee color3=212121 width=auto title="Мы в VK"}
     {THEMES}
     {NEWS ids=2 type=mini cnt=4 title="Новости WG"}
</div>

<div class="second-sidebar">
     {NEWS ids=2 type=mini cnt=4 title="Новости WG"}
     {THEMES}
     {VK color1=212121 color2=eeeeee color3=212121 width=auto title="Мы в VK"}
     {MENU_BLOCK}
</div>

Лайв превью demo.wot.pw, пример для «Goliath» http://goliath-tpl.wot.pw/.

Сообщение отредактировал Ganta: 30.07.2015 12:56
Командующий
Sustenance
Отправлено 25.07.2015 - 23:57

Хм)... Надо подумать)...

Первым в голову приходит - уменьшить центральную колонку, в "HTML боковой колонки" вставить блок который будет играть роль второго сайдбара и отпозиционировать его position:absolute. Как то так.

Надо поэксперементировать.

Разработчики
Zhenja_Tag
Отправлено 26.07.2015 - 00:18

играть то можно с широной центра и левой боковой, но доигрались, что у людей на ноуте с разрешением 1366 страница не влазила на экран :) , вот и думаем общую ширину подогнать под 1360, от неё и распределять боковые. 
Будем пробывать :)
P.S тему пока не закрывайте, интересно, что получится у Iooney это же ведь его детяще (шаблон) ;)

Dr_Vulkan
Отправлено 26.07.2015 - 09:38
25.07.2015 - 23:57, Iooney написал:

Хм)... Надо подумать)...

Первым в голову приходит - уменьшить центральную колонку, в "HTML боковой колонки" вставить блок который будет играть роль второго сайдбара и отпозиционировать его position:absolute. Как то так.

Надо поэксперементировать.

Самому интересно стало, ждемс :)

Игровой портал: evogame.pw. Заходите, общайтесь :)

Командующий
Sustenance
Отправлено 26.07.2015 - 14:14

Вариантов получилось много, опишу самый простой:

Код CSS

.content-wrapper {

     max-width:1380px;
     margin:0 auto; padding:0 30px;
}

.content-inner {
     position:relative;
}

main.column {
     position:absolute;
     top:0;
     padding:0 270px;
     width:100%;
}

aside.column {
     overflow:hidden;
     width:100%;
}

.first-sidebar,
.second-sidebar {
     overflow:hidden;
     width:240px;
     background:#ccc;
}

.first-sidebar {
     float:left;
}

.second-sidebar {
     float:right;
} 

Код для HTML боковой колонки 

<div class="first-sidebar">
     {MENU_BLOCK}
     {VK color1=212121 color2=eeeeee color3=212121 width=auto title="Мы в VK"}
     {THEMES}
     {NEWS ids=2 type=mini cnt=4 title="Новости WG"}
</div>

<div class="second-sidebar">
     {NEWS ids=2 type=mini cnt=4 title="Новости WG"}
     {THEMES}
     {VK color1=212121 color2=eeeeee color3=212121 width=auto title="Мы в VK"}
     {MENU_BLOCK}
</div>

Лайв превью demo.wot.pw.

Итак, в HTML боковой колонки создал два блока для сайдбаров .first-sidebar и .second-sidebar, раздвинул их вправо и влево, центральному блоку добавил отступы справа и слева по ширине сайдбаров.

Результат - два сайдбара с фиксированной шириной и резиновый центральный блок (максимальную ширину макета можно указывать любую, хоть 100%).

Если есть вопросы, пишите. Ну и не забывайте эксперементировать самостоятельно 

Разработчики
Zhenja_Tag
Отправлено 26.07.2015 - 23:45
26.07.2015 - 14:14, Iooney написал:

Вариантов получилось много, опишу самый простой:

Код CSS

.content-wrapper {

     max-width:1380px;
     margin:0 auto; padding:0 30px;
}

.content-inner {
     position:relative;
}

main.column {
     position:absolute;
     top:0;
     padding:0 270px;
     width:100%;
}

aside.column {
     overflow:hidden;
     width:100%;
}

.first-sidebar,
.second-sidebar {
     overflow:hidden;
     width:240px;
     background:#ccc;
}

.first-sidebar {
     float:left;
}

.second-sidebar {
     float:right;
} 

Код для HTML боковой колонки 

<div class="first-sidebar">
     {MENU_BLOCK}
     {VK color1=212121 color2=eeeeee color3=212121 width=auto title="Мы в VK"}
     {THEMES}
     {NEWS ids=2 type=mini cnt=4 title="Новости WG"}
</div>

<div class="second-sidebar">
     {NEWS ids=2 type=mini cnt=4 title="Новости WG"}
     {THEMES}
     {VK color1=212121 color2=eeeeee color3=212121 width=auto title="Мы в VK"}
     {MENU_BLOCK}
</div>

Лайв превью demo.wot.pw.

Итак, в HTML боковой колонки создал два блока для сайдбаров .first-sidebar и .second-sidebar, раздвинул их вправо и влево, центральному блоку добавил отступы справа и слева по ширине сайдбаров.

Результат - два сайдбара с фиксированной шириной и резиновый центральный блок (максимальную ширину макета можно указывать любую, хоть 100%).

Если есть вопросы, пишите. Ну и не забывайте эксперементировать самостоятельно 

Уважаемый looney? для какой темы Вы это сделали? для темы «Goliath» это подойдёт?
max-width:1380px; это многовато, для разрешения экрана 1366, но будем пробывать уменьшить.
Буду пробывать, о "испытаниях" буду сообщать в данной теме, думаю, что тема будет актуальна ( я так, забежал на перёд  )
а вообщем, Спасибо......

Командующий
Sustenance
Отправлено 27.07.2015 - 02:28
26.07.2015 - 23:45, Zhenja_Tag написал:

Уважаемый looney? для какой темы Вы это сделали? для темы «Goliath» это подойдёт?
max-width:1380px; это многовато, для разрешения экрана 1366, но будем пробывать уменьшить.
Буду пробывать, о "испытаниях" буду сообщать в данной теме, думаю, что тема будет актуальна ( я так, забежал на перёд  )
а вообщем, Спасибо......

1). HTML каркас одинаковый у следующих шаблонов: «Goliath», «Marron», «Phoenix», «Dimension», «Cooper», «Resistance», «Empire», соответственно пример подойдет для любого из этих шаблонов.

2). max-width, min-width для данного примера вы можете указать любые, т. к. центральная колонка резиновая, шаблон подстроится под любое разрешение (в пределах разумного : )).

3). Ок, тогда вынесу пример в первый пост и закреплю тему.

Разработчики
Zhenja_Tag
Отправлено 27.07.2015 - 21:46

Что-то не могу всё свести до кучи, то вправой колонке два сайтбара, то в левой... не хотят разъединяться 

Офицер штаба
PyMaKc
Отправлено 28.07.2015 - 04:38

Такая же фигня, не разлетаются по краям

Боец
Desantstav
Отправлено 28.07.2015 - 19:53

 не могу по краям разбить

 что нужно конкретно изменять

 

Не стесняйтесь пользоваться кнопкой "Изменить" в сообщении, оверпостить не нужно.

Сообщение отредактировал AngrySpike: 28.07.2015 20:01
Командующий
Sustenance
Отправлено 28.07.2015 - 20:45
28.07.2015 - 04:38, PyMaKc написал:

Такая же фигня, не разлетаются по краям

28.07.2015 - 19:53, Desantstav написал:

  что нужно конкретно изменять

Есть пример: demo.wot.pw, есть даже отдельно код этого примера здесь и здесь. Смо́трите пример и делаете так же.

 

 

Офицер штаба
PyMaKc
Отправлено 29.07.2015 - 08:48

Ок! А как тогда сделать, чтобы блоки внутри этих колонок функционировали (сохранив при этом описанные свойства блоков "заголовки" и т.д.)? Указав main.column {
     position:absolute; что делать тогда с подвалом? вручную подгонять padding?? Вопрос же был про конкретный шаблон "Goliath". Поправьте, если не прав.

Сообщение отредактировал PyMaKc: 29.07.2015 08:57
Боец
Desantstav
Отправлено 29.07.2015 - 10:48

 при копировании вашего примера появляется либо правая либо левая колонка но на две они ни как не делятся

Офицер штаба
PyMaKc
Отправлено 29.07.2015 - 10:59

Раздвинуть можно, но смысл в этом теряется, я так понимаю "HTML боковой колонки" не расчитан на правую и левую. Надо чтобы был "HTML левой колонки" и "HTML правой колонки" в окне "Дизайн сайта", чтобы можно было добавлять виджеты в свою колонку и тогда они бы работали. Мне так кажется.

Командующий
Sustenance
Отправлено 29.07.2015 - 19:39

Ок)) Сделаю пример прямо в шаблоне, но мне кажется разобраться будет намного сложнее, чем в чистом коде. Посмотрим : )

Разработчики
Zhenja_Tag
Отправлено 29.07.2015 - 21:17
29.07.2015 - 19:39, Iooney написал:

Ок)) Сделаю пример прямо в шаблоне, но мне кажется разобраться будет намного сложнее, чем в чистом коде. Посмотрим : )

Если можно, то шаблон «Goliath», наоборот, мне легче в шаблоне, там и поправить и посмотреть, что и как.
Спасибо.

Командующий
Sustenance
Отправлено 30.07.2015 - 12:48
29.07.2015 - 21:17, Zhenja_Tag написал:
29.07.2015 - 19:39, Iooney написал:

Ок)) Сделаю пример прямо в шаблоне, но мне кажется разобраться будет намного сложнее, чем в чистом коде. Посмотрим : )

Если можно, то шаблон «Goliath», наоборот, мне легче в шаблоне, там и поправить и посмотреть, что и как.
Спасибо.

Повторюсь еще раз - это не обязательно должен быть «Goliath», т. к. у перечисленных выше шаблонов HTML каркас абсолютно одинаковый. Пример можно использовать для любого.

Сделал пример для «Goliath»: http://goliath-tpl.wot.pw/.

Офицер штаба
PyMaKc
Отправлено 30.07.2015 - 15:12

Помоему игра не стояла свеч, я примерно так и думал, что в коде HTML каждую строчку и каждый элемент придется прописывать отдельно. Но за старания все равно ЖИРНЫЙ плюс.))

Сообщение отредактировал PyMaKc: 30.07.2015 15:12
Командующий
Sustenance
Отправлено 30.07.2015 - 15:21
30.07.2015 - 15:12, PyMaKc написал:

Помоему игра не стояла свеч, я примерно так и думал, что в коде HTML каждую строчку и каждый элемент придется прописывать отдельно. Но за старания все равно ЖИРНЫЙ плюс.))

Что за "каждый элемент"? 

Два блока:

<div class="first-sidebar">
     Виджеты левой колонки
</div>

<div class="second-sidebar">
     Виджеты правой колонки
</div>

В HTML всего 4 строчки добавить нужно. Видимо вы как то не внимательно читали.

Разработчики
Zhenja_Tag
Отправлено 30.07.2015 - 15:41
30.07.2015 - 15:12, PyMaKc написал:

Помоему игра не стояла свеч, я примерно так и думал, что в коде HTML каждую строчку и каждый элемент придется прописывать отдельно. Но за старания все равно ЖИРНЫЙ плюс.))

 Всё понятно и доходчиво, была одна колонка боковая ( раздели её на две ) 
отсортировал что в одной будет, что в другой, что не понятно?

Пожалуйста, авторизируйтесь to post a message,