Привет! Хотите изменить на своём сайте CSS стили? Думаете что это сложно? Уделите немного внимания данной записи и вы узнаете как можно очень просто менять CSS стили на любом сайте WordPress! Вам не нужно быть продвинутым вебмастером, изучать css стили и прочие тонкости, всё гораздо проще. Всё очень просто и быстро! Смотрите далее!
Как изменить CSS стили на сайте WordPress
Зайдите на свой сайт, нажмите правой кнопкой мыши по любому элементу сайта который вы хотите изменить. В открывшемся окне нажмите на вкладку – Просмотреть код. В примере мы изменим цвет названия страниц в меню сайта. Таким образом можно будет изменять абсолютно любые стили сайта.
Далее, в правой части экрана у вас откроется окно с исходным кодом элемента сайта, для которого вы открыли код. Здесь нас интересуют стили, они будут отображаться в окне на вкладке – Styles. По названию стилей и по цвету, можно сразу определить какая часть CSS стиля нам нужно для её изменения. На скриншоте показано отрывок CSS стиля с названием – main-menu и белым цветом (как меню на сайте), то что нам надо.
Есть два варианта изменения CSS стилей.
1 вариант с помощью плагина
Первый вариант очень хорошо подойдёт для всех сайтов на CMS WordPress. После того как мы нашли нужные нам CSS стили, вам необходимо установить на свой сайт плагин – Simple Custom CSS. Установить данный плагин можно прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, копируем нужную нам часть css стилей из окна просмотра кода. Обязательно нужно скопировать всю часть, от названия стиля и до закрывающей скобки (как на скриншоте ниже).
Далее, переходим на страницу плагина Simple Custom CSS. Перейдите на страницу: Внешний вид – Custom CSS. Вставляем в поле скопированную часть css кода, меняем стили (на скриншоте ниже уже изменён цвет) и жмём на кнопку – Update Custom CSS.
Далее, переходим на сайт и смотрим, цвет страниц в меню изменился на чёрный, то есть так как и указано в наших css стилях. HTML код чёрного цвета – #000000.
Точно также меняются и все остальные стили, размер, цвет, шрифт, бордюр, набивка, рамка и т.д. Открываете любой справочник с обозначениями CSS стилей и меняете стили так как вам надо.
Внимание! CSS стили лучше переносить непосредственно на WordPress. Внешний вид – Настроить – Дополнительные стили. То есть, плагин Simple Custom CSS, можно не использовать!
2 вариант меняем стили в css файлах сайта
Знать бы где находятся нужные нам CSS стили, а поменять их не так-то и сложно, поменял значения и всё готово. Как раз с помощью просмотра кода элемента в окне браузера вы можете очень просто узнать где находятся нужные вам CSS стили. Снова зайдите на свой сайт, нажмите правой кнопкой мыши по любому элементу вашего сайта, в открывшемся окне нажмите на вкладку – Просмотреть код.
В окне просмотра кода, возле каждого css стиля, с правой стороны будет отображаться ссылка, наведите на неё курсор мыши, у вас появится подсказка с расположением данного стиля. То есть, вам покажут в какой именно папке и файле находится данный css стиль, который вам нужно изменить.
Теперь вам лишь останется зайти в свою корневую директорию вашего сайта на хостинге, найти данный файл, следуя пути указанному в подсказке и изменить CSS стили. Как видите если разобраться, то всё очень просто!
Остались вопросы? Напиши комментарий! Удачи!
Привет!
Илья, извини, пожалуйста, я первый раз не там ответ оставила.
Вот, дублирую:
Привет, Илья!)
Вот это код сделать страницу сайта прозрачной:
#content {
background-color: #ffffff;
opacity:0.8;
padding-right:50px;margin-top:40px; text-align: justify; border-right: 1px solid #e3e3e3;}
На прозрачной странице и текст и фото тоже теряют насыщенность цвета.
Ты знаешь как это исключить? Как оставить фото не прозрачными?
Спасибо)
Привет, изменить CSS надо.
Привет! Отлично что это возможно! Думала не реально)
Илья, напиши пожалуйста как исправить мою проблему.
У меня весь-весь текст и везде на сайте подчёркнутый. Как это убрать?
Спасибо за подсказки, я только начинаю разбираться)
Прям так сразу не могу тебе сказать, надо заходить на сайт, разбираться в CSS стилях.
Добрый день, Илья! У меня на десктопе и в мобильной версии сейчас в списке товаров фото – слева, а краткое описание – справа. На компьютере хорошо смотрится, а на мобилке хочется переставить картинку над кратким описанием и заголовком. Как это сделать? Именно с размещением не понимаю. Как указать стили для мобильной версии я знаю. Помогите, пожалуйста.
Здравствуйте. Надо играться со стилями margin и padding. Внешний вид – Настроить – Woocommerce, смотрели тут настройки?
Спасибо! Всё четко и понятно:)