Как изменить фон сайта на Joomla 3
Дорогие читатели, продолжаем для Вас публиковать материалы посвященные Joomla 3. Сегодня поговорим о том, как изменить фон Вашего сайта. На джумле сделать это довольно просто.
Меняем фон на сайте Джумла
Для начала Вам необходимо открыть Ваш сайт в любом браузере, для примера мы используем браузер Google Chrome .
1) Кликаем правой кнопкой мыши в том месте Вашего сайта, где Вы хотите изменить фон и выбираем пункт «Посмотреть код» (в других браузерах название может отличаться).
К примеру, мы решили изменить фон нашего сайта на красный. Поэтому кликаем мышью в правой или левой части сайта.
2) Перед нами появится окно, где будет указан исходный код страницы.
Здесь нас интересует значение background - color . Как видите, на сайте установлен сероватый оттенок. Давайте изменим его на ярко-красный. Для этого кликаем по квадратику с цветом и выбираем нужный нам оттенок. Запомните цифровое обозначение этого цвета (например у белого цвета оно f 000000 ).
Теперь закрыв окно исходного кода, мы увидим, что на сайте действительно изменился цвет фона.
Подберите нужный Вам оттенок и переходите к следующем пункту.
3) Подобрав нужный нам вариант, необходимо установить настройку этого цвета в административной панели Вашего сайта. Чтобы узнать, где именно расположен файл, отвечающий за цвет фона – вновь откроем окно «Посмотреть код».
Теперь наведите на название напротив тега body и Вы увидите в каком файле расположен код, отвечающий за смену цвета фона. Кстати, цифры после двоеточия, означают номер строки, где расположен этот код.
Запускаем вашу панель управления и находим этот файл.
В данной статье мы рассмотрим, как редактировать внешний вид шаблона Joomla .
Любой человек, создающий сайт, хочет сделать свой сайт уникальным, ну или хотя бы не похожим на другие.
Сейчас почти все шаблоны для Joomla общедоступны, скачать и установить их на сайте может каждый.
Давайте на примере разберем видоизменение стандартного шаблона Beez5 .
Изменение заднего фона шаблона (background)
Я использую браузер 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 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. Приветствую вас читатели блога No Zombies Allowed. Сегодня я хочу вам рассказать о том, как заменить фон сайта
. Благодаря вашему собственному фону ваш сайт станет уникальным и выделится из серой массы копипастных шаблонов. Поменять фон сайта достаточно не сложно и делается это за 10 минут. И сейчас я расскажу как заменить фон для наиболее популярных движков — Ucoz, Joomla, WordPress. Менять фон сайта мы будем при помощи стилей CSS. Фон можно задать несколькими способами: Вам нужно разумеется выбрать только 1 способ из представленных. Заместо #FAFAFA и других подобных — поставить свой цвет. Далее в CSS боди вам нужно вставить стиль фона вашего сайта. Для того, чтобы изменить фон сайта на Ucoz вам необходимо перейти: Панель Управления — Дизайн — Управление дизайном (CSS) — Таблица стилей (CSS)
. Далее найдите код по типу: Body {
font: 13px Arial, sans-serif;
line-height: 1.5;
background-color: #FFF;
}
И затем поменяйте на ваш фон один из предложенных способов выше. На скриншоте я подчеркнул красной линией куда нужно переходить и какой стиль поменять. Желательно, чтобы вы не меняли ничего, кроме background. Т.е. не трогайте padding, line-height, font и тому подобное — это может изменить уже не только фон сайта:) Чтобы изменить фон сайта на Joomla вам необходимо зайти в панель администрирования, затем Расширения — Менеджер шаблонов и выбрать вкладку «Шаблоны»
Вы увидите все CSS файлы вашего шаблона Как правило CSS в котором хранятся стили фона это template.css или main.css. Если все же вы не знаете какой файл-CSS вам нужен воспользуйтесь . После того, как вы выбрали нужный файл CSS нажмите и отредактируйте. Найдите в этом файле стиль body и измените background Body {
background: #fff;
color: #000000;
font-size: 100%;
padding: 0px;
text-align: center;
}
Вам необходимо изменить фон на WordPress? — это будет сделать не сложнее чем на любой другой . Для того, чтобы поменять фон зайдите в админку, далее Внешний вид — Редактор.
У вас откроется главный CSS-файл вашего шаблона. Все, что вам нужно, это найти стили body (они обычно в самом начале файла) и заменить background на ваш. Я постарался максимально кратко объяснить как поменять фон на сайте
. Если я что-то упустил и вам что-то непонятно, то напишите в комментариях. Спасибо за внимание:) Искринне ваш No Zombies Allowed. Сразу оговорюсь, этот урок рассчитан на тех, кто знаком с photoshop< и css. Итак, нам осталось изменить шаблон сайта. Для того чтобы изменить шаблон, нам необходимо знать, из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Интересующие нас файлы находятся в папке templates (шаблоны)\siteground-j15-1 (наш шаблон). Т.е. полный путь - yoursite.ru/templates\siteground-j15-1. В этой папке мы видим несколько файлов и папок: в папке images хранятся картинки для шаблона, в папке css - таблицы стилей, за вывод страниц отвечает файл index.php. Итак, открываем в блокноте или в Notepad файлы index.php и template.css (из папки css). Давайте рассмотрим файл index.php. В нем html-разметка отвечает за расположение элементов на странице. Все, что заключено в Изучив html-разметку, мы будем точно знать, из каких элементов состоят наши страницы, а соответственно можем изменить их внешний вид. Но наверно, вы уже обратили внимание, что представить по коду внешний вид страницы крайне сложно (хотя и возможно). Конечно, есть способ облегчить эту задачу, и имя ему - плагин Firebug для браузера FireFox. После перезагрузки браузера, в его нижнем правом углу появится значок плагина (жук): Щелкаем по нему, внизу окна браузера откроется панель: Нам нужна вкладка HTML этой панели. На ней отображается html-код страницы, открытой в браузере. При наведении курсора мыши на элемент кода, он подсвечивается на странице. Сейчас мы видим только два тега страницы - head и body. Если мы щелкнем по плюсику рядом с тегом body, то откроется его содержимое (вложенные теги). Так открываем до того момента, пока не начнут подсвечиваться интересующие нас теги. Первый такой тег - Как видите, он отвечает за верхушку шапки сайта. Теперь ищем этот идентификатор на странице template.css Видим, что этот div имеет фоном картинку header_top_middle.jpg (расположенную в папке images), которая повторяется по горизонтали. Идем в папку images, находим картинку header_top_middle.jpg, открываем ее в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце (данный цвет в шестнадцатеричном коде - #671700) и сохраняем. Идем на наш сайт, обновляем страницу и видим, что коричневая полоска появилась: Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с Итак, левый угол - картинка header_top_left.jpg, правый угол - картинка header_top_right.jpg. Открываем их в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце и сохраняем. Идем на наш сайт, обновляем страницу и видим результат: Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его - Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта - это Видим, что по сути наша шапка залита синим цветом (#06569d), вдоль нижнего края шапки (bottom) по горизонтали (repeat-x) повторяется картинка header_top_middle_shadow_bg.jpg, которая представляет собой синий квадратик с затемненным низом (эффект тени). Если мы посмотрим на сайт-образец, то увидим, что у нас по низу шапки идет белая полоса, а сам фон шапки имеет цвет #671700. Итак, переделаем в photoshop картинку (синий квадратик с затемнением внизу поменяем на коричневый квадратик с белой полосой внизу): А в таблице стилей поменяем синий цвет фона на коричневый: Сохраняем и обновляем наш сайт в браузере: Но на сайте-образце у нас расположена картинка. Для начала давайте ее добудем. Для этого идем на сайт-образец, щелкаем по картинке правой кнопкой мыши и выбираем пункт - Открыть фоновое изображение: Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши - Сохранить изображение как). Теперь идем на страницу стилей и меняем название изображения в теге Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел, Значит наши теги Теперь будем разбираться с На странице index.php видим, что в Чтобы дописать то, что нам нужно необходимо добавить в разметку страницы index.php пару дополнительных div-ов: один будет отвечать за левую сторону, а другой - за правую, обзовем их соответственно logo_left и logo_right, а в них добавим еще по div-у logo_left_text и logo_right_text, в которых и напишем необходимый текст: Посмотрим на результат: Все появилось, нам осталось только добавить стили для наших div-ов на странице template.css, чтобы они отображались, как на сайте-образце: Обратите внимание, мы немного поменяли стили для ссылок в div-e logo (уменьшили размер и добавили другой шрифт). Получилось вполне похоже на сайт-образец: Только вот коричневая полоска наверху портит все дело. Давайте ее уберем, как вы помните за ее вывод отвечает тег Все, с шапкой сайта разобрались. Теперь аналогичным образом разбираемся с главным меню и меню каталога товаров. Ничего принципиально нового уже не будет, поэтому поясню кратко. За главное меню отвечает тег Теперь то же самое с меню каталога товаров, за него отвечает тег И такие же изменения чуть ниже для пунктов меню, по которым мы щелкнули: С меню все. Теперь нам надо убрать текст, который находится ниже меню каталога товаров. Эта надпись находится на странице index.php: Как видите, это php-код, сделаем единственное исключение для этого случая и удалим его: Теперь такая же ситуация у нас в Мы также уберем этот код, но в теге с id="sgf" напишем название фирмы и значок копирайта: Ну и, конечно, поменяем цвет на коричневый в стилях: Наш сайт сейчас выглядит вот так: Очень похож на оригинал. Нам осталось только пройтись по таблице стилей и изменить стили заголовков (h1, h2, h3...) и ссылок. Надеюсь, что вы уже поняли принципы корректировки шаблона, и сделаете это самостоятельно. Как вы понимаете, если хорошо знать html и css, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.Изменение цвета текста и ссылок
Архивные статьи (Archive Articles)
Отображение списка архивных статей посредством модуля
Отображение списка архивных статей посредством кнопки меню
body{
//Просто цвет
background:#FAFAFA; /* Цвет фона */
//Градиент для всевозможных браузеров.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e5799", endColorstr="#7db9e8",GradientType=0); /* IE6-9 */
//Повторяющаяся картинка
background: url(images/bg.jpg) repeat-x /* Картинка фона */
//Прозрачная картинка + цвет
/*Плюс этого метода в том, что вы можете выбрать текстуру, а затем оперативно менять цвет при помощи CSS*/
background-image: url(images/bg.png); /* Путь изображению */
background-color: #c7b39b; /* Цвет фона */
//Статичная картинка
background-image: url(images/bg.jpg) no-repeat /* Картинка фона */
/*Статичная картинка, как правило большая*/
}
Как изменить фон сайта Ucoz
Как изменить фон сайта Joomla
Как изменить фон сайта Wordpress
(menu_t.jpg), находящегося внутри тега