Update css in wordpress

How To Modify Your WordPress CSS Styles

In website development, coding files generate the look of a website.

Among coding files, some form the structure of the pages, while others define the styles of elements on your page.

Today, we’ll have a look at CSS or Cascading Style Sheet files that define the style of a webpage. These files are responsible for making things look better in Internet browsers. In WordPress, you can find the style.css file in the Themes folder.

The style.css file contains the CSS code snippets that affect the look of your site’s pages. If you need to change the look of your WordPress site, you may need to find the respective sections in the style.css file.

Now let’s proceed to know about the CSS.

Note: Before making any changes, we recommend backing up your site, so there wouldn’t be any issues later on if something breaks.

What Is CSS?

CSS (Cascading Style Sheets) is the language that defines the style of HTML documents. For elements on the pages, you can create CSS styles that define the position, structure, and presentation of the elements. An example of the CSS styles would be:

p < color: red; text-align: center; > 

In Content Management Systems like WordPress, CSS styles are controlled by theme files. That means you don’t have to code styles separately.

On the other hand, in manual website development, you may need to create styles separately.

Find And Edit WordPress CSS Styles

Once you configure WordPress and proceed to install your theme, you don’t have to deal with CSS.

Every WordPress theme contains its style.css file. You can find one in the /wp-content/themes/themename/ folder. In this article, we will use the Visual Composer Starter Theme as an example.

The CSS file in a WordPress theme defines the style, structure, and colors of a WordPress website. However, if you want to change the code snippets in the styles, you will need to alter CSS via the WordPress Dashboard.

Step 1

Login to WordPress dashboard and proceed to click on the Theme Editor in the Appearance menu.

Step 2

The next page shows your theme’s style.css file, along with an editor that lets you edit the CSS code.

Step 3

On the same page, you can see a list of your theme’s code files. If you need to alter a file, you can click on the one you like and edit the code in the Editor.

Step 4

After you make necessary changes in the CSS, click on Update File at the end to save changes.

Finding CSS Styles

In the WordPress dashboard editor, you can see your site’s style.css file for making changes.

Basic Information About Your WordPress Theme

At the top of the style.css, you can see the basic information for your WordPress theme. This section outlines the theme name, version, author, description, home page URL, license, and copyright text.

Primary Sections In A WordPress Theme’s CSS File

Next, you can see the basic sections (styles) or code structure names of your WordPress theme.

Finding The Code Snippets In The WordPress CSS File

Once you get the full list of styles in the WordPress theme, use CTRL+F to find different sections in the code. The main sections also contain sub-sections of the CSS code.

Finding CSS Styles With Chrome’s Inspect Feature

Alternatively, you can browse to the homepage of your site. Right-click on the section you want to change the CSS code for, and click on the Inspect in the short menu.

After clicking the Inspect option, you will see your browser screen has been divided into two sections.

Finding The Names Of CSS Styles On A Page

At the top of the right section, click on the arrow symbol and point at the different parts on the pages. As you point at the various parts on the page, you can see the respective CSS class or section name in the tooltip.

Edit The Style.css File

Now, get back to the style.css code in the WordPress editor. Search for the respective class or section in the code and make necessary changes. After you make changes, you can save the file and proceed to see the changes on the site.

Purpose Of The Primary Sections In The WordPress Style.css File

The following list contains essential sections in a WordPress style.css file.

• Typography: This section includes configuration on your site’s font styles, size, and colors.
• Header: The top section of your WordPress site is referred to as the Header. Usually, it contains the menu bar and logo.
• Posts: This section controls the way your site’s titles, fonts, colors, and size information are displayed.
• Sidebar: The CSS section that holds information about your site’s sidebar. You can change the code to make necessary changes to your site’s sidebar.
• Footer: This is the bottom section of your WordPress site. It contains the footer links, social icons, legal pages, and copyright text.

We defined primary sections of the WordPress’ style.css file. As a beginner, you can search for the desired sections in the file and make necessary changes.

Additional Places To Use CSS In A WordPress Website

You can also use the WordPress Additional CSS option to make necessary changes to your WordPress website.

Point at the Appearance in the left panel and click on Customize in the short menu.

On the next page, you can see the Additional CSS option.

Paste in the CSS code and save changes. You can see the results in the live customizer.

Precautions When Editing The WordPress Style.css File

• Before you proceed to edit your WordPress’ style.css file, make sure to back it up first.
• While editing the style.css file, take proper notes of the sections you edit, including opening and closing brackets and results in the browser.
• It is recommended to edit your style.css file locally on your computer. For this, you may need to install a local server on your computer and make the necessary changes to your site. Once you finalize your site’s style.css file, you can upload the updated style.css file to your hosting account.
• Use Chrome’s Inspect option to find the exact style sections on the web pages. Once you identify the sections, you can search your site’s style.css file for the sections and make necessary changes.

Conclusion

If you focus on the style.css file, you can get a list of your site’s theme CSS styles.

With that in hand, Chrome’s Inspect feature helps you find the style sections on your site’s pages. Proceed and make necessary changes, and see the results on the spot.

If, for example, you don’t prefer editing the style.css file, you can choose a lightweight theme while building your WordPress site.

To get more out of your theme, bundle it with a free WordPress drag and drop visual editor to customize how your site’s content will show on the pages.
Join the conversation in the comments, and let us know about your thoughts on dealing with the WordPress CSS styles.

Источник

Как редактировать CSS сайта WordPress

Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

CSS это

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

Сразу замечу, файлы CSS могут иметь пугающие размеры, но в них нет ничего сложного. Это очень простые, хотя и разнообразные, правила, написанные в простом синтаксисе.

Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: http://htmlbook.ru/ .

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

Где лежит файл style.css WordPress

Несколько прописных истин:

• Каждая тема WordPress имеет свой файл определяющий ее внешний вид.
• Редактирования файла style.css одной темы не затрагивает другие темы установленные на сайт;
• Перед редактированием любых файлов активной темы, сделайте резервную копию сайта, на случай фатальных ошибок редактирования и возвращения сайту рабочего состояния.

А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

Три способа редактировать CSS сайта WordPress

Предложу три варианта редактирования файла style.css.

Редактирование из панели администратора

Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

Справа вы видите список файлов темы, в поле редактора открывается содержимое файлов. Если у вас установлено несколько тем, обратите внимание на правый верхний угол. Там есть поле выбора темы. По умолчанию откроется активная тема, но редактировать можно любую установленную тему без её активации.

Совет: Ошибки в редактировании style.css не могут обрушить сайт, вы можете изуродовать только внешний вид. Поэтому, перед прямым редактированием из консоли можно обойтись без резервной копии сайта, достаточно сделать копию самого файла style.css и в случае неудачного редактирования вернуть файлу прежний вид.

Редактирование файла style.css по FTP

Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.

• Входите в каталог сайта по FTP;
• Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
• Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.

Оба способа редактирования относятся к прямому редактированию, «живого» файла активной темы. У прямого редактирования есть большой недостаток: при обновлении темы все ваши изменения потеряются и тема примет исходный внешний вид. Чтобы этого избежать используется способ дочерней темы.

Дочерняя тема WordPress

Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

На этом принципе основан и третий способ редактирования стилей.

Редактирование файла style.css с помощью плагинов

Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

Теперь не нужно редактировать style.css напрямую, достаточно вписать кусок кода css в поле редактора и изменения появятся на сайте. Причем при обновлении темы они не потеряются.

Как понять, что нужно редактировать

Если вы бегло не читаете CSS нужно воспользоваться онлайн инструментами, для чтения CSS и понять, что нужно редактировать.

Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

Показываю, как им пользоваться:

Например, хотим поменять заголовок сайта.

• Наводим на него мышь, через правую кнопку открываем «Код элемента»;

• Видим код HTML в правом поле и код CSS в левом поле;

• Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
• Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).

Для примера, я поменял онлайн размер шрифта названия.

• Нашли нужный кусок кода css;
• Копируем его;
• Переносим в текстовой редактор;
• Редактируем и переносим кусок кода в style.css дочерней темы или в поле редактора Jetpack.
• Таким образом, меняем любые стили активной темы.

Полезные ссылки

• Сервис проверки CSS от W3C (формат CSS3): http://jigsaw.w3.org/css-validator/
• Сервис сжатия CSS файлов: 15 Сервисов сжатия CSS файлов.

Другие статьи раздела: CMS WordPress

Похожие посты:

Источник