Joomla является одной из самых настраиваемых и дружелюбных по отношению к пользователям CMS. Используя возможности данной системы управления сайтами можно не только наполнять сайт различным функционалом, но и изменять его внешний вид на основе установленных шаблонов.
Вам будет интересно:Как сделать форму заказа для сайта
Вопрос «создание сайта» - 1 ответ
Инструкция
Откройте главную страницу вашего сайта. В меню используемого браузера выберите функцию просмотра исходного кода страницы. В Google Chrome данный инструмент расположен в «Инструменты» - «Просмотр исходного кода», в Firefox – «Веб-разработка» - «Исходный код». Если вы используете Opera, то для просмотра HTML-кода выберите «Вид» - «Средства разработки» - «Исходный код».
Найдите дескриптор и посмотрите все div и их названия. Откройте файл template.css вашего шаблона при помощи любого текстового редактора и найдите блок, в котором явно задана ширина width. Например, если после стоит , то в файле template ищите название block. Для упрощения поиска можно воспользоваться функцией «Правка» - «Найти» окна редактора. Просмотрите все div, указанные в исходном коде страницы.
В параметре width введите нужное значение в процентах или пикселях. Просмотрите остальные блоки, которые имеют такие же значения ширины, и аналогичным образом измените их. Например, если вы в главном слое прибавили к ширине 200 пикселей, то нужно прибавить эти же 200 пикселей и в другие блоки.
После окончания внесения изменений сохраните файл и посмотрите полученный результат, при необходимости подредактируйте template.css еще раз. Если в качестве фона блоков в шаблоне применяются изображения, то скорее всего придется изменить и их размер. Также для каждого div вы можете задать собственный фоновый цвет, который может заменить однотонную картинку. Если в дизайне сайта присутствует логотип, то его вы сможете растянуть при помощи любого графического редактора. В шаблонах также можно использовать свои изображения.
Вам будет интересно:Как узнать дату создания страницы
Обратите внимание Помните, что каждый блок размещается в другом блоке, а потому зачастую необходимо изменить размер и других div-ов. Полезный совет Все файлы шаблонов находятся в корневой директории сайта, в папке Templates. Там же лежит файл template.css.
Совет 2: Как отредактировать шаблон joomla
Для придания индивидуальности сайту веб-мастером устанавливается оригинальный шаблон, ведь дизайн — это лицо сайта. Большое количество сверстанных макетов сегодня можно скачать из интернета, причем они будут иметь вполне приятный вид. Обычно шаблоны, которые были скопированы из сети, редактируют, чтобы сайт был уникальным.
Вам понадобится
- - программа просмотра изображений;
- - FileZilla;
- - текстовый редактор Notepad++.
Инструкция
Для просмотра и редактирования файлов своего шаблона воспользуйтесь программой FileZilla. С ее помощью вы можете работать с конфигурационными файлами в online-режиме. Как правило, для изменения дизайна сайта обрабатывают 3 файла: index.php, template.css и templateDetails.xml.
«Шапкой» сайта называется элемент страницы, который идет от самого верха до начала контента, отсюда и такое название. Также его называют хедером (header). Как правило, в «шапке» сайта подлежит замене только логотип или любое другое изображение (logo.jpg). Расположение логотипа сайта находится в файле template.css. Откройте его при помощи Notepad++.
Для выполнения поиска какого-либо значения необходимо воспользоваться опцией «Поиск элемента»: нажмите сочетание клавиш Ctrl + F и в пустом поле введите искомое значение. Если вы хотите изменить ширину или высоту изображения в «шапке», введите в строке поиска слово header и нажмите клавишу Enter.
Вам будет интересно:Как вставить в HTML iframe: пример использования
Ниже искомого слова вы увидите строки: Height (высота) и Width (ширина). Измените эти значения, затем нажмите сочетание клавиш Ctrl + S, чтобы сохранить изменения. В появившемся диалоговом окне FileZilla нажмите кнопку «Да».
Перейдите на сайт, чтобы просмотреть изменения. Если вас они не устраивают, вернитесь к файлу и введите новые значения.
Для изменения размера и наименования шрифта на главной странице сайта, воспользуйтесь поиском. Введите слово body и нажмите клавишу Enter. Ниже этого оператора есть строки font-family (наименование) и font-size (размер или кегль). Измените их значения, сохраните изменения и перейдите к сайту, чтобы их просмотреть.
Для изменения характера отображения ссылок необходимо в поисковой форме ввести поочередно значения a: link (стандартная ссылка), a: visited (посещенная ссылка) и a: hover (активная ссылка). Нажмите Enter, чтобы найти эти элементы в файле template.css.
Отредактируйте параметры font-size (размер шрифта) и color (цвет ссылки). После их изменения вы наверняка заметите, что не все ссылки приобрели другой цвет или размер шрифта. В этом случае вам необходимо искать альтернативные варианты размещения ссылок. К примеру, те, которые остались неизменны, располагаются в главном меню, следовательно, вам необходимо произвести поиск созвучного элемента.
Введите в поиск слово «Главное» и нажмите Enter. Скорее всего, вы окажетесь рядом с элементами left col link и left col current link, значение которых вам необходимо изменить. После их редактирования сохраните результат и перейдите к странице сайта, все ссылки, находящиеся на загруженной странице, должны внешне измениться.
Видео по теме
Совет 3: Как изменить фон сайта
Если фон страниц вашего сайта состоит из одной картинки, которая имеет ширину сайта и размножается по вертикали, то поменять его можно только редактированием этой картинки в графическом редакторе. А если фон формируется в коде страниц, то их можно изменить, воспользовавшись инструкциями приведенными ниже.
Инструкция
Чтобы изменить фон, сначала надо определить - каким образом он задан в текущей версии страниц сайта. Для этого следует открыть исходный код страницы, лежащей на сервере. Это можно сделать обычным текстовым редактором, подойдет стандартный Блокнот. А если вы используете какую либо систему управления сайтом, то страницу можно отредактировать прямо в браузере посредством встроенного редактора страниц.HTML-код страницы (HTML - HyperText Markup Language, «язык разметки гипертекста») состоит из строк с инструкциями для браузера, описывающими типы, внешний вид и расположение каждого элемента веб-страницы. Эти инструкции называют «тегами» и они сгруппированы в блоки, один из который начинается с открывающего тега
и заканчивается закрывающим тегом . Согласно стандартам языка HTML в открывающем теге можно задать параметры фона страницы. Делается это размещением в нем атрибута bgcolor:Здесь задан зеленый цвет для фона этой страницы. Некоторые цвета по стандартам HTML имеют собственные имена - например, Chocolate или Gainsboro, но обычно используют шестнадцатеричные коды цветов:Если цвет фона, задан этим способом, вам следует, найти в коде страницы тег body и заменить значение атрибута bgcolor на нужное вам.В страницах с более сложным дизайном для описания внешнего вида чаще используют CSS (Cascading Style Sheets - «каскадные таблицы стилей»). CSS - это язык, созданный именно для описания внешнего вида элементов html-документа. Блоки CSS-кода могут быть либо включены в код страницы, содержаться в отдельном файле с расширением "css" и подключаться к странице специальной инструкцией в исходном коде страницы.Вам следует найти в коде страницы тег А если после тега