Работа с шаблоном движка

Введение

Данная статья вкраце опишет принцип работы с элементами шаблона движка, тут не будет описываться сами технологии css и html, предпологается, что Вы ими хоть как-то, да владете, если же нет, то самоучитель по html тут, а по css тут. Технологии довольно простые, я думаю Вы легко освоите их, если будет на то желание. В противном случае, если самому что-либо делать по шаблону у Вас нет возможности, то Вы всегда можете обратиться к команде разработчиков GameCMS(тут скоро будет ссылка), они выполят любые Ваши требования, начиная от мелких изменений стандартного шаблона, заканчивая полноценнм уинкальным, индивидуальным шаблоном, за небольшую оплату.

 

Что такое инспектор кода?

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

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

 

Пример #1

На примере редактирования элемента, изображенного на скрине ниже, постараюсь объяснить как, например, поменять цвет элемента, отображенного на скриншоте ниже (надпись: "Гл, администратор")

Нажимаем на нее правой кнопкой мыши, открываем инспектор кода(исследовать элемент), смотрим где и в каком файле расположена строка, отвечающая за цвет этого элемента. Для этого, нам необходимо знать, что цвет текста задает css свойство color. Смотрим на скрин ниже, перемещаемся по стрелкам и узнаем то, что нам надо(нужный файл и строка свойства).

Далее, (внимание!), меняем значение свойства не в этом месте, а копируем его и вставляем со своим значением в файл css/mystyles.css, это требуется для того, чтобы ваши изменения не пропадали при обновлениях, ибо все файлы, кроме mystyles.css могут заменяться при установке обновления.

Пример. Скопировали в файл mystyles.css, изменив белый цвет "color: RGB(255, 255, 255);" на черный " color: RGB(0, 0, 0);":

Сохраняем, смотрим результат:

Наш стиль применился. Аналогичным методом редактируются и другие css свойства других html элементов.

 

Пример #2

Мы хотим изменить цвет кнопки "Отправить" с белого на зелёный.

Подводим мышку на эту кнопку, жмём правую кнопку, открываем инспектор кода.

В данном случае видем стили для класса btn-default а именно параметр: background-color #FFF который задаёт белый цвет кнопке. Открываем файл стилей mystyles.css (Собственные стили писать только сюда, иначе при любом обновление ваши стили могут быть сброшены)

Теперь пишем простые строки:

.btn-default {
    background-color #60c272;
}

Ну вот и всё, кнопка у нас стала зелёная.

 

Как поменять ту или иную картинку?

Делается просто, кликаете на картинку правой кнопкой мыши, копируете ссылку на нее(пункт "Копировать ссылку на изображение"), вствляете скопированную ссылку в блокнот и смотрите в каком каталоге размещено ваше изображение, если ссылка вида: "https://demo.gamecms.ru/templates/flat/img/g_logo.jpg", это значит, что изображение лежит в каталоге: "templates/flat/img/g_logo.jpg", начиная с корневой директории движка. Вы можете найти и заменить ее либо через шаблонизатор движка, либо же через ftp менеджер.

 

Продолжение >> Часть 2

Контакты

Поделиться

Поделиться


Тиц

Индекс цитирования