Стили сайта: минимализм, ретро, футуризм, гранж, Metro и др. – Классификация стилей и направлений в дизайне сайтов

Статьи по теме:

Выбор стилистики сайта

Работа над веб-дизайном сайта складывается из нескольких аспектов — разработка структуры и логики сайта с учетом удобства пользования, создание отдельных элементов графического оформления и, безусловно, выбор подходящей стилистики сайта. От стиля веб-страниц в немалой степени зависит то, запомнятся ли они пользователю, будет ли ему интересно просматривать страницы и захочет ли он вернуться на сайт снова. То есть выбор стилистики сайта является одним из наиболее важных аспектов в веб-дизайне.

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

Тем не менее, сегодня можно найти ряд формулировок, касающихся идентификации стиля в веб-дизайне. В частности, под стилем в дизайне сайта понимают какое-либо идейное или художественное единство всех элементов Интернет-ресурса, призванное сделать восприятие веб-страниц конкретной аудиторией более целостным. В более узком смысле стиль в веб-дизайне – это определенный набор взаимосвязанных визуальных элементов, направленных на обеспечение гармоничного и целостного вида веб-страниц.

Для того, чтобы идентифицировать тот или иной стиль в веб-дизайне, обычно обращают внимание на несколько важных моментов. Во-первых, это расположение объектов и отдельных блоков на страницах сайта относительно друг друга, а также их геометрические формы. Во-вторых, к стилистике относится и используемая на сайте цветовая гамма, которая должна не только формировать впечатление от веб-страниц и создавать нужное настроение, но и соответствовать общей идее сайта.

В-третьих, это выбираемые дизайнером шрифты и графические символы, которые будут использоваться на страницах сайта. Наконец, для каждого стиля в веб-дизайне присущи свои способы обработки изображений и технические приемы. Например, применение векторной, либо растровой обработки изображений, наличие или отсутствие 3D визуализации.

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

— Классический стиль

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

— Готический или органический

Отличительная черта этого стиля – использование неправильных органических форм, разнообразных коллажей из предметов или фотографий, абстрактных элементов и вертикальной прокрутки.

— Гранж

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

— Газетный стиль

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

— Минимализм

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

— Мультипликационный стиль

На сайте, оформленном в таком стиле, обычно присутствует какой-либо мультяшный герой, а сами веб-страницы оформляются преимущественно в светлых и ярких тонах. Наиболее часто мультипликационный стиль встречается на сайтах, продающих товары для детей.

— Футуристический стиль или хай-тек

В этом случае в оформлении Интернет-ресурса используется все, что так или иначе связано с роботами и фантастикой, в частности, различные трехмерные объемные конструкции, футуристические изделия из металла или каркасы моделей космических аппаратов. Шрифт используется преимущественно рубленый.

— Бизнес-стиль

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

— Промо-стиль

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

— Панковский стиль

Характеризуется хаотичным расположением объектов, использованием различных искажений, абстрактных элементов, случайным образом сгенерированных изображений, а также режущими слух звуками.

— Стиль Web 2.0

Пожалуй, один из самых популярных стилей в веб-дизайне в настоящий момент. Он отличается сравнительной простотой, применением слегка увеличенного размера шрифта, объемных эффектов, ярких цветов, блоков с закругленными углами и оригинальных иконок. Сайт в стиле Web 2.0 обычно включает в себя всего несколько колонок и максимально удобную навигацию для пользователей. Создание веб-страниц в таком стиле доступно и новичку, при этом данный стиль может гармонично сочетаться с другими.

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

Причина заключается в том, что над этими Интернет-ресурсами не довлеет прошлый опыт, то есть для них всемирная паутина является первой и единственной информационной средой. Соответственно, такие веб-сайты не испытывают никакого влияния со стороны других видов дизайна, например, дизайна полиграфии, и предлагают свои собственные идеи в плане оформления веб-страниц. При выборе стилистического оформления сайта также руководствуются простым правилом: чем больше на Интернет-ресурсе размещено информационного материала, тем проще должно быть оформление и лаконичнее стиль. Нередко излишне красочный и яркий стиль веб-страниц раздражает пользователей, поскольку за многочисленными визуальными и графическими элементами им приходиться с трудом отыскивать нужную им информацию.

основные принципы стиля, примеры сайтов

Необычный стиль ретро даже сейчас используется в веб-дизайне. Классический вариант в виде отдельных стилизованных блоков, иллюстраций из старых журналов, и современный, в виде рукописных шрифтов, приглушенных цветовых оттенков и фотографий с фильтрами под старину. В этой статье мы расскажем, в каком виде ретро-стиль присутствует в дизайне, рассмотрим его основные принципы и приведем примеры сайтов.

Что понимают под ретро-стилем в веб-дизайне

Перед тем как началось стремительное развитие технологий, дизайн включал в себя оформление журналов и газет, программ на телевидении, полиграфических материалов. Несмотря на то, что приемы, которые использовались в это время, считаются устаревшими, дизайнеры до сих пор применяют их в новых сферах дизайна, в частности, в вебе. Ретро-стилем считается стилистика 20-х — 80-х годов и подразделяется на несколько направлений:

• 20-е — 30-е годы. Эра женской эмансипации и революционного настроя. В моде черные и пурпурные цвета, джаз, аэропланы и кинематограф;
• послевоенные 40-е — 50-е годы. Наступает мода на классику, спокойные и безмятежные иллюстрации в духе new look стиля. Также набирает популярность пин-ап — направление в иллюстрации и фотографии, которое характеризуется яркими цветовыми оттенками, обычно изображаются красивые женщины в броских нарядах;
• 60-е — 70-е годы. Время Мэрилин Монро, Бриджит Бардо и Софи Лорен. В моде яркие принты, красный, розовый и синий цвета, легкость и непринужденность;
• 80-е годы. Время перестройки. Яркие цвета, геометрические формы, узоры и тотальное использование иконографики.

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

Принципы ретро-стиля

Принцип 1. Приглушенные цвета

В XX веке в типографиях не было такого высококачественного оборудования как сейчас. Поэтому полиграфия, которая печаталась в те годы, имела тусклые, как будто приглушенные цвета. В веб-дизайне тоже используется этот принцип и на все оттенки накладывают фильтры, чтобы цвета казались «старыми».

На примере используются почти пастельные цветовые оттенки. Кажется, будто дизайн немного «потертый», что возвращает нас в атмосферу тех годов, когда еще не было качественной печати и яркости цвета в полиграфии.

Такого эффекта можно добиться, применяя различные фильтры по типу «сепии», добавляя различные эффекты, например, потертости или царапины, или выставляя низкий уровень непрозрачности. Эффект от таких приемов — восприятие пользователем сайта как нечто устаревшего, но вместе с тем, обладающего особым шармом.

Принцип 2. Иллюстрации

Один из самых ярких и отличающих ретро стиль от других направлений в дизайне принципов — использование тематических иллюстраций. Благодаря картинкам можно легко отделить ретро стиль — настолько атмосферными они выглядят.

Иллюстрации в ретро стиле отличаются следующими характеристиками:

1. Цвет. Соблюдая первый принцип, оттенки в иллюстрациях обычно «состаренные», приглушенные.
2. Действие или предметы. Обычно на иллюстрациях изображают людей или предметы тех времен. Это может быть старая техника, например, старинный фотоаппарат, или ретро-автомобиль. Или картинка девушек в модных в то время платьев.
3. Отсутствие фона. Большинство ретро иллюстраций, используемых в веб-дизайне, вставляются в макет без фона и выделяются на странице. Так создается дополнительный эффект объема, который раньше был в моде. Хотя, плоские иллюстрации тоже используются в ретро стиле.

Пример использования иллюстраций на сайте в стиле ретро:

На примере дизайнеры используют фото-иллюстрацию старинного трамвая, на фоне видно фотографию с наложенным эффектом сепией. Интересно также использование различных маленьких картинок — стилизованного ключа, замочной скважины.

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

Однако, в современном веб-дизайне используют и фотографии, сделанные уже на качественную современную технику. Дизайнеры сочетают современность и ретро-вензели и получают интересные результаты. Например, на сайте одного отеля используются как тематические рисованные иллюстрации, так и профессиональные фотографии:

Главный экран сайта

Одна из страниц, посвященных описанию номеров

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

Принцип 3. Геометрические формы

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

Принцип 4. Иконки, значки, логотипы

Возвращаясь ко 2 принципу, связанному с иллюстрацией, нельзя не отметить еще одну отличительную черту — использование в ретро-стиле различных иконок, значков, узоров и вензелей.

На примере видно, что дизайнеры используют различные иконки и иллюстрации в винтажном стиле. Приглушенные цвета, создание объема с помощью теней, рисованные иллюстрации и серый «газетный» фон создают неповторимую атмосферу и стильный дизайн.

Принцип 5. Уникальная типографика

Еще одна отличительная черта ретро-стиля — уникальная типографика. Раньше шрифтам уделяли особое внимание: как правило люди читали газеты и другую полиграфию, поэтому типографика имела огромное значение. В моде преобладали необычные шрифты, с помощью которых можно было не только привлечь внимание читателей, но и украсить макет.

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

Такая типографика выделяется, обращает внимание на текст и его содержимое. Шрифты ретро стиля часто используются в заголовках, чтобы привлечь внимание пользователей. Обычно применяют шрифты с засечками, часто все буквы — заглавные.

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

Принцип 6. Паттерны и текстуры

Также особенностью ретро-стиля является использование паттернов и текстур в дизайне. Это может быть имитация дерева или бумаги, газетной статьи, книжных страниц и других натуральных материалов. Например:

Принцип 7. Выделяющиеся блоки

Долгое время в веб-дизайне была мода на объемные блоки, которые выделялись на основном фоне страницы. Такой прием присущ и ретро стилю.

На примере представлен такой подход. Основная контентная часть не распределена по всей ширине экрана, как распространено сегодня, а располагается отдельным выделенным блоком. Этот большой блок объемный, создается ощущение что фон страницы — это поверхность, а на поверхности лежит газета с информацией и иллюстрациями. Такой прием потихоньку уходит в прошлое, так как сейчас в моде расположение элементов на всю ширину, благодаря возможностям верстки, но иногда еще можно встретить такие элементы на сайтах.

Принцип 8. Тематичность

Одна из главных особенностей ретро стиля — тематичность ресурса. Обычные интернет-магазины или компании с услугами могут просто использовать плоский дизайн или минимализм — стили, которые подходят большинству сайтов. Больше об этих направлениях в веб-дизайне можно прочитать здесь (плоский дизайн) и здесь (минимализм). В случае с ретро дизайном, сайты обычно обладают узконаправленной тематикой, которая подчеркивает дух прошлого, или оформлены в стиле ретро для повышения узнаваемости бренда. Во втором случае фирменный стиль тесно связан с винтажной тематикой, для повышения доверия пользователей.

Принцип 9. Отдельные элементы

Не всегда ретро стиль используется по всему сайту. Иногда дизайнеры вставляют такие элементы, чтобы придать странице немного винтажности. Один из ярких примеров такого приема — всемирная газета The New York Times, которая уже давно представляет собой информационный ресурс в интернете, но не теряет своей атмосферы:

Дизайнеры постарались максимально перенести структуру газеты в интернет-ресурс. Расположение блоков, подпись «Today’s Paper», сегодняшнее число в левом углу и винтажный логотип напоминает читателю старую и привычную газету, погружает нас в атмосферу того времени, когда все новости узнавали из утренней почты.

Кроме структуры можно перенести на сайт и просто дизайн продукта:

Сайт представляет товары в винтажном стиле, используя интересные шрифты, приглушенные цвета. Несмотря на то, что на странице используются современные плоские формы, сам продукт создает атмосферу «крафтовой» старины.

Особенности юзабилити для стиля ретро

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

Что следует учитывать при проектировании макета сайта в ретро стиле:

1. Тематику сайта. Возможно, ретро стиль совсем не подходит компании и пользователь будет в явном недоумении от оформления. Особенно это касается тех компаний, которые предоставляют услуги в сфере digital. Пользователи ожидают от таких организаций в первую очередь современный дизайн и легкий интерфейс, а не явное обилие декоративных элементов, вензеля и изображения раритетной техники.
2. Особенности навигации. Если дизайнер решает использовать ретро стиль в качестве основы дизайна, нужно продумать навигацию так, чтобы элементы не выбивались из концепции. Скорее это будут традиционные навигационные элементы — горизонтальное меню, вертикальный скроллинг. Хотя, некоторые дизайнеры «модернизируют» ретро стиль и используют недавно вошедшее в моду меню-гамбургер.
3. Особенности анимации. Как правило, ретро стиль не подразумевает сложные анимационные эффекты и переходы между экранами. Иногда дизайнеры прибегают к динамическим эффектам, но стараются также их стилизовывать под ретро — это могут быть виджеты с часами, интересные решения для переходов и прочее.
4. Призывы к действию. Яркие иллюстрации, множество иконок могут отвлекать внимание пользователя от основных элементов призыва к действию — кнопок, веб-форм. Поэтому дизайнерам стоит учитывать расположение этих элементов относительно ярких деталей в дизайне и продумать, как можно привлечь внимание пользователя.

В целом, ретро-стиль для сайта — одно из свежих креативных решений в веб-дизайне. Он встречается не так часто, как популярный плоский дизайн или минимализм. Поэтому сайт в винтажном стиле может выделить компанию среди конкурентов и повысить уровень ее узнаваемости. При этом важно помнить, что стиль ретро нужно использовать только для подходящих тематик и помнить о юзабилити веб-страниц.

Студия дизайна IDBI создает дизайн сайтов в различных стилях — от традиционной классики до современного стиля хай-тек. Ретро-стиль — не исключение. Мы поможем предпринимателям подобрать подходящее направление в веб-дизайне для эффектного представления продукта в интернете и сделаем сайт максимально привлекательным и удобным для пользователей. Больше примеров наших работ в различных стилях можно посмотреть в разделе «Портфолио».

Установка собственных стилей для любого сайта / Sandbox / Habr

Со мной довольно часто случается так, что шрифты, цвета шрифтов и другие особенности некоторых сайтов неудобны для чтения с монитора. Обычно это очень мелкие шрифты — на зрение не жалуюсь, но читать текст с экрана монитора привык с расстояния сантиметров 70-80 (22″), откинувшись на спинку кресла. В большинстве случаев спасает ctrl+ / ctrl-, конечно частенько полученный результат выглядит мягко сказать не очень, но для чтения сгодится, особенно когда на сайте мы первый и возможно последний раз. А вот что делать, когда сайт мы посещаем постоянно и результат хочется более приятный для глаз?

Скажем так: до сих пор я мирился с неудобствами откручивая как уже сказал ctrl+, но совершенно недавно произошло нечто невероятное и (хабр извиняй) ужасное, шрифты хабра после такой операции перестали изменять свой размер, независимо от масштаба, сохраняются абсолютные значения размера шрифтов, неприемлемые для меня 13px. Некоторое время, переживал такое положение вещей с помощью F12 и установкой font-size для класса .post .content в нужное для меня значение (17px). Но долго с этим жить невозможно, т.к. эту процедуру в таком раскладе вещей нужно проделывать в каждой статье. Подумал, что надо как-то справляться с этой напастью.

Решение, которое пришло мне в голову первым (не самое совершенное): у меня для тестов на компьютере постоянно живет nginx, в лоб прописал я для него проксирующую конфигурацию, /etc/hosts habrahabr.ru как локальный адрес, но для некоторых файлов стилей подсовывал свои правленые файлы, для полноты картины вот конфигурация nginx:

в /etc/nginx/sites-available/habrahabr.ru

server {
    listen              80;
    server_name         www.habrahabr.ru habrahabr.ru;
    root                /var/www/habrahabr.ru/public/;
    access_log          /var/www/habrahabr.ru/log/access.log;
    error_log       /var/www/habrahabr.ru/log/error.log;
    rewrite_log         on;
    autoindex           on;
    resolver 8.8.8.8; 

    location / {
        proxy_pass http://$host:80;
     }

    location ~ styles/1374498586/_parts/comments\.css {
        alias /var/www/habrahabr.ru/public/comments.css;
    }

    location ~ styles/1374498586/_parts/posts\.css$ {
        alias /var/www/habrahabr.ru/public/posts.css;
    }

    location ~* ^.+\.(jpg|jpeg|gif|css|png|js|ico|bmp)$ {
       proxy_pass http://$host:80/$request_uri;
       access_log       off;
       expires          10d;
       break;
    }
}

Все отлично работало, но добавлять новый сайт не очень удобно, вполне терпимо но что-то смущало, тем более хотел поделиться решением.
Тогда я решил написать Extension (предварительный поиск результатов не дал) для хрома/хромиума т.к. пользуюсь им. Посмотрел статьи, доки, вроде ничего сложного справлюсь быстро. Иду в стандартную папку проектов, придумываю название для проекта mystyle и тут меня что-то торкнуло, забил это название в google дописав chrome extension. И о чудо оно есть, именно то, что нужно, но называется my-style. Дальше все очень просто, устанавливаем данное расширение, заходим на нужный сайт, нажимаем ctrl+m, справа появляется окно для дописывания своих стилей сайту, которые сразу применяются и сохраняются. Profit!

Любой сайт мы можем заставить выглядеть приемлемым для себя образом. Конечно, чтобы прописать свои стили нужны некоторые начальные знания css, но мы ведь на IT-ресурсе, если своих знаний не хватает, товарищи с соответствующими навыками наверняка найдутся рядом.

Немного моих стилей для habra:

body { 
 font-size:14px;
}
.post .content { 
  font-size:17px;
}
.comments_list .comment_item .message {
  font-size:17px;
}
.event .info .text {
  font-size:17px; 
}
.answer .message { 
  font-size:17px; 
}
.editor .text-holder textarea {
   font-size:14px;
}

К примеру вот как выглядел у меня хабр до изменений:
Масштаб 100%:

Масштаб 175%:

Т.е. шрифты сохраняют свое абсолютное мелкое значение.

Сейчас, масштаб 100%:

Спасибо за внимание. Надеюсь был полезен.

Расширение «Styles Tuner». Настраиваем стили сайтов под себя / Habr

В данной статье хочу рассказать о своем расширении для Firefox “Styles Tuner”, которое позволяет настроить цвета и шрифты любого сайта так, как это будет удобно Вам.

Для примера рассмотрим сайт rocklab.ru, на котором музыканты выкладывают свои произведения, общаются и оценивают композиции. Так уж повелось, что изначально сайт был создан темным, а шрифты на нем светлые, что соответствует его рок-направленности, но зачастую бывает неудобно для пользователей. Особенно, если проводить много времени, например, на форуме.

Ниже представлен демо-ролик работы расширения (без звука):

Итак, устанавливаем расширение с сайта addons.mozilla.org, открываем редактируемый сайт и нажимаем на иконку на панели браузера.

В боковой панели Firefox появляются пять иконок.

О назначении четырех последних поговорим позднее, а пока нажимаем на первую и переходим в режим редактирования стилей сайта.

Идея расширения в том, чтобы настроить стили сайта мог любой пользователей, даже тот, кто абсолютно не знаком с HTML и CSS. Программа проходит по всему сайту и выдает в боковой панели список элементов. Одинаковые теги с одинаковым классом показываются в панели как один блок.

Теперь, выбираем нужный нам элемент и приступаем к редактированию. Выбирать можно, как наведя на блок в боковой панели (при этом, элемент на странице будет выделен границей), так и кликнув на элемент на самой странице (при этом в боковой панели будет выделен блок управления элементом). Для отмены выделения на самой странице, нужно еще раз кликнуть на выделенный элемент.

Поскольку, фон сайта не совсем черный, а серый, начнем редактирование с цвета шрифтов, а в последнюю очередь заменим цвет фона.

Выбираем в боковой панели элемент и перетаскивая ползунок, делаем его Color черным.

Далее, изменим цвета ссылок, например, на синие:

Так же установим цвета ссылок постраничной навигации:

Ну и заключительным шагом будет установка светлого фона страницы.

Вот так, за четыре шага мы получили более удобный и читаемый контент.

Аналогично можно редактировать содержимое и всех остальных элементов сайта. Помимо изменения цветов шрифта и фона можно редактировать размер шрифта и выбирать семейство. Если Вы хотите вернуть авторские настройки для какого-либо элемента, просто кликаете на ссылку «Default».

Теперь рассмотрим назначение оставшихся четырех кнопок в верхней части боковой панели браузера.
Кнопка «Удалить изменения для данного сайта» предназначена для сброса Ваших собственных настроек сайта и возвращает его изначальный внешний вид, то есть делает сайт таким, каким его задумали создатели.

Кнопка «Удалить изменения для всех сайтов» удаляет все настройки для всех сайтов.

Кнопка «Настройки» позволяет настроить цветовую тему самого расширения, выбрать цвет границ, которыми будут выделяться блоки на странице, а так же имеет еще одну очень важную опцию «Время хранения изменений». Для того, чтобы не засорять память браузера, ненужные настройки, конечно, нужно удалять. Вот только вручную это делать неудобно, да и не каждый помнит, на каких сайтах он делал изменения.

Поэтому было решено дать пользователю возможность установить количество дней после последнего посещения им сайта, для которого он делал изменения, после истечения которого, эти изменения автоматически удаляются. Например, Вы перестали заходить на google, и через 10 дней все изменения для его интерфейса стерлись.

Ну и наконец, кнопка «Выйти из режима редактирования» удаляет список элементов из боковой панели и перезагружает открытую страницу сайта, но оставляет открытой боковую панель.

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

В ближайших планах: добавление возможности включения и отключения фонового изображения, а так же добавление возможности управления такими свойствами, как line-height и font-style.

Как определить стиль элемента на сайте и применить для него свои настройки?

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

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

Что делать?

Для примера буду использовать элементы на своем сайте InwebPress.ru.

1 шаг — Определение стиля конкретного элемента

На моем сайте мне не нравится размер шрифта названий записей. Он большой и занимает много места. Размер нужно уменьшить.

Определяем его стиль. Для этого правой кнопкой мыши я кликаю по названию записи и в контекстном меню выбираю пункт «Просмотреть код». Это в браузере Google Chrome. А в браузере Mozilla Firefox это «Исследовать элемент».

В браузере внизу, в специальном фрейме откроются Инструменты разработчика — DevTools. Само окно будет разделено на две части: слева — код HTML, справа — код CSS.

Наш заголовок в коде HTML слева выделен цветом, а справа представлены все стили, которые определяют характеристики внешнего вида элемента. Здесь задан цвет заголовка, его шрифт, размер, оформление ссылки по умолчанию, при наведении, отступы, насыщенность шрифта, вид курсора и т.д.

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

DevTools браузера не только видит все стили, но и показывает в каком конкретном файле этот стиль прописан.

Итак, наша задача найти размер шрифта.

Вот он:

Как видим, Название записи имеет размер 22 px.

Если вы сомневаетесь в том, тот ли это стиль, то вы можете прямо в правой части окна изменить параметр стиль. После изменения нажмите ENTER (или кликните в др. месте) и посмотрите на сайт.

Нашли свой стиль? Ок! Теперь нам нужно его применить для элемента, в моем случае это Название записи.

2 шаг — Применение нашего стиля

Чтобы это сделать существует несколько вариантов.

1) Правка файла стилей — style.css

Например, можно открыть файл со стилями, найти наш стиль и внести изменения, потом сохранить и залить новую версию файла на сайт. Но, после обновления шаблона все эти изменения придется вносить снова.

2) Правка файла стилей в дочерней теме

Чтобы не изменять основной файл стилей, разработчики часто в архив с шаблоном добавляют папку с дочерней темой. В этой папке есть также файл со стилями, в который можно вносить свои изменения без их потери после обновления. Это хороший вариант.

3) Вставить код стиля CSS в админке

Это вариант мне очень нравится. Вам не надо открывать редактор файлов в админке, или пользоваться FTP, а потом еще искать нужный стиль среди сотни, а то и тысячи строк кода.

Итак, нужный нам код выглядит так:

.content-box h3 a {
    font-size: 22px;
}

А нужно вставить так:

.content-box h3 a {
    font-size: 18px;
}

Где в админке нужно вставить этот код?

а) Настройки темы

Большинство современных шаблонов имеют в настройках раздел — Custom CSS
В этом разделе мы и вставляем код стиля. если такого раздела нет, то читаем статью дальше.

б) Через плагин

Я рекомендую использовать плагин WP Add Custom CSS. Он без настроек и всего с одним полем для вставки стилей CSS.
В это поле можно вставлять все наши стили для шаблона и для плагинов. Очень удобно и всегда под рукой.

После того, как вы сохранили свои настройки — перейдите на сайт и посмотрите как выглядят ваши элементы.

Мой результат:

Надеюсь вы осилили написанное и сможете теперь с легкостью применять на сайте свои стили CSS.