именно он отвечает за ширину сайта. Смотрим параметры css - стилей, находим widthи указываем нужную ширину. После этого заходим в файл position.css , в 33 строке пишем параметр и сохраняем файл.

Таким же образом редактируются отдельные блоки. Находим блок, смотрим и изменяем стиль.

Изменение цвета текста и ссылок

Все это делается так же. Щелкаем правой клавишей мыши на тексте и нажимаем Просмотр кода элемента. Нам покажет блок и стиль блока отвечающий за параметры текста. Цвет текста и ссылок задается параметром - color.

Все файлы могут редактироваться через редакторы типа notepad++ или через стандартный "редактор" Joomla.

Менеджер шаблонов - Нужный шаблон. Тут Вам выдается список файлов (index.php, шаблон страницы 404, шаблон страницы печати, стили.).

На этом все.

Ваше мнение важно для нас. Пишите Ваши комментарии.

Часто бывает что в шаблоне что-то не устраивает. Например цвет какого либо элемента, его величина, размер шрифта и.т.д. А в настройках шаблона как на зло, нельзя внести изменения. Расстраиваться не стоит, можно подредактировать код в файле 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 3

Дорогие читатели, продолжаем для Вас публиковать материалы посвященные Joomla 3. Сегодня поговорим о том, как изменить фон Вашего сайта. На джумле сделать это довольно просто.

Меняем фон на сайте Джумла

Для начала Вам необходимо открыть Ваш сайт в любом браузере, для примера мы используем браузер Google Chrome .

1) Кликаем правой кнопкой мыши в том месте Вашего сайта, где Вы хотите изменить фон и выбираем пункт «Посмотреть код» (в других браузерах название может отличаться).

К примеру, мы решили изменить фон нашего сайта на красный. Поэтому кликаем мышью в правой или левой части сайта.

2) Перед нами появится окно, где будет указан исходный код страницы.

Здесь нас интересует значение background - color . Как видите, на сайте установлен сероватый оттенок. Давайте изменим его на ярко-красный. Для этого кликаем по квадратику с цветом и выбираем нужный нам оттенок. Запомните цифровое обозначение этого цвета (например у белого цвета оно f 000000 ).

Теперь закрыв окно исходного кода, мы увидим, что на сайте действительно изменился цвет фона.

Подберите нужный Вам оттенок и переходите к следующем пункту.

3) Подобрав нужный нам вариант, необходимо установить настройку этого цвета в административной панели Вашего сайта. Чтобы узнать, где именно расположен файл, отвечающий за цвет фона – вновь откроем окно «Посмотреть код».

Теперь наведите на название напротив тега body и Вы увидите в каком файле расположен код, отвечающий за смену цвета фона. Кстати, цифры после двоеточия, означают номер строки, где расположен этот код.

Запускаем вашу панель управления и находим этот файл.