Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Меняем шрифт высоту букв, цвет в редакторе Атом

Поддержи проект!!! smile

Изменить шрифт Атом, что мы имеем ввиду, когда говорим изменить шрифт - это изменить, высоту букв, цвет букв, сам шрифт, т.е. его написание! Я расскажу вам универсальный способ с помощью которого можно изменить любый шрифты, во всей программе Атом.

Подробно о шрифтах в редакторе кода Атом.

  1. Меняем шрифт во вкалдке проект в атоме.
  2. Шрифт во вкладке настройки цвет и размер.
  3. Меняем шрифт в главном окне настроек Атом.

  1. Меняем шрифт во вкалдке проект в атоме.

    Вы знаете, что программа Атом - это своего рода браузер, в котором можно менять стили везде, где вам вздумается!

    В данном пункте мы будем менять шрифт во вкладке "проект"(projekt)? здесь мы видим, что шрифт тусклый - я хочу его изменить на белый, ну и заодно изменим сам шрифт и высоту мы тоже изменим... а то нифига не видно... :

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Меняем шрифт во вкалдке проект в атоме.
    Нам нужна кнопка исследовать элемент, как вы знаете в Яндекс браузер и Google Chrome - это кнопка F12(поэтому в Атоме я так же и переделал горячую клавишу на F12).

    Если вы совсем не понимаете о чем речь, то нажимаем сочетание клавиш "ctrl + shift + i" или:

    меню - вид - разработчик - показать dev панель(справа будет написана горячая клавиша) :
    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Меняем шрифт во вкалдке проект в атоме.
    Итак! погнали

    После того, как у вас открылась панель с кодом, как в браузере

    Нажимаем на стрелку.

    Наводим на нужный элемент во вкладке проект - нажимаем.

    В панели показывается элемент дерева Dom + справа же есть стили, которые принадлежат этому элементу.

    Меняем, какой-то из видимых стихией, например цвет шрифта сделайте красным, чтобы понять - вы нашли то, что искали и именно этот ли стиль отвечает за данный элемент.

    Мы нашли стили для вкладки проект - активных кнопок.

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!После того, как  у вас открылась панель с кодом, как в браузере
    Открываем файл стилей styles.less - записываем туда те стили, которые были изменены:
    Css:

    .list-group li:not(.list-nested-item).selected, .list-tree li:not(.list-nested-item).selected, .list-group li.list-nested-item.selected > .list-item, .list-tree li.list-nested-item.selected > .list-item {

    color: #f00808;

    }

    Далее находим общие стили для других кнопок в проекте - поступаем аналогично:

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!После того, как  у вас открылась панель с кодом, как в браузере
    Css:

    Добавим высоту строки "line-height" и размер шрифта:

    .list-group li:not(.list-nested-item), .list-tree li:not(.list-nested-item), .list-group li.list-nested-item > .list-item, .list-tree li.list-nested-item > .list-item {

    color: #fff;

    line-height: 26px;

    font-size: 19px;

    }


  2. Шрифт во вкладке настройки цвет и размер.

    Поступаем аналогично, что бы о описано выше...

    Открываем исследовать код, нажимаем стрелку

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Шрифт во вкладке настройки цвет и размер.

    .config-menu {

    font-size: 20px;

    }

    НЕ активные кнопки settings

    .settings-view .config-menu .nav > li > a {

    color: aqua;

    }

    Активная кнопка settings

    .settings-view .config-menu .nav > li.active > a {

    color: #0035ff;

    background-color: #ffffff;

    }

    Активная кнопка settings


  3. Меняем шрифт в главном окне настроек Атом.

    В общем... процесс изменения стилей текста, надписей в редакторе Атом надеюсь понятно! Если вы такое проделывали в браузере, то это тоже самое! Ничем не отличается!

    .settings-view .section:first-child, .settings-view .section:last-child {

    font-size: 17px;

    font-family: monospace;

    }

    .settings-view .text {

    color: #f00;

    }

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Меняем шрифт в главном окне настроек Атом.


Последняя дата редактирования : 06.04.2021 19:26
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Изменить шрифт Атом

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.