Как создать второй сайдбар в шаблоне Default?

Всем привет. Сегодня я поделюсь с тобой, мой любезный друг happy, малюсеньким секретом - как создать второй сайдбар в шаблоне Default.

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

Сразу замечу, что абсолютно ничего трудного в этом нет. yes Надо просто подправить пару файлов, и добавить несколько строчек кода. В большинстве своем – просто скопировать.

Тренинг по вёрстке сайта на HTML5 и CSS3

Все это у меня уместилось в 10 минут видео. Просмотрев которое ты легко сможешь сделать на своем сайте два полноценных сайдбара.

Если затем, надо будет немного оформить свой сайдбар, советую глянуть сюда: Дизайн сайдбара default шаблона.


Теперь немного нюансов:

  • Сайдбар добавляли на CMS MaxSite, версии 0.631
  • Разбирали на примере шаблона Default, версии 3.1

Это я к тому, что если у тебя будет другой шаблон или другая версия системы, схема создания второго сайдбара может быть немного другой. wink


Меня уже давно просили сделать этот урок, да все времени не находил. confused

И теперь он к твоим услугам!



PS: если найдешь ошибки или будут вопросы – задавай в комментах!

Комментариев: 38 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 38
  •  TipTop | 30 марта 2012 в 20:26:45

    Спасибо за урок okcool smilebeer

    А как вы сами относитесь к какой форме сайта ?

    Раньше все делали так, левый правый сайдбар, хедер и футер, а щя на всех новых сайтах один сайдбарoh oh

  •  Серёга | 30 марта 2012 в 20:41:06

    Смотря для чего сайт и что надо размещать в подвалах.

    Если нужна реклама, то тогда в одном сайдбаре контекстная реклама, а во втором элементы навигации и прочее.

    Мне, например, всегда хватало одного.

    Главное что бы элементов на сайте много не было.

  •  Тенгиз | 30 марта 2012 в 20:50:19

    Спасибо, Серега!clap Очень вовремя выложил урок. В готовых шаблонах

    Maxsite преобладает одно колонной верстки. Думается, твой урок "оживит" и разнообразит "рынок" шаблонов.excaim

  •  Сергей | 30 марта 2012 в 22:20:49

    спасибо! твои уроки всегда очень понятны smile

    а еще вот еще вопрос такой

    можно ли добавить на сайт раздел с форумом для общения? и если можно то как? и можешь ли ты сделать урок по этому поводу?

  •  Timur | 31 марта 2012 в 11:57:24
    можно ли добавить на сайт раздел с форумом для общения?

    Можно, но только на поддомене. Например, как это сделал сам Серёга здесь

    http://forum.master-css.com/

    или Максим - разработчик MaxSite SMC здесь

    http://forum.max-3000.com/

  •  Сергей | 31 марта 2012 в 13:19:37
    Можно, но только на поддомене

    то есть это будет другой сайт на который идти по ссылке? по другому никак?

  •  Серёга | 31 марта 2012 в 14:47:43

    1. В макссайте есть плагин форума, так что можно на сайте.

    Но этот плагин еще надо дорабатывать и дорабатывать. Хотя, форум сделать можно.

    2. Не обязательно поддомен, можно сделать папку на сайте и в нем разместить форум.

  •  Руслан | 2 апреля 2012 в 12:14:43

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

    вот есть вариант который смотрится лучше - на мой взгляд

    http://www.blog-master.net.ua/page/trehkolonochnyj-shablon-dlja-maxsite-cms

  •  Серёга | 2 апреля 2012 в 19:47:43

    Руслан, ты думаешь если бы было все так просто - я бы не поставил ширину в 1200 пикселей?

    Твой вариант именно такой ширины.

    А это значит - что твой сайт теряет юзабилити...

    Что плохо сказывается не только на твоих посетителях, но и на выдаче ПС.

  •  Комментатор 214 | 3 апреля 2012 в 00:11:03

    Привет,Серёга!

    Хочу сказать тебе спасибо за твой курс CMS-мастер, он наверное уже устарел,

    но мне попался совершенно случайно, увидел диск у брата, да взял посмотреть,как

    раз после нового года время было. Так и загорелся этой идеей, в итоге всё-таки

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

    не хватает сделать лучше, зато уже пара калек в день на сайт заходят, насчёт темы

    не заморочивался, сразу воткнул рекламу, подумал чё тянуть то, ждать тысяч

    посетителей на 15 статей. Вот так. Короче ещё раз спасибо. Уважаю! Олег.

    Взгляни naypont.ru.

  •  TipTop | 4 апреля 2012 в 01:20:09
    я бы не поставил ширину в 1200 пикселей... сайт теряет юзабилити...

    А можно чуть поподробнее ? сайт теряет юзабилити если ширина сайта 1200 пикселей ? почему ?

  •  Серёга | 4 апреля 2012 в 08:16:36

    ПОтому что минмальное разрешение сейчас 1024x768.

    А это значит что людям, у которых разрешение экрана монитора меньше 1200 пикселей - придется делать горизонтальную перемотку сайта.

    Это очень неудобно, и обычно - люди уходят с такого сайта.

  •  Руслан | 4 апреля 2012 в 10:39:30

    На счет юзабилити это вопрос спорный.

    Ты сам говориш что "что минмальное разрешение сейчас 1024x768."

    так что ширина в 1200 спокойно влазит , а оглядываться на тех у кого она меньше я думаю не стоит, потому что таких людей уже очень мало - это у кого еще есть старые ЭЛТ и TFT мониторы с диагональю 17 дюймов. К слову у нас в городе уже трудно найти новы 19 дюймовый моник , только 21 и выше. Возможно у кого-то и интернет еще на модеме - так что теперь видео не выкладывать , потому как они его не смогут посмотреть.

    А вот вытягивать текст в длинную сосиску шириной в 560 пикс. - по моему более неудобно для пользователя.

  •  Руслан | 4 апреля 2012 в 10:42:32

    на счет ширины я просчитался 1200 влазит в разрешение 1280 на 1024 - а это 19 дюймовый монитор

  •  Серёга | 4 апреля 2012 в 12:44:08

    Руслан я с тобой согласен только по одному пункту:


    на счет ширины я просчитался 1200 влазит в разрешение 1280 на 1024 - а это 19 дюймовый монитор

    smile


    А перед тем, как утверждать, что то в комментариях, всегда советую прежде залезть в статистику и посмотреть прав ты со своим мнением или нет:


    Во-первых:

    а оглядываться на тех у кого она меньше я думаю не стоит, потому что таких людей уже очень мало - это у кого еще есть старые ЭЛТ и TFT мониторы с диагональю 17 дюймов.

    По статистике моего сайта goodkomp.com

    В течении месяца было:


    10 831 визитов с шириной экрана 1024

    1 387 с шириной 1152

    477 с шириной 800

    И этих людей ты предлагаешь не учитывать???


    Всего 70 000 за месяц - это - 18% аудитории! И ты хочешь сказать что это мало? Это чертовски много! wink

    А если залезть в статистику ливинтернета, то там вообще таких пользователей больше 20% - это пятая часть посетителей!

    Так что твоё мало - в данном случае не уместно.


    Во вторых:


    Сравнивать мониторы и модемы - не корректно, так как поменять модем и монитор - две разные вещи. Так что людей с диал-ап действительно мало.


    В третьих:

    А вот вытягивать текст в длинную сосиску шириной в 560 пикс. - по моему более неудобно для пользователя.

    Это с каких пор так стало? grin


    Ты не под тем углом смотришь на сосиску, мой дорогой друг smile

    Смотри горизонтально - у тебя сосиски получатся гораздо длиннее, и читать их будет неудобнее. Глаза намного лучше воспринимают текст шириной в 560 пикселей чем в 800.

    А если еще и абзац попадется большой - тогда вообще кранты.

    А если еще все в монитор не влазит - то тогда точно читать не будут.

    Так как каждую строку придется скролить по горизонтали.


    Сам представь, что бы ты сделал, если тебе что бы прочитать статью надо было раз 200 скролить влево/вправо?

    Вряд ли бы ты это выдержал wink

  •  Серёга | 4 апреля 2012 в 12:47:51

    Ну и как я уже говорил - ЮЗАБИЛИТИ!

    ПС к сайту с плохим юзабилити хорошо относиться не будут!

  •  Руслан | 4 апреля 2012 в 15:47:43

    Посмотрел на свой сайт с разрешением 1024Х768 - просто жуть !!

    Сергей таки ПРАВ!!!! Респект и УВАЖУХА!!

    Я использовал трехколоночный макет только из соображения заполненности пустого места по бокам. Но с точки зрения юзабилити и меньшего разрешения - то одноколоночный будет наверно лучшим вариантом.

  •  Руслан | 4 апреля 2012 в 16:41:07

    Одноколоночный- в смысле с одним сайдбаром

  •  Серёга | 4 апреля 2012 в 17:16:48

    Одноколоночный - это просто колонка.

    Двухколоночный - с одним сайдбаром.

    А мы с тобой делали - трехколоночный.


    По поводу твоего косяка с шириной:


    Поверь мне Руслан, когда то и мой первый сайт был шириной в 1200 пикселей.

    Точнее - первый шаблон этого сайта smile


    Вообще, я думаю, что еще год/два/три и минимальное разрешение будет увеличено.

    Вот тогда и можно будет делать сайты "потолще".


    НО ЗАМЕЧУ!

    Что я все равно буду делать контент шириной не более 600 пикселей.

    Просто у меня будут сайдбары чуточку пошире smile

  •  TipTop | 6 апреля 2012 в 20:03:50

    Сергей, можешь научить как сделать кнопки далее/обсудить как на твоем сайте smile ?

  •  Серёга | 6 апреля 2012 в 20:26:04

    А я их в нете нашел.

    Они на стилях - эти кнопки.

    http://dimox.name/beautiful-3d-buttons-using-css3/

  •  TipTop | 11 апреля 2012 в 10:20:24

    Я попробовал чё-то нифига не выходит, можно поподробнее, где что прописывать ?

  •  Юра | 27 мая 2012 в 12:41:40

    Серега,а как поставить второй сайтбар на сайт,который на движке Wordpress.Делать как показано в видео или надо по другому.

  •  Серёга | 27 мая 2012 в 16:35:43

    А фиг его знает, на вордпрессе так не проканает, он не такой гибкий.

  •  Мила | 26 октября 2012 в 13:39:20

    Здравствуйте!

    Сергей, почему не получается изменить ширину контента и переместить сайт бар?

    У меня MaxSite CMS 0.75

    Вот, что я ввела

    div.content {width: 560px; margin: 0 200px;}

    div.sidebar {width: 200px; float: right; margin: 20px 0 0 -200px}

    div.sidebar1 {float: left: margin-left:100%}

    а было вот так :

    div.content {

    width: 710px;

    margin: 0 250px 0 0;

    float: left;

    }

    div.content-wrap {

    margin: 20px 30px 10px 20px;

    }

    div.sidebar {

    width: 250px;

    float: right;

    margin: 20px 0 0 -250px;

    }

    div.sidebar1-wrap {

    margin-right: 10px;

    }

  •  Серёга | 31 октября 2012 в 18:28:23

    В каком файле меняли стили?

  •  Мила | 1 ноября 2012 в 13:19:40

    Здравствуйте, Сергей!

    Спасибо за внимание к моему сообщению.

    Все перечисленное выше я писала в файле

    /application/maxsite/templates/default/css/add_style.css

    Потом я решила воспользоваться возможностями, которые даются в Настройка шаблона «Default», Оформление, Свои CSS-стили

    Я там написала

    div.content {width: 560px; margin: 0 200px;}

    div.sidebar1 {width: 200px; float: right; margin: 20px 0 0 -200px}

    div.sidebar {float: left: margin-left:100%}

    Номера сайтбаров пришлось поменять , ничего путного иначе не получалось.

    Можите посмотреть на результат http://вязаниямагия.рф/

    Сайтбар наезжает на текст. Подскажите, как исправить .

    Заранее спасибо.

  •  Серёга | 5 ноября 2012 в 09:52:50

    Вы очень много чего напутали там.

    Вы подключили тему определенную.

    В этой теме указана ширина для сайдбара 250px

    Укажите 200.

    А так, много ошибок в одном комментарии все и не опишешь.

    Надо смотреть шаблон.

    Но у меня на это времени нет.

  •  Магомед | 19 ноября 2012 в 22:27:16

    Здравствуйте Сергей!

    Дабавил второй сайдбар, все получилось. Но есть один глюк. В общем если добавить ушку или текстовый блок, то сколько бы ушек или блоков не создавать, система в любой сайдбар вставляет только один. То есть можно выбрать вторую ушку, но при сохранее автоматом ставится имя первой и в сайдбаре появляется две первых ушки со всем содержимым. Это относится к обеим сайдбарам, то есть на сайте можно установить только одну ушку и один текстовый блок, в любых количествах. Отчего так и как с этим бороться?

  •  Серёга | 19 ноября 2012 в 23:52:35
    В общем если добавить ушку или текстовый блок, то сколько бы ушек или блоков не создавать, система в любой сайдбар вставляет только один.

    Что только один???

    Не понял проблемы.

    1. Если у вас повторяется содержимое сайдбаров - то надо указать номер сайдбара другой.

    2. Если же у вас повторяются ушки и текстовые блоки. Значит не правильно задаете отображение виджетов в сайдбарах. В админ панели, если используете больше одного одинакового виджета, добавляйте следующим виджетам нумерацию!!!

  •  Магомед | 20 ноября 2012 в 00:54:36

    Теперь разобрался.

    В правый сайдбар добавил "ushki_widget", "ushki_widget 1", а в левый "ushki_widget 2" и получилось вставить любую ушку из списка ушек. Просто я думал, что ушки вставляются в каждый сайдбар отдельно и независимо. И про нумерацию я не подумал запутало то, что виджет рубрик или поиска можно вставить без нумерации несколько раз.

    Большое спасибо за подсказку!

  •  Серёга | 20 ноября 2012 в 11:30:38

    Пожалуйста.

    Рад что все получилось wink

  •  Татьяна | 16 января 2013 в 19:17:34

    Здорово! Я создаю свой сайт, нужен для работы в школе. И понадобилось создать два сайдбара на сайте Jimdo. Как это сделать? Я абсолютный ноль в компьютерах, поэтому мне нужно оооочень подробно. Заранее спасибо. Буду оченбь благодарна за ответ.

    Татьяна.

  •  Серёга | 17 января 2013 в 00:15:32

    Татьяна, я не работаю с Jimdo, поэтому в данном случае помочь вам не могу.

  •  Alex Sqwer | 28 января 2013 в 15:46:39

    Что касается ширина сайдбара и дополнительных колонок: 1. Не забываем указывать можно в ПРОЦЕНТАХ,т.е. для двух колоночных можно указать примерно так - 72%+28% =100%; 2. Для 3-х колоночных - 28%+44%+28%

    Вопрос: а для чего нужен 2 сайдбар (3 колонка)? Если для красоты, то не вопрос. А если Вы посчитаете, что контент страницы станет выше основного контента в ХТМЛ коде страницы, то скажу - Не станет выше.

  •  Александр | 10 сентября 2013 в 20:14:38

    А как добавить левый сайдбар Default 0,853?

    Уже немного всё по другому. С css еще разобраться кок как можно, а вот php загвоздочка…

  •  Евгений | 31 декабря 2014 в 06:19:28

    Скажите, а как добавить второй сайдбар, если в версии которая стоит, нету таких файлов, которых вы показывали в видеоуроке?

    •  Серёга | 5 января 2015 в 10:47:20

      Стыдно признаться, но, если честно. То я и сам на новой версии системы не пробовал еще. Как то не было необходимости. Поэтому сходу вам ответ дать не смогу. Надо покопаться.