Перейти к содержимому


Как Быстро Найти Класс, В Котором Нужно Производить Изменения На Примере Браузера Google Chrome.


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 26 Март 2014 - 21:44

Как быстро найти класс, в котором нужно производить изменения на примере браузера Google Chrome.

Для начала заходим на сайт, смотрим то, что хотим изменить. Например надпись "Связаться с нами"
Для этого щелкаем правой кнопкой мыши прямо по фразе "Связаться с нами",
Жмем в выпадающем списке "Просмотр кода элемента":
Скрытый текст
У вас появляется код вашего сайта (слева широкая колонка) и стили вашего сайта (справа узкая колонка):

Скрытый текст
Курсор уже установлен на том блоке, по которому вы кликнули. При наведении мышкой на код одновременно начинает подсвечиваться область где данный блок располагается(прозрачным синим цветом) , так смотрим правильно ли мы выбрали блок.

В данном случае слова находяться в блоке <h4> </h4> и имеют класс указаный справа:


Скрытый текст

Вам нужно добавить параметр color:#FFF; , посмотреть как он будет выглядеть. Сделать это можно прямо в браузере изменяя стили соответствующего класса.:

Скрытый текст

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

Скрытый текст

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

Есть 3 варианта установки фона.
Простое указание цвета: background:#000; , где #000 - нужный вам цвет.
Указание картинки(при загрузке сайта, пока картинка не загрузилась фон по умолчанию белый): Background:url('Ссылка на нужное изображение') no-repeat;
Где url - ссылка на изображение , no-repeat - картинка поставится только 1 раз(делается для больших изображений, чтобы они не дублировались) , нужно указывать вместо "no-repeat" - "repeat" если вы используете паттерн(маленькое изображение, которое нужно растеражировать по всей области).
Указание картинки и цвета пока картинка загружается  Background:url('Ссылка на нужное изображение') #000 no-repeat; Где все тоже самое , что и в двух предыдущих случаях.

Продемонстрирую на подвале как найти нужный класс, и что в нем изменить , чтобы серый заменить на шоколадный:
Кликаем правой кнопкой прямо по подвалу в любое пустое место, жмем просмотр кода элемента:
Скрытый текст
Далее смотрим сразу в стили, видим что там уже прописан параметр background и видим имя класса, остается дело за малым(Изменить значение параметра background на нужное вам)
Скрытый текст

После этого копируем имя класса , быстрым поиском ищем в main.css нужный нам блок и вносим в него изменения.(вам я их уже внес)

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

#2 Виталий702

Виталий702

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 210 сообщений

Отправлено 05 Май 2015 - 11:44

5 БАЛЛОВ!!!!!!!!!!

#3 Бастет

Бастет

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 24 Май 2016 - 14:31

Просмотр сообщенияCastiel (26 Март 2014 - 21:44) писал:

Как быстро найти класс, в котором нужно производить изменения на примере браузера Google Chrome.

Для начала заходим на сайт, смотрим то, что хотим изменить. Например надпись "Связаться с нами"
Для этого щелкаем правой кнопкой мыши прямо по фразе "Связаться с нами",
Жмем в выпадающем списке "Просмотр кода элемента":
Скрытый текст
У вас появляется код вашего сайта (слева широкая колонка) и стили вашего сайта (справа узкая колонка):

Скрытый текст
Курсор уже установлен на том блоке, по которому вы кликнули. При наведении мышкой на код одновременно начинает подсвечиваться область где данный блок располагается(прозрачным синим цветом) , так смотрим правильно ли мы выбрали блок.

В данном случае слова находяться в блоке <h4> </h4> и имеют класс указаный справа:


Скрытый текст

Вам нужно добавить параметр color:#FFF; , посмотреть как он будет выглядеть. Сделать это можно прямо в браузере изменяя стили соответствующего класса.:

Скрытый текст

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

Скрытый текст

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

Есть 3 варианта установки фона.
Простое указание цвета: background:#000; , где #000 - нужный вам цвет.
Указание картинки(при загрузке сайта, пока картинка не загрузилась фон по умолчанию белый): Background:url('Ссылка на нужное изображение') no-repeat;
Где url - ссылка на изображение , no-repeat - картинка поставится только 1 раз(делается для больших изображений, чтобы они не дублировались) , нужно указывать вместо "no-repeat" - "repeat" если вы используете паттерн(маленькое изображение, которое нужно растеражировать по всей области).
Указание картинки и цвета пока картинка загружается  Background:url('Ссылка на нужное изображение') #000 no-repeat; Где все тоже самое , что и в двух предыдущих случаях.

Продемонстрирую на подвале как найти нужный класс, и что в нем изменить , чтобы серый заменить на шоколадный:
Кликаем правой кнопкой прямо по подвалу в любое пустое место, жмем просмотр кода элемента:
Скрытый текст
Далее смотрим сразу в стили, видим что там уже прописан параметр background и видим имя класса, остается дело за малым(Изменить значение параметра background на нужное вам)
Скрытый текст

После этого копируем имя класса , быстрым поиском ищем в main.css нужный нам блок и вносим в него изменения.(вам я их уже внес)

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

Здравствуйте, очень полезная инструкция, особенно для новичков. Но я не могу найти в бэк-офисе шаблон main.css. Помогите пожалуйста. Номер SL-386742. Спасибо.

#4 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 24 Май 2016 - 14:41

Просмотр сообщенияБастет (24 Май 2016 - 14:31) писал:

Здравствуйте, очень полезная инструкция, особенно для новичков. Но я не могу найти в бэк-офисе шаблон main.css. Помогите пожалуйста. Номер SL-386742. Спасибо.


Здравствуйте, у Вас этот файл называется style.css

#5 Бастет

Бастет

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 24 Май 2016 - 14:44

Просмотр сообщенияЮля123 (24 Май 2016 - 14:41) писал:

Здравствуйте, у Вас этот файл называется style.css
Спасибо Буду пробовать внеси изменения.

#6 belozerie

belozerie

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений

Отправлено 29 Апрель 2017 - 21:47

я тоже не могу найти main.css. помогите пожалуйста SL-413496

#7 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 30 Апрель 2017 - 10:28

Просмотр сообщенияbelozerie (29 Апрель 2017 - 21:47) писал:

я тоже не могу найти main.css. помогите пожалуйста SL-413496

Здравствуйте.
Шаблон main.css расположен у Вас в блоке Сайт - Редактор шаблонов - Стили - main.css
Если у Вас возникают трудности с поиском кода, то уточните, что именно требуется найти.

Прикрепленные изображения

  • Screenshot_1.png


#8 gel

gel

    Пользователь

  • Пользователи
  • PipPip
  • 48 сообщений

Отправлено 18 Июнь 2017 - 16:41

Здравствуйте!
Что такое "После этого копируем имя класса , быстрым поиском ищем в main.css нужный нам блок и вносим в него изменения"? Что такое "Быстрый поиск"? Спасибо заранее за ответ.

#9 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 18 Июнь 2017 - 19:38

Просмотр сообщенияgel (18 Июнь 2017 - 16:41) писал:

Здравствуйте!
Что такое "После этого копируем имя класса , быстрым поиском ищем в main.css нужный нам блок и вносим в него изменения"? Что такое "Быстрый поиск"? Спасибо заранее за ответ.
Быстрый поиск это поиск по странице, в данном случае по определённому шаблону.
Нужно установить курсор в поле с кодом шаблона  - нажать сочетание клавиш Ctrl + F и ввести в появившееся окно искомый код из браузера.
Скриншоты в приложении

Прикрепленные изображения

  • 7dff6e2ef514a473b3bacc5d67d904bf.png
  • 796fe4e3c98732690420ee004398a031.png





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных