Суббота, 18 Февраль 2012 21:01

Создаем свой шаблон 8. Joomla 1.5

Автор
Оцените материал
(0 голосов)

   

   Изображение, которое называется componentheading, и устанавливаю repeat-y, далее можно установить какой ни будь крупный шрифт, к примеру, 16px, теперь устанавливаем font-family:”Arial Black”. Я поставлю вот такой жирный шрифт, устанавливаем цвет, и можно установить не большой отступ text-indent:5px, и у меня здесь все заголовки поставлены с маленькой буквы, можно поставить такой стиль какой мы рассматривали text-transform:capitalize, установить заглавные буквы. Нажимаем обновить, и мы видим вот это изображение вот такая полоска, которая по оси копируется, вот таким образом мы с вами создали вот такой компонент heading. Далее у нас бросается в глаза, что у нас вот здесь очень маленький отступ, от меню до контента.

   Каким образом это можно исправить, для этого давайте посмотрим, в каких блоках у нас выводится весь основной шрифт. Давайте откроем, какой ни будь раздел, то есть, как вы видите для всех разделов, у нас применяется вот такой стиль. Открываем вводный код, и смотрим, какой же стиль у нас вводит весь контент, вот у нас заканчивается компонент heading, дальше открывается <div и здесь у нас создается табличка, создается <table, которая имеет класс contentpaneopen. Копируем этот стиль, и создаем новый стиль, то есть это у нас будет стиль для таблицы, который имеет класс contentpaneopen, и устанавливаем margin-left:20px, и посмотрим, что у нас изменилось.  Мы видим, что у нас получился отступ, правда, отступ у нас создался только лишь для этих материалов. Ну, я в частности при создании сайта для всех материалов, использую режим блога, то есть аналогично вы можете для этого найти класс и установить отступ.

   Давайте продолжим, вот этот у нас плагин, который мы устанавливали , он так же нуждается в небольшом смешении. Давайте, чтобы не менять стиль, для вот этого плагина и, допустим, переходим в раздел, нам здесь опять необходимо так же менять, давайте мы используем те возможности шаблонов, которые мы создали. Сейчас вот это смешение для контента мы его убираем, и сделаем немного по-другому, как вы помните в самом начале, при создании таблицы, мы размешали весь контент. То есть весь основной контент у нас вводится в ячейке  <td, с модификатором component, именно для этого унификатора весь контент не зависимо от того категория, или это блог материалов, то есть он у нас вводится ячейки <td. И вот в ячейке <td мы с вами создадим отступ, поставим 20px, в ячейки и у нас все материалы, будут нормально, вводится. Сейчас мы переделаем немного по-другому, чем я вам раньше сказал. И так ячейка <td, идентификатор компонентов я создал его в отдельный блок, (стили, таблицы, шаблоны) здесь пишем td, ставим идентификатор, устанавливаем для нашей ячейки padding-left, ставим 20px.

   Переходим на наш сайт, нажимаем F5, и вот теперь вне зависимости, что это у нас категория она имеет отступ, как видите везде у нас отступ. И эти отступы можно менять всего лишь одним стилем. То есть смотрите по возможности, когда будете проектировать, смотрите, где вы можете обойтись без, с наименьшим описанием стилей, это будет более удобно для вас, и вы сможете быстрее менять определенные стили. Вот таким образом мы с вами установили отступы, теперь давайте создадим стили, которые будут определять вот эти заголовки. То есть у каждой статьи у нас есть заголовок, давайте посмотрим, какой стиль у нас их определяет. Там заголовок «Материалы» мы его нашли, это у нас contentheading, здесь у нас был компонент heading, то есть его заголовок, а вот эта ссылка у нас имеет contentheading, и в частности блок contentheading имеет ссылку и она имеет класс, как раз именно для этого класс пропишем. То есть напишем a.contentpagetitle, то есть именно заголовок материала, переходим в нашу таблицу стилей, продолжаем создавать и редактировать стили для отображения материалов.

   Создаем сейчас стиль для contentpagetitle, и так font-family устанавливаем Trebuchet MS, полужирный шрифт, устанавливаем цвет, и установим text-decoration:underline., чтобы у нас было видно, что это основная ссылка, при нажатии на которую мы будем открывать материал.  Вот мы видим у нас ссылочка, как они отображаются так же можно создать псевдо-класс hover, который будет отображать изменение ссылки при наведении на нее мышью.  Копируем полностью весь стиль, и создадим, что нам можно использовать, например, задать какой ни будь цвет, например синий. Когда мы будем наводить на ссылку, у нас будет ссылка отображаться синим цветом, нажимаем на данный материал, у нас здесь используется тот же стиль, то есть открываются материалы и отображается.  Далее нам необходимо создать стили, которые у нас будут определять отображение (подробнее и добавить комментарии). Давайте посмотрим их в исходном коде, где у нас находится «Подробнее» вот у нас кнопка «Подробнее» и «Добавить комментарии» и вот у нас ссылка readmore-link и comment-link. Эти стили мы копируем, readmore и через запятую a.comment-link ссылка для комментариев, и описываем стили, так же пишем font-family, устанавливаем стили, 12px и устанавливаем цвет, цвет у нас будет #069, вот такой  у нас будет цвет. И можно аналогично таким же образом создать стили, которые у нас будут при наведении мышью. Псевдо класс прописать для данного стиля, здесь, к примеру, у нас будет меняться цвет стиля.

   Давайте посмотрим, что у нас получилось, вот кнопочка "Подробнее» и «Комментарии» и вот такой меньший шрифт. Ну что ж  теперь вы для самостоятельной работы, можете посмотреть стили для, (первая, предыдущая, следующая и последняя) то есть прописать эти стили для навигатора. То есть аналогично через исходный код, то есть здесь тоже очень интересная инфраструктура, сколько стилей нужно создать, имеет класс pagenav. То есть пропишите, потренируйтесь и вы будете легко и спокойно создавать стили для вашего сайта. На этом я данный урок завершаю и в следующем уроке, который  у нас с вами будет завершающим.  Мы  свами посмотрим, каким образом можно доработать вывод материалов и поменять некоторые не стандартный слова, например,  изменим вот этот текст: Еще статьи. И посмотрим, как же можно поменять вот этот текст: Рейтинг пользователей, на другой текст, то есть посмотрим эти небольшие нюансы. Продолжение в следующем видео уроке.

Прочитано 1016 раз Последнее изменение Среда, 07 Март 2012 17:00
Другие материалы в этой категории: « Создаем свой шаблон 7. Joomla 1.5
Авторизуйтесь, чтобы получить возможность оставлять комментарии