CSS стили изменить на сайте просто и быстро

CSS стили изменить сайт CSS

Привет! Хотите изменить на своём сайте CSS стили? Думаете что это сложно? Уделите немного внимания данной записи и вы узнаете как можно очень просто менять CSS стили на любом сайте WordPress! Вам не нужно быть продвинутым вебмастером, изучать css стили и прочие тонкости, всё гораздо проще. Всё очень просто и быстро! Смотрите далее!

 

 

Как изменить CSS стили на сайте WordPress

 

Зайдите на свой сайт, нажмите правой кнопкой мыши по любому элементу сайта который вы хотите изменить. В открывшемся окне нажмите на вкладку – Просмотреть код. В примере мы изменим цвет названия страниц в меню сайта. Таким образом можно будет изменять абсолютно любые стили сайта.

 

просмотреть код

 

Далее, в правой части экрана у вас откроется окно с исходным кодом элемента сайта, для которого вы открыли код. Здесь нас интересуют стили, они будут отображаться в окне на вкладке – Styles. По названию стилей и по цвету, можно сразу определить какая часть CSS стиля нам нужно для её изменения. На скриншоте показано отрывок CSS стиля с названием – main-menu и белым цветом (как меню на сайте), то что нам надо.

 

код элемента сайта

 

Есть два варианта изменения CSS стилей.

 

 

1 вариант с помощью плагина

 

Первый вариант очень хорошо подойдёт для всех сайтов на CMS WordPress. После того как мы нашли нужные нам CSS стили, вам необходимо установить на свой сайт плагин – Simple Custom CSS. Установить данный плагин можно прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

плагин custom css

 

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

 

css стили скопировать

 

Далее, переходим на страницу плагина Simple Custom CSS. Перейдите на страницу: Внешний видCustom CSS. Вставляем в поле скопированную часть css кода, меняем стили (на скриншоте ниже уже изменён цвет) и жмём на кнопку – Update Custom CSS.

 

custom css

 

Далее, переходим на сайт и смотрим, цвет страниц в меню изменился на чёрный, то есть так как и указано в наших css стилях. HTML код чёрного цвета – #000000.

 

css меню цвет стили

 

Точно также меняются и все остальные стили, размер, цвет, шрифт, бордюр, набивка, рамка и т.д. Открываете любой справочник с обозначениями CSS стилей и меняете стили так как вам надо.

 Внимание! CSS стили лучше переносить непосредственно на WordPress. Внешний видНастроитьДополнительные стили. То есть, плагин Simple Custom CSS, можно не использовать!

 

 

2 вариант меняем стили в css файлах сайта

 

Знать бы где находятся нужные нам CSS стили, а поменять их не так-то и сложно, поменял значения и всё готово. Как раз с помощью просмотра кода элемента в окне браузера вы можете очень просто узнать где находятся нужные вам CSS стили. Снова зайдите на свой сайт, нажмите правой кнопкой мыши по любому элементу вашего сайта, в открывшемся окне нажмите на вкладку – Просмотреть код.

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

 

расположение css стиля

 

Теперь вам лишь останется зайти в свою корневую директорию вашего сайта на хостинге, найти данный файл, следуя пути указанному в подсказке и изменить CSS стили. Как видите если разобраться, то всё очень просто!

 

Остались вопросы? Напиши комментарий! Удачи!

 

info-effect.ru
Добавить комментарий для Наталья Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Любовь

    Привет!
    Илья, извини, пожалуйста, я первый раз не там ответ оставила.
    Вот, дублирую:
    Привет, Илья!)
    Вот это код сделать страницу сайта прозрачной:
    #content {
    background-color: #ffffff;
    opacity:0.8;
    padding-right:50px;margin-top:40px; text-align: justify; border-right: 1px solid #e3e3e3;}

    На прозрачной странице и текст и фото тоже теряют насыщенность цвета.
    Ты знаешь как это исключить? Как оставить фото не прозрачными?
    Спасибо)

    Ответить
    1. Admin автор

      Привет, изменить CSS надо.

      Ответить
  2. Любовь

    Привет! Отлично что это возможно! Думала не реально)

    Ответить
  3. Любовь

    Илья, напиши пожалуйста как исправить мою проблему.
    У меня весь-весь текст и везде на сайте подчёркнутый. Как это убрать?
    Спасибо за подсказки, я только начинаю разбираться)

    Ответить
    1. Admin автор

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

      Ответить
  4. Наталья

    Добрый день, Илья! У меня на десктопе и в мобильной версии сейчас в списке товаров фото – слева, а краткое описание – справа. На компьютере хорошо смотрится, а на мобилке хочется переставить картинку над кратким описанием и заголовком. Как это сделать? Именно с размещением не понимаю. Как указать стили для мобильной версии я знаю. Помогите, пожалуйста.

    Ответить
    1. Admin автор

      Здравствуйте. Надо играться со стилями margin и padding. Внешний вид – Настроить – Woocommerce, смотрели тут настройки?

      Ответить
  5. Дмитрий

    Спасибо! Всё четко и понятно:)

    Ответить