Меню

Joomla как задать цвет



Joomla как задать цвет

Сегодня в очередной раз получил письмо от старого клиента, которому когда-то делал сайт на Joomla с просьбой «чуть-чуть подправить сайт», а именно — уменьшить отступы вокруг позиции модуля. Я думаю, эта проблема рано или поздно возникает почти у каждого владельца сайта на любом движке — хотя бы раз в год надо чуть освежать дизайн.

Если объем работы невелик, я своим клиентам делаю за символическую цену или, иногда, вообще бесплатно. Сложность в том, что у меня не всегда есть возможность сделать это быстро. Если вы хоть чуть-чуть разбираетесь в HTML и CSS, я думаю, это руководство будет вам полезно.

Возьмем простой пример — на сайте под Joomla3 нужно поменять цвет модулей в боковой колонке. В качестве примера буду использовать данный сайт.

Какой софт нам потребуется?

  1. Браузер, в котором можно смотреть исходный код страницы и, что важно — код отдельного элемента. Это позволяют делать почти все современные браузеры
  2. FTP-клиент — программа, позволяющий видеть сайт «изнутри» как папку на жестком диске. Я использую Total Commander (условно бесплатный).
  3. Notepad++ — текстовый редактор, оптимизированный для работы с кодом. В отличие от обычного «блокнота» имеет нумерацию строк, подсветку синтаксиса и возможность быстрого перехода к нужной строке. Подробнее о Notepad++

Алгоритм действий

1. Открываем страницу в браузере, находим на ней тот элемент, стиль которого нужно поменять.

2. Делаем по этому элементу правый клик мышкой, в появившемся контекстном меню выбираем пункт «посмотреть код элемента». Я использую Opera, в ней это выглядит так:

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

В правой панели — стиль элемента, в данном случае, это класс .well — мы видим, что в нем прописаны все цвета, отступы, границы, и прочие свойства. Более того, мы можем прямо здесь внести изменения в стиль — отключить элементы, задать им другие параметры и браузер покажет данный элемент с новыми настройками.

Только вот беда — как ни настраивай стиль через браузер, при следующей перезагрузке страницы все настройки восстановятся, что вполне логично — мы не можем через браузер вносить изменения в файле на сервере (к счастью :), нам нужно зайти на сервер по FTP и найти файл со стилями. Где искать?

В панели со стилями справа вверху указан путь к файлу css на сервере, а также номер строки в этом файле, где прописаны настройки стиля элемента. Чтобы поменять вид элемента на сайте нам нужно подправить файл стиля на сервере.

3. Подключаемся к сайту по FTP при поможи FTP-клиента. Для этого нам потребуется адрес хоста, логин и пароль к FTP-аккаунту — этой информацией вас должен снабдить хостинг-провайдер.

В нашем случае путь к файлу стиля такой: /templates/new-protostar/css/template.css (строка 2155)

Находим этот файл и открываем его в редакторе (я использую Notepad++) и ищем данную строку. В Notepad++ есть горячая клавиша Ctrl+G — перейти к строке. Вводим номер 2155 и нажимаем ОК. И вот, примерно что мы увидим:

Читайте также:  Как определить цвет сузуки

Теперь можно вносить изменения в файл (только не забудьте сделать бэкап — мало ли что?). После сохранения файл будет закачан обратно на сервер и изменения станут видны на сайте.

Этот вариант хорош тем, что он практически универсален — он применим не только для сайта на Joomla, но и на любом другом движке — главное, чтобы у вас был FTP-доступ и обозначенный выше набор программ (или их аналогов).

Если нет доступа FTP

Если у вас нет доступа по FTP, это можно сделать в редакторе шаблона через админку сайта.

В Joomla это делается через меню «расширения» / «менеджер шаблонов» /

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

В других движках также почти всегда есть возможность это сделать.

Этот метод плох тем, что позволяет редактировать только тот стиль, который зашит в шаблон. Если же вы используете какое-то альтернативное расширение для управления контентом, например, K2, вы не сможете добраться до файла CSS.

Да и производительность труда при использовании данного метода правки будет низкой — функциональность редактора не впечатляет.

«Element-style» — как его поменять?

Бывает так, что в окне просмотре CSS-свойств элемента фигурирует фраза element-style. Это означает, что свойства элемента прописаны не во внешнем CSS-файле, а в самом коде HTML или PHP. Поменять его сложнее, чем элемент, описанный во внешнем файле CSS, но все же выполнимо. Самая большая сложность — это найти тот самый файл, который содержит этот элемент — в Joomla они, как правило, раскиданы по всей папке public_html 🙂

Обычно описание элементов, общих для всего сайта, находится внутри шаблона — public_html/templates/имя шаблона/index.php, но если вы используете сторонние компоненты, то искать исходный код страниц следует в папке этих расширений public_html/components/имя компонента/views — а там уже смотреть исходный код php-файлов и html-шаблонов и искать нужный элемент и его описание. В очередной раз напоминаю — прежде чем вносить изменения в код, сделайте резерную копию.

Но самое обидное то, что даже если вы нашли и поменяли нужное свойство, при следующем обновлении компонента, все сбросится к значениям по умолчанию.

Источник

Joomla как задать цвет

В Joomla 3 существует быстрая возможность поменять цвет фона на любой другой. Данный метод применим для стандартного шаблона Protosta и для множества сторонних шаблонов, которые используют идентичный метод смены (80%).

Смена цвета фона для шаблона Protostar

1. Переходим в менеджер шаблонов.

2. Выбираем шаблон Protostar (тот, что со звездочкой).

3. Переходим в настройки шаблона и нажимаем на пункт: «Цвет фона».

4. Загружается палитра цветов в которой выбираем нужный цвет фона.

5. Сохраняем изменения.

Результат

После сохранения нового цвета фона, необходимо обновить страницу сайта.

Фон изменится на выбранный в палитре, и он будет использован для всех страниц сайта.

Просмотр цвета онлайн

Для установки идеально цвета сайта можно воспользоваться возможностями браузера.

Нажимаем кнопку F12.

В левом окошке нажимаем по тегу: body. Справа нажимаем по иконке с цветом.

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

Читайте также:  Почему моторное масло черного цвета

Когда цвет выбран нужно скопировать его во всё тоже поле: «Цвет фона».

Источник

Внешний вид шаблонов. Как редактировать шаблон Joomla

В данной статье мы рассмотрим, как редактировать внешний вид шаблона Joomla.

Любой человек, создающий сайт, хочет сделать свой сайт уникальным, ну или хотя бы не похожим на другие.

Сейчас почти все шаблоны для Joomla общедоступны, скачать и установить их на сайте может каждый.

Давайте на примере разберем видоизменение стандартного шаблона Beez5.

Изменение заднего фона шаблона (background)

Я использую браузер Chrome, нажимаем F12 или щелкаем правой клавишей мыши на нужном месте и нажимаем «Просмотр кода элемента».

Как видно на рисунке, за задний фон шаблона отвечает тег body со стилем background.

В стилях указан цвет фона #EEE и фоновая картинка (путь к ней). Именно эти параметры дают нам фон сайта.

Для их изменения нужно просто заменить эти параметры (указать новый цвет и путь к новой картинке).

Все изменения производятся в файле, который указан в панели разработчика, здесь это beez5.css, после двоеточия указана строка в которой нужно изменять параметр, у нас это 19 строка.

Путь к файлу можно посмотреть, если навести на название курсором.

Изменение логотипа сайта

Изменять логотип очень легко и для этого есть несколько способов.

Способ 1:

Так же, как и в первом способе, наводим курсор на логотип, щелкаем правой клавишей мыши и нажимаем Просмотр кода элемента. Все, что нам надо узнать, это адрес (путь) к логотипу. Теперь делаем свой логотип, даем ему такое же имя (fruits.gif) и просто заменяем на него старый логотип.

Способ 2:

Этот способ самый легкий, но встречается не во всех шаблонах. Идем в: Менеджер шаблонов — Beez5 (стиль) — Указываем логотип.

Способ 3:

Делаем все так же, только заменяем не файл, а путь к логотипу. Как видно на картинке, картинка вставлена через html, а не через css. Поэтому нужно изменять исходный код шаблона. Делается это легко:

Менеджер шаблонов — Beez5 — Изменить шаблон главной страницы.

Изменить ширину шаблона и блоков

Находим главный блок — div. Как видно на картинке, это

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

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

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

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

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

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

Источник

Изменение цвета ссылок и элементов стиля шаблона «Protostar» в Joomla 3

В этой статье рассмотрим более подробно работу со стилями шаблона «Protostar» в Joomla 3. А конкретно, изменение стиля шаблона Protostar на вкладке «Дополнительные параметры» поле «Цвет текста». Название этого поля в настройках стиля шаблона несёт в себе неправильную информацию. На самом деле, речь идёт об изменение цвета ссылок и элементов стиля. Именно это и будет рассмотрено ниже.

Читайте также:  Каким цветом выбрать шторы если обои серого цвета

Внешний вид сайта до изменения цвета ссылок и элементов стиля шаблона «Protostar»

Чтобы была видна и понятна работа того, что рассмотрено в этой статье, нужно сперва зафиксировать первоначальное состояние того, как выглядит сайт до изменения изменения цвета ссылок и элементов стиля:

Начальные настройки цвета ссылок и элементов стиля шаблона «Protostar»

В админке Joomla в «Менеджере шаблонов» в стиле шаблона «Protostar» поле «Цвет текста» имеет значение #0088cc , что соответствует голубому цвету, как видно на картинке выше:

Изменение цвета ссылок и элементов стиля шаблона «Protostar»

Поменяем знание поля «Цвет текста» с помощью клавиатуры, подставив другое значение, или с помощью мыши инструментом пипетка, кликнув на цветной квадратик в начале поля. После того, как цвет изменится, нужно сохранить изменения в настройке шаблона с помощью одной из кнопок в верхнем ряду кнопок управления:

Просмотр изменение цвета ссылок и элементов стиля шаблона «Protostar» на сайте

После того, как изменения сохранены, нужно перезагрузить страницу сайта и убедиться в том, что цвета ссылок и элементов стиля шаблона «Protostar» соответствуют ожиданиям.

Если нет, то их всегда можно поправить в поле «Цвет текста», вернувшись на вкладку «Дополнительные параметры» в стилях шаблона «Protostar» «Менеджере шаблонов».

Источник

Joomla 3.x. Как изменить основные цвета

Из этого туториала Вы узнаете, как изменить цветовую схему в шаблоне Joomla.

Большинство цветов шаблона можно изменить в файлах .CSS. Как правило, эти цвета задаются в файле template.css. Для того чтобы изменить цвета, Вы можете внести изменения в этот файл в админ панели Joomla.

Давайте, например, изменим цвет фона основной части страницы.

Исследуйте элемент, используя плагин Firebug для браузера FireFox:

Вы сможете увидеть файл и строку, где находится фрагмент кода, в который нужно внести изменения:

Войдите в вашу админ панель Joomla.

Перейдите на вкладку ‘Расширения’ > ‘Шаблоны’ (Extensions > Templates). Откройте вкладку ‘Шаблоны’ (Templates) слева:

Нажмите на ссылку ‘Детали и файлы ThemeXXX’ (ThemeXXX Details and Files), где XXX — номер вашего шаблона:

Откройте папку ‘CSS’, которая доступна слева:

Откройте файл ‘template.css’:

Найдите правило CSS, которое Вы ранее исследовали. Вы можете также искать по номеру строки:

Измените код цвета по умолчанию на нужный Вам.

Сохраните файл:

Обновите страницу для просмотра изменений.

Вы можете аналогично изменить цвета любого другого элемента на вашем сайте.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Похожие записи

This video guide is going to show you how to check available modules positions in Joomla 3.x template and how to use this information.

Из этого туториала Вы узнаете, как работать с модулем TM Ajax Contact Form.

Февраль 20, 2017

Из этого туториала Вы узнаете, как включить/отключить лайтбоксы (в компоненте JoomGallery) в шаблонах Joomla 3.x.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов

Источник