Дизайн сайдбара default шаблона.

Дизайн сайдбара default шаблона

Привет Друзья!

И так, продолжаем пинать дефолтный шаблон Макса, эх… какие же мы маньяки smile

Сегодня я подготовил еще два видео, где мы будем обновлять внешний вид шаблона все тем же дедовским способом – через таблицы стилей!

Опять же все полностью пропитано практикой и полезностями – будет интересно!


Вот что я буду рассматривать в занятиях:

1. Как создать линию под шапкой.

2. Проведем линию между сайдбаром и контентом.

3. Оформление заголовков.

4. Добавление иконки к заголовкам.

5. Оформление ссылок.

6. Оформление списков.

7. Добавление иконок к спискам.

8. Возможно, я еще чет упустил…

В общем, думаю, эта инфа поможет вам создать и настроить свой сайт как надо! Главное – внимательно следите за кодом wait, ведь одна маленькая ошибочка может привести к очень некрасивым последствиям!

Такое уже просто было, поэтому говорю – смотрите внимательно, что бы стояли все точки с запятой и фигурные кавычки, а так же – что бы правильно были прописаны все свойства, одна лишняя буква и браузер не поймет вашего кода!

Представляю третью часть линейки уроков – Шаблон своими руками:

Дизайн сайдбара default шаблона

Уроки:



Видео-урок: Шапка, сайдбар и дизайн заголовков.




Видео-урок: Оформление ссылок и списков.


Скачать уроки в HD-качестве.

Зеркало с народа.

Картинки из уроков: иконка для заголовков, иконка для списков.

[sbox id="info"]

Предыдущие части находятся здесь:

1 часть. Настройки default шаблона в MaxSite CMS - тыц.

2 часть. Редактируем фон, шапку, меню и подвал сайта - тыц.

[/sbox]

На этом всем, спасибо за внимание.

ЗЫ: Если будут вопросы – пишите в комменты или на форум.

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

Оставьте комментарий!

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

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

Комментариев: 45
  •  Саня | 14 октября 2011 в 21:06:06

    Залил зеркало на эти два урока в Народ.ру вот ссылка -

    http://narod.ru/disk/28404635001/ShablonSvoimiRukami.Part3.rar.html

  •  Саня | 15 октября 2011 в 00:14:10

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

    2.Все изменения с заголовками виджетов ведут себя нормально,кроме виджета "Популярное".С этим разобрался ,оказывается за него отвечает класс box (что весьма странно),а не widget_header!

    •  Серёга | 15 октября 2011 в 09:20:56

      1. Точно, как то совсем позабыл про это.

      В общем, такую линию - через все! Я проводил не через контент, а через класс - .main-wrap

      Он идет от шапки до подвала.

      Только использовал в качестве линии фоновый рисунок, ширной в сайт или сайдбар (в зависимости от ситуации) и толщиной в 1px, или более...

      2. В старых шаблонах все виджеты выводились именно через него.

  •  vovans | 15 октября 2011 в 02:21:40

    У табличной вёрстки есть свои преимущества. У блочной - свои едостатки smile Зря табличную прям дедам многие приписывают )) в некоторых случаях она очень себя оправдывает. Но как где кто напишет об этом, так сразу освистают почему-то (я не про конкретный случай, а по опыту))

    И, конечвно, как "рисовать" таблицами, это нужно знать smile

    •  Серёга | 15 октября 2011 в 09:02:27

      Вов, читай внимательно, я говорил про таблицы стилей smile

      А не табличную верстку, просто увернул ради прикола.

      Какие недостатки то?

      Я раньше делал сайты сугубо на таблицах, но теперь - стараюсь вообще не использовать их!

      •  vovans | 15 октября 2011 в 22:37:03

        Про недостатки можно почитать в разных статьях по вёрстке.

        В принципе, в применении таблиц нет ничего такого плохого ))) как об этом говорят некоторые.

        И читал я внимательно, а высказывался относительно "где мы будем обновлять внешний вид шаблона все тем же **дедовским способом** – через таблицы стилей"

        ЗЫ сам таблицы тоже стараюсь не использовать в вёрстке smile

  •  V[Ne]ZakoNa | 15 октября 2011 в 03:58:10

    Серега спасибо за урок))) все супер))) вопрос как сделать разные иконки для разных рубрик? и как в меню сайта вставить иконки? то-есть что за него отвечает?

    •  Серёга | 15 октября 2011 в 09:07:51

      У каждого виджета есть свой дополнительный класс, я ж не могу тебе все виджеты указать - многовато будет работы smile

      В общем - делаешь общие стили, а бэкграунды прописываешь для каждого по отдельности следующим макаром!

      .category_widget_0 .widget_header{background: url(../images/my/book_download.png) no-repeat left center;}

      В этом коде указано что иконка будет присвоена только заголовку виджета рубрик!

      •  Серёга | 15 октября 2011 в 13:03:40

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

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

        И каждому стилю присвоить свою иконку.

      •  V[Ne]ZakoNa | 15 октября 2011 в 14:40:08

        Большое спасибо))) все супер)))

  •  V[Ne]ZakoNa | 15 октября 2011 в 04:46:52

    Серега а как можно сделать регистрацию как на всех сайтах?

    •  Серёга | 15 октября 2011 в 09:03:21

      Есть плагин - логинза.

      Через него очень удобно регистрироваться.

      У меня тоже можно!

  •  Комментатор 36 | 15 октября 2011 в 16:55:28

    Сережа, я хотела бы заменить форму комментария на упрощенную. Т.е.

    окно для комментария, а внизу Имя, Емайл, Сайт и Отправить. И еще чтобы ты рассказал как поместить виджет в подвале?

    •  Серёга | 15 октября 2011 в 19:35:03

      Боюсь здесь я пока сам не представляю что делать!

      Эта стандартная форма комментирования, котороя предусмотрена системой.

    •  vovans | 15 октября 2011 в 22:43:01

      Можете посмотреть, как сделано у меня.

      А вообще, есть же type_foreach/page-comment-form.php. Правте его как вам надо, вырезайте нужное, перемещайте что куда хотите.

      И можно же отключать комюзеров, анонимов в админке. Вроде как, должно пропасть лишнее в форме комментария, не?

      •  Серёга | 15 октября 2011 в 22:47:04

        А фиг его знает, я даж не интересовался на эту тему ни разу.

        И так все устраивало.

        •  vovans | 16 октября 2011 в 11:14:15

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

          Так что, по началу я вообще выпили вторую часть формы, которая для комюзеров (почта, пароль с приличной натацией по использованию). Только ник, текст ариа, каптча и "отправить". Потом, когда ежедневных посетителей перевалило за 500 в сутки и начали появляться постоянные читатели, я переосмыслил свой подход и решил просто прятать лишнее и разворачивать его лишь по требованию, для "продвинутых" smile Попутно, максимально постарался сделать всю форму более компактной. Не знаю, получилось ли у меня лучше, но я считаю, что должно быть как-то так smile

          В общем, как я вижу, не одному мне форма для комментов не нравится smile

          •  Серёга | 16 октября 2011 в 11:36:21

            Согласен на счет перегрузки формы.

            На мой взгляд - поля должны быть:

            имя, сайт, е-мэйл, текстареа, капча

            А регистрацию вообще не мешало бы сделать отдельным пунктом!

            А то большинство даже не понимает - как регистрироваться надо!

            •  vovans | 16 октября 2011 в 12:37:40

              Ну вот и я о том же. И каждый эту проблему решает по-своему.

              Ведь, с одной стороры, это хорошо, что есть возможность просто вбить ник и написать коммент.

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

              Но по-умолчанию это как-то так сделано... Во-первых, неинтуитовно понятно... Во-вторых, понатыкано и то и то.

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

              И про регистрацию многим не понятно, да. Формы логина на сайте нет. Точнее, есть для админов. Вот я сейчас залогинен, а там написано "вход". В общем, путает это конкретно.

  •  V[Ne]ZakoNa | 16 октября 2011 в 15:47:45

    Серега здорова, как сделать фон картинку а не бесшовный? Подскажи код плиз... Заранее спасибо, Иван

    •  vovans | 16 октября 2011 в 15:52:06

      не ужели не проще таки один раз самому разобраться, чем задовать по сотне вопросов в день? о_0

      •  V[Ne]ZakoNa | 16 октября 2011 в 16:32:11

        Вова да я пытался но не получается((( НЕ ПОЙМУ КАК СДЕЛАТЬ.

      •  V[Ne]ZakoNa | 16 октября 2011 в 16:33:49

        content сообразил как прописать а вот фон нет(((

  •  V[Ne]ZakoNa | 16 октября 2011 в 16:40:30

    Проверьте на ошибки

    /*Оформления списков в виджетах*/
    .is_link{color:#444; font-size: 9pt;}
    .is_link li{background: url(../images/favorite.png) no-repeat 0 3px !important; padding:0 0 0 21px !important; margin: 3px 0 !important;}
    .is_link li li{background: url(../images/li2.png) no-repeat 0 3px !important;}
    /*Фон виджетов*/
    .widget{border-right:3px #223C5C; width: 220px !important; margin-top: -1px !important; padding-left:10px; box-shadow: 1px 2px 2px 2px #999; border-radius: 7px 7px 7px 7px;}
    /*Подвал виджетов*/
    .w2{border-bottom: 7px #95C653 dashed; margin: 10px 0 20px 0; box-shadow: 2px 2px 2px #999; border-radius: 0 0 7px 7px;}
    /*Делаю иконки в меню*/
    /*.category_widget_0 .widget_header{background: url(../images/home.png) no-repeat left center;}*/
    /*Отделяю контент статей*/
    .page_only{border-right:3px #223C5C !important; margin-top: -1px !important; padding: 10px; box-shadow: 1px 2px 2px 2px #999; border-radius: 7px;}
    /*Шапка в контенте*/
    .info{background: whitesmoke; color:#000000 !important; box-shadow: 0 1px 1px 1px #999; border-radius: 7px; font-size: 7pt !important; padding: 10px;}
    /*Подвал виджетов*/
    .c2{}
    /*Ссылки в статьях*/
    .content a{color: #5077EC; text-decoration: none;}
    .content a:hover{color: #EC5053;}
  •  V[Ne]ZakoNa | 16 октября 2011 в 20:57:59

    Да не получается шапку в контенте прижать, правда я часть кода удалил(((

  •  V[Ne]ZakoNa | 16 октября 2011 в 20:59:19

    и скруглил углы

  •  V[Ne]ZakoNa | 16 октября 2011 в 21:06:19

    Можно еще вопрос? В остальных шаблонах какой файл отвечает за стиль, как задать свой?

    •  Серёга | 16 октября 2011 в 21:14:27

      Мне бы хоть взглянуть на твое чудо глазком smile

  •  V[Ne]ZakoNa | 16 октября 2011 в 23:32:58

    Соре, прсиханул.... все удалил... Похоже я безнадежный((((((((((((((((((((((((((((((((((((

    •  Серёга | 16 октября 2011 в 23:59:45

      Ба-ааа... батенька.

      А нахрен руки опускать???

      На почитай для поднятия тонуса:

      http://seregakolt.com/about

      •  Серёга | 17 октября 2011 в 00:02:49

        Да и остальные статьи на сайте почитай, их там не так много.

        Нельзя так быстро здаваться!!! fubar

        Ничего хорошего из этого не выйдет, начни сначала, освой HTML, затем CSS, а затем, через месяцок, опять сюда smile

  •  V[Ne]ZakoNa | 17 октября 2011 в 05:22:14

    Сергей, спасибо)))) очень интересно))) да и за поддержку спасибо))) а нервы сдали наверное потому что уже 5-е сутки не сплю((( сынишка капризничает, животик у него болит((( а жену как маму почему то не воспринимает, все время у нее кричит. Затихает у меня на руках))). ну что то я не по теме))) буду учить))) надеюсь все пойму и смогу быть полноценным веб-мастером))) просто сложновато понять когда сам по себе пытаешься разобраться, а если что то не так прописал сам без помощи не поймешь(((( вот и приходится тебя доставать такими глупыми вопросами. Видно верно Вова сказа что мне с начало нужно все выучить чтоб не задавать глупых вопросов. Но все равно твои курсы самые лучшие и доходчивые))) спасибо за все)))

  •  V[Ne]ZakoNa | 17 октября 2011 в 06:06:48

    Серега, очень похоже на мою ситуацию((( я тоже пострадал на стройке, порвал мышцы в левой руке (делал крышу в школе) и про меня также забыли(и про маю зарплату, еще оказалось что я им должен 15 т.р.) щас рука почти не функционирует, но жить то как то надо, да еще и сын родился щас ему 1.5 месяца. вот тоже сказали что ты теряешься люди в интернете зарабатывают такие бешеные деньги. Ну и решил попробовать вот только плохо у меня получается(((( вот и начинаю потихоньку сдавать заднею((( деньги то в семье кончаться... а дохода как не было так и нет. Вот и пытаюсь все быстрее познать, но что то совсем не то... Завел сайт мега-хост.рф но как людям предлагать хостинг сайта если сам деревянный я даже не знаю... да и посещения сайта самое большое это 10 человек в день, и раскрутить без денег незнаю как, хотя и смысла не вижу... знал бы сайт-строения был бы смысл... Вот такая коротенькая история...

    •  Серёга | 17 октября 2011 в 08:15:08

      Заработок в интернете не зависит от знаний в создании сайтов wink

      Если ты только не планируешь зарабатывать именно этим!

      •  V[Ne]ZakoNa | 17 октября 2011 в 15:34:39

        Да этим я и думал попробовать заняться, но видно не потяну...

        •  Серёга | 17 октября 2011 в 21:34:42

          Если все начинать по порядку - сложного вообще ничего нет!

          •  vovans | 18 октября 2011 в 00:46:37

            Сложного может и ничего, если начинать потихоньку и есть другие источники дохода )) А так, очень непросто взять и через месяц уже прибыль иметь. если не представляешь, что и как в этих интернетах.

            •  Серёга | 18 октября 2011 в 09:15:47

              Через месяц если только инфобизнесом (пахать очень дохрена) или какими-нибудь вложениями - типа партнерок (опять нужен опыт, куда гнать траф, а куда нет, где прибыльно, а где партнерка себя уже отжила).

              •  V[Ne]ZakoNa | 18 октября 2011 в 16:54:22

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

                •  Серёга | 18 октября 2011 в 20:12:40

                  Неа, подход не правильный, надо что-то выучить и сразу применить на практике!

                  •  vovans | 20 октября 2011 в 11:25:22

                    Про выучить, понятное дело, я обеими руками за! smile Стоит потратить какое-то время на изучение нужного, как всё начинает делаться заметро быстрее и осознано. Иначе бесконечное брожение впотьмах.

                    Что до того, что другие достигли.. Ну, другие и в итернетах ведь первый день, наверно. И уровень их знаний, наверно, совсем другой...

                    Интернет-бизнесом хорошо параллельно заниматься. Особенно, на начальном этапе.

                    Что до реального заработка, то жена когда в декрете была, реально зарабатывало не менее 20 штук в месяц. При том что она ребёнком занималось, готовками, уборками и прочим. Но... Тут снова но... Она русский язык знает. Потому, и писать могла, и переводить и что угодно.