Часто бывает что в шаблоне что-то не устраивает. Например цвет какого либо элемента, его величина, размер шрифта и.т.д. А в настройках шаблона как на зло, нельзя внести изменения. Расстраиваться не стоит, можно подредактировать код в файле CSS.
Сейчас я выберу определённый элемент на сайте, найду и отредактирую код файла CSS отвечающий за этот элемент, тем самым изменю его внешний вид.
Всё это очень просто сделать с помощью браузера Mozilla Firefox, и установленного в него дополнения F irebug.
Установка Firebug в Mozilla Firefox
Откройте браузер Mozilla не ниже 3 версии и пройдите на официальный сайт Firebug . Там увидите вот такой оранжевый значок "Установить Firebug", кликните по нему. Вас перебросит на " mozilla.org".
Перейдя на " mozilla.org", нажмите "Добавить в Firefox ".
В открывшемся окне нажать "установить", после установки перезапустите браузер. Firebug готов к работе!
Редактирование шаблона joomla 3 в
Теперь в браузере мазила необходимо открыть страницу вашего сайта, с элементом который хотите редактировать. Я покажу вам на примере тестового сайта под управлением joomla 3 установленного на денвер . А корректировать буду блок главного меню.
После того как открыта страница сайта, включите Firebug. Для этого надо нажать на картинку жука, находящуюся в правом верхнем углу браузера Mozilla. Цвет должен изменится с серого на желтый.
В низу откроется панель Firebug, выглядит она так. (Для того чтобы увеличить изображение, кликните по нему).
Чтобы найти код интересующего нас элемента, в верхнем левом углу панели, нажмите на иконку "выделения объекта".
Далее наведите курсор на объект который хотите редактировать, и кликните по нему левой кнопкой мыши. У меня это блок "главного меню". 
После его выделения, в правой части панели выводится код отвечающий за этот блок. 
Сейчас я буду изменять этот код прямо в панели , и выводить скриншоты с обновлённым блоком. Баловаться можно сколько угодно, после обновления страницы всё вернётся обратно. Добившись необходимых результатов, нужно будет вносить изменения в файл CSS. В конце статьи покажу как.
1. background-color : #F5F5F5 ; эта строка отвечает за цвет фона. М еняем на бирюзовый background-color : #00FFFF ;
2. border
:
1px solid
#E3E3E3
;
эта строка отвечает за границы блока. Поставим вместо одного пять пикселей и изменим цвет на коричневый border
:
5px solid
#800000
;
3. border-radius
:
4px
;
здесь указан радиус, закругление по углам. Ставим 24 вместо 4 border-radius
:
24px
;
Таким вот образом можно редактировать шаблон joomla 3, настраивая его внешний вид. Меняется практически всё на сайте: цвета, шрифты, размеры и.т.д.
Как изменить CSS шаблона joomla 3
Потренировавшись в панели и добившись нужных результатов, необходимо внести изменения в файл CSS. Здесь всё тоже достаточно просто.
Наведите курсор мыши на заголовок с названием файла CSS, рядом в скобочках виден номер строки с кодом, в моём случае "строка 2116". Перед вами откроется путь к файлу CSS. 
1. Пройти по пути "sajtnajoomla.ru/templates/protostar/css/template.css"
2. Открыть файл "template.css", блокнотом Notepad++.
3. Найти 2116 строку, и отредактировать CSS код шаблона joomla 3.
Не забудьте предварительно сделать копию CSS файла, который будете редактировать! На этом всё, возникнут вопросы, задавайте в комментариях.
От автора: приветствую Вас уважаемые читатели. Внешний вид любого сайта, конечно же должен быть привлекательным и уникальным. Поэтому в данной статье я хотел бы показать Вам, как изменить фон сайта Joomla, так как такая маленькая деталь как цвет или изображение фона, могут существенно улучшить дизайн и восприятие пользователями Вашего проекта. Тем более что по данной теме очень часто задается множество вопросов.
Как Вы знаете все, что касается дизайна и оформления сайта на Joomla сосредоточено в шаблоне. Соответственно для изменения внешнего вида сайта, необходимо вносить правки в шаблон, а для этого нужны знания его принципа работы и структуры. Попросту говоря нужно уметь работать с шаблонами на уровне кода. Но, что же делать новичку, который только начинает изучать Joomla? Поэтому в данной статье я приведу Вам подробную инструкцию, для CMS joomla — как сменить фон пользовательской части сайта. При этом, ни каких специальных знаний не понадобится, только разве, что HTML и CSS на базовом уровне.
Итак, для начала хотел бы отметить, что шаблоны Joomla найдете в каталоге templates файловой структуры движка. Как правило, имя шаблона совпадает с именем папки в которой он располагается относительно вышеуказанного каталога. Поэтому Вы можете перейти в папку интересующего шаблона и посмотреть, как он устроен.
Для примера я использую стандартный шаблон Beez3.
Первое что бросается в глаза – это каталог css, где располагаются файлы с правилами CSS. То есть с правилами оформления отображаемых данных сайта. Соответственно изменяя правила – Вы измените внешний вид сайта. Теперь давайте перейдем в данный каталог.
Как Вы видите, для одного шаблона может быть предусмотрено несколько файлов со стилями. При этом каждый из них содержит правила для отдельного элемента сайта. Как же узнать, в каком файле описаны, необходимые правила – спросите Вы. Для ответа на данный вопрос, воспользуемся инспектором кода в браузере. Как для меня – наиболее удобный – это FireBug для браузера Mozilla Firefox.
То есть открыв данный инструмент для своего сайта Вы можете рассмотреть структуру необходимого элемента, к примеру нужного заголовка, абзаца или элемента. Помимо исходного кода того или иного элемента, в правом блоке, Вы видите стили которые к нему применяются. И что очень важно, вместе со стилями, приводится информация о файле, в котором они описаны, и более того – на какой строке файла, прописан конкретный стиль.
К примеру, фон сайта, в стандартном шаблоне прописан в правилах для элемента, а именно в файле personal.css, в первой строке:
body { background:#eee; }
body { background : #eee; |
Теперь собственно ответ на вопрос, как поменять фон на сайте joomla – очевиден. Достаточно добавить необходимые правила в файл стилей (применительно к стандартному шаблону – в файл personal.css).
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Поэтому, немного изменим правила для элемента body.
body { background:#eee; background:url("../images/index_img_par.jpg"); }
body { background : #eee; background : url ("../images/index_img_par.jpg" ) ; |
Если в качестве фона сайта используется изображение – его необходимо предварительно поместить в каталог хранения изображений шаблона (для шаблона Beez3 – это папка images).
Теперь как изменить фон в joomla 3, несколько иным способом. Смотрите в панели управления CMS, в менеджере шаблонов, есть вкладка “Шаблоны”.
Выбрав интересующий шаблон на данной вкладке, Вы перейдете на страницу его редактирования.
Где на вкладке “Редактор” приведена полная файловая структура шаблона. При этом файлы и папки отображаются в виде ссылок. Соответственно кликнув, по которой, Вы увидите содержимое для файлов и вложенные элементы для папок. К примеру, мы можем перейти в каталог css, а затем выбрать для редактирования уже знакомый нам файл personal.css.
То есть файлы с текстовым содержимым Вы можете редактировать непосредственно на данной странице. Закончив все правки, необходимо кликнуть по кнопке “Сохранить”.
Теперь Вы знаете как изменить фон в Joomla 3 и умеете править дизайн сайта, правда на простейшем уровне. Более сложные правки шаблона, требуют углубленных знаний по данной теме, особенно, что касается изменения структуры шаблона, добавления новых позиций или создания собственного шаблона с абсолютного нуля. Поэтому если Вы хотите узнать, по какому принципу работают шаблоны – Вам будет полезен наш бесплатный курс .
На этом у меня все! Всего Вам доброго и удачного кодирования!!!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
В данной статье мы рассмотрим, как редактировать внешний вид шаблона Joomla .
Любой человек, создающий сайт, хочет сделать свой сайт уникальным, ну или хотя бы не похожим на другие.
Сейчас почти все шаблоны для Joomla общедоступны, скачать и установить их на сайте может каждый.
Давайте на примере разберем видоизменение стандартного шаблона Beez5 .
Я использую браузер Chrome, нажимаем F12 или щелкаем правой клавишей мыши на нужном месте и нажимаем "Просмотр кода элемента".
Как видно на рисунке, за задний фон шаблона отвечает тег body со стилем background .
В стилях указан цвет фона #EEE и фоновая картинка (путь к ней). Именно эти параметры дают нам фон сайта.
Для их изменения нужно просто заменить эти параметры (указать новый цвет и путь к новой картинке).
Все изменения производятся в файле, который указан в панели разработчика, здесь это beez5.css , после двоеточия указана строка в которой нужно изменять параметр, у нас это 19 строка.
Путь к файлу можно посмотреть, если навести на название курсором.
Изменять логотип очень легко и для этого есть несколько способов.
Способ 1:
Так же, как и в первом способе, наводим курсор на логотип, щелкаем правой клавишей мыши и нажимаем Просмотр кода элемента. Все, что нам надо узнать, это адрес (путь) к логотипу. Теперь делаем свой логотип, даем ему такое же имя (fruits.gif) и просто заменяем на него старый логотип.
Способ 2:
Этот способ самый легкий, но встречается не во всех шаблонах. Идем в: Менеджер шаблонов - Beez5 (стиль) - Указываем логотип.
Способ 3:
Делаем все так же, только заменяем не файл, а путь к логотипу. Как видно на картинке, картинка вставлена через html
, а не через css
. Поэтому нужно изменять исходный код шаблона. Делается это легко: Менеджер шаблонов - Beez5 - Изменить шаблон главной страницы. Ищем строчку с
и изменяем путь к логотипу на нужный. В данном шаблоне путь прописан на php
, так как есть вариант №2. Поэтому лучше воспользоваться вариантом №1 или №2.
Находим главный блок - div
. Как видно на картинке, это Таким же образом редактируются отдельные блоки. Находим блок, смотрим и изменяем стиль. Все это делается так же. Щелкаем правой клавишей мыши на тексте и нажимаем Просмотр кода элемента. Нам покажет блок и стиль блока отвечающий за параметры текста. Цвет текста и ссылок задается параметром - color. Все файлы могут редактироваться через редакторы типа notepad++
или через стандартный "редактор" Joomla. Менеджер шаблонов - Нужный шаблон. Тут Вам выдается список файлов (index.php, шаблон страницы 404, шаблон страницы печати, стили.). На этом все. Ваше мнение важно для нас. Пишите Ваши комментарии. Урок
joomla № 15. Меняем дизайн шаблона.
Здравствуйте, дорогие читатели блога сайт! В этом уроке вы узнаете, как можно изменить
шаблон
joomla .
Мы с вами переделаем шапку сайта и поставим в нее собственные картинки.
На данный момент этот новый шаблон у вас уже должен быть скачан с любого сайта, который вы нашли.
Желательно, чтобы их было несколько штук, чтобы появилась возможность выбирать. Где их искать, вы можете прочитать в прошлом уроке № 14 . Проще всего сохранить все эти файлы в одну папку, чтобы потом не запутаться.
Для того чтобы изменился дизайн нашего сайта, новый шаблон надо установить. Как это сделать?
Запускаем на компьютере Denwer, чтобы начать работу.
Заходим в административной панели в меню «Расширения» - установить/удалить.
В строке «загрузить файл пакета» нас интересует кнопка «Обзор». Нажимаем на нее и теперь нам надо выбрать подготовленный для установки шаблон. Если он находится в отдельной папке, про которую я вам все время рассказываю, то вы его быстро найдете. Нажимаем на zip архив, выделяя шаблон, далее – открыть.
Вы можете выбирать файлы просто по порядку, чтобы посмотреть, что вам подойдет, а что нет.
Потом нам надо нажать на саму кнопку «загрузить файл/установить».
Должно появиться сообщение, что шаблон установлен удачно.
Иногда по какой-то причине может выдаваться ошибка, тогда попробуйте установить еще раз. Эта ошибка может появиться как при открытии файла перед установкой, так и после нее.
Не получилось – подбирайте для себя другой шаблон, а этот потом просто удалите.
Некоторые из них могут оказаться не очень хорошего качества, потому что они бесплатные.
Где посмотреть на новые шаблоны?
Они будут там же, где и все остальные.
Идем в менеджер расширений – шаблоны, и там находим все, что только что установили. Рядом с ними есть небольшие картинки, они всплывают при наведении на название.
Вот у меня на скриншоте так.
Чтобы проверить, что у нас получилось, надо слева от названия щелкнуть мышкой (в кружочке).
А потом нажимаем на кнопку «по умолчанию», после чего в строке рядом с названием будет желтая звездочка.
После этого внешний вид сайта изменится. Заходим в просмотр и проверяем.
Какие неожиданности могут вас подстерегать при смене шаблонов?
На примере этого скриншота вы сейчас все поймете.
После установки я сделала один из шаблонов по умолчанию. В предварительном просмотре видно, что верхнее меню куда-то пропало.
Почему так произошло, ведь у нас все было сделано правильно?
Если зайти и проверить позиции для модулей, как это мы делали в прошлом уроке, то понятно, что здесь вывести верхнее меню так, как нам надо, просто не получится.
Какой же выход? Переставлять верхнее меню или искать другой шаблон. Я выбрала второй вариант.
Сейчас все получилось именно так, как надо.
Некоторые позиции для модулей могут просто отсутствовать. Если верхнее меню сейчас стоит в позиции user3, то после установки шаблона, в котором нет такой позиции, верхнее меню пропадет. Вам придется его перемещать вправо или влево, или искать новый шаблон для себя. Попробуем проверить, какие есть позиции. Это вы уже умеете делать.
Заходим в «Менеджер шаблонов», выбираем название и далее – изменить.
Поэтому надо выбрать такую позицию, которая предусмотрена. Например, top или right.
Если вы покупаете шаблон за деньги, то вам сделают все, что вы захотите. Но мы пока ничего не тратим, потому что создаем сайт самостоятельно. Значит, придется немного постараться самим и методом перебора выбрать именно то, что подойдет.
Поэтому рекомендую скачивать не один шаблон, а больше. Торопиться не надо, главное – чтобы были все позиции для модулей, которые вам нужны. Смотрите, выбирайте, делайте по умолчанию разные шаблоны, пока вам не понравится что-то одно, самое красивое и удобное для всех пунктов меню.
Перед подготовкой сайта для загрузки все лишнее мы обязательно удалим. Как это сделать, будет написано отдельно.
Как изменить дизайн?
В готовом шаблоне есть логотип, который вам не нужен. Разные картинки в шапке вы обязательно захотите поменять на свои собственные.
Давайте разберем, где хранятся все эти готовые картинки.
Идем в «мой компьютер»- диск Z – home – mysite – www
Заходим в папку templates, здесь как раз и хранятся все шаблоны.
Вот у меня на данный момент их целых 13 штук.
Теперь вам надо найти по названию тот, который сейчас выбран по умолчанию.
Вернитесь в панель администратора и проверьте название, около которого стоит желтая звездочка, а потом найдите эту папку здесь.
Для примера у меня есть еще один шаблон, связанный с зубными врачами.
Вот так на данный момент выглядит шапка.
Она меня, естественно, не устраивает, картинку надо обязательно заменить.
А вот как же это сделать?
Просто так подставить любую фотографию не получится, нужна небольшая хитрость.
Хотите изменить картинку – сначала подготовьте новую.
Довольно сложная, на первый взгляд, задача, но мы-то с вами справимся!
Прочитайте, какой должен быть порядок, а потом просто повторите на своем сайте.
Заходим в папку того шаблона, который вы будете переделывать, через «Мой компьютер». Нас интересуют картинки, поэтому выбираем папку images.
Не торопитесь, чтобы не перепутать папки.
Итак, как найти нужный файл, как он называется и что конкретно надо сделать?
Слово шапка вы здесь не найдете, даже если будете искать очень долго.
Придется немного поднапрячься и обратить свое внимание на файл, который называется header. После него может быть написано - .jpg или - .png или - .gif
Такой файл может иметь разные названия, например, logo или даже banner.
Чтобы не ошибиться, смотрим на левую колонку, в ней при нажатии на название будут появляться соответствующие картинки.
На этом скриншоте видно, что меня интересует файл banner1.jpg
Если вы собираетесь изменить шапку сайта, а точнее, файл header, то вам придется сделать такой же. У него должно быть это название, размер и расширение. Если в исходном файле - png, то вам надо сделать точно такой же файл, например, в фотошопе.
И новым файлом заменить старый файл. После такой ловкой подмены изменится и шапка вашего сайта.
Порядок работы с файлом следующий.
2) В любом графическом редакторе надо создать свою картинку. У нее должно быть точно такое же название, размер в пикселях и расширение.
Говорят, что в будущем в Морфлот будут брать только неумеющих плавать. Они намного лучше защищают свой корабль!!!
Показываю на конкретном примере.
У меня файл называется так: banner1.jpg (размер у него 979х354).
В программе CorelDraw я сделала простую картинку, она точно такого же размера, называется banner1, и сохранила я ее в формате - jpg
Потом снова заходим в папку с этим шаблоном, выбираем в ней папку images и вставляем сюда новый файл со своей картинкой.
У вас обязательно спросят: «Заменить файл?»
Соглашаетесь, после этого новая картинка будет отвечать за ваше оформление в шапке сайта, а старая просто исчезнет.
Посмотрите, что получилось, на этом скриншоте.
Принцип замены простой, делайте все по порядку и не торопитесь.
Точно таким же образом можно изменить логотип и поменять цвет каждой кнопки.
Сначала сохраняете старый файл, потом подготавливаете новый в графическом редакторе. И заменяете старый на новый. Вот здесь в шаблоне нарисован логотип для стоматологов. Конечно, его придется менять на свой.
Если изменить название или размер, то ничего не получится.
Иногда после замены все равно подгружается старая картинка, хотя ее уже нет. Это происходит из-за того, что старая картинка грузится из кэша.
В этом случае надо обновить сайт (кнопка F5).
Если вы хотите изменить размер шапки и вместо формата -jpeg поставить –gif, можно делать правку через HTML и CSS, но для новичков это слишком сложно. Поэтому рекомендуется для начала просто заменять файлы на свои собственные. Это самый простой вариант изменения дизайна.
Желательно картинки рисовать в векторной графике, потому что при увеличении они не теряют своего качества.
Но если вы никогда не работали в программе CorelDraw , рисуйте в фотошопе. Даже после того, как ваш ресурс будет в интернете, все можно будет поменять.
В этом туториале представлено краткое руководство по работе с архивными статьями в Joomla 3.x. Архивирование статей позволяет сохранить их на вашем сайте Joomla на будущее, но делает их менее заметными для посетителей вашего сайта, так как такие статьи больше не отображаются вместе с остальным содержимым сайта. После архивирования эти статьи доступны к просмотру только из раздела меню «Архивные статьи» в Joomla, модуля «Архивные статьи» (Archived Articles), или поиском по имени статьи с помощью встроенного фильтра содержимого сайта Joomla. Статьи можно легко заархивировать в Менеджере статей (Article Manager). Для этого необходимо выполнить следующее: Можно настроить модуль Архивных статей (Archived Articles) для отображения списка архивных статей, упорядоченных по месяцам. Выполните следующее: Также можно создать кнопку меню «Архивные статьи» (Archived Articles) для отображения списка архивированных статей сайта. Выполните следующее: В панели управления Joomla перейдите в раздел Меню (Menus)
, выберите меню, к которому добавите новый пункт и нажмите кнопку Создать (New)
вверху справа в панели инструментов: Возле параметра Тип пункта меню (Menu Item Type)
нажмите кнопку Выбрать (Select)
. В возникшем всплывающем окне откройте вкладку Статьи (Articles)
и выберите тип Архивные статьи (Archived Articles)
из выпадающего списка: Теперь можно задать главные настройки пункта меню: На этом туториал заканчивается. Теперь вы знаете, как работать с архивными статьями в Joomla 3.x.
именно он отвечает за ширину сайта. Смотрим параметры css - стилей, находим widthи указываем нужную ширину. После этого заходим в файл position.css
, в 33 строке пишем параметр и сохраняем файл.
Изменение цвета текста и ссылок
Выводим стандартные модули
Архивные статьи (Archive Articles)
Отображение списка архивных статей посредством модуля
Отображение списка архивных статей посредством кнопки меню
