Создаем новый CSS стиль в WordPress

Сегодня мы научимся создавать простейшие CSS стили для текста в WordPress.

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

Если говорить о моем блоге, то данную работу созданных мною CSS стилей, вы можете наблюдать на ссылке “Читать полностью” (Цвет ссылки сделан в оранжевом тоне, которая теперь гармонирует с общей цветовой гаммой блога, а также при наведении на данную ссылку, она изменяет свой цвет на красный, а также создает вокруг себя небольшое оранжевое сияние.), а также работу новых созданных CSS стилей, вы можете увидеть у надписей: “Понравилась статья? Расскажи друзьям!” и “Следуй за мной в“, которые располагаются в каждой статье.

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

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

Для тех, кто уже “путешествовал” по просторам сайта Crazy-Files, вполне вероятно читали или по крайней мере видели статьи: “Как изменить шрифт в WordPress” и “Изменяем цвет ссылок через CSS стили в WordPress“, которые чрезвычайно облегчат понимание того, что мы вообще тут делаем. Так что советую пробежаться глазами по вышеуказанным статьям, что окажется полезным для понимания того, о чем сейчас пойдет речь, а также для саморазвития в среде WordPress.

Для того чтобы приступить к работе над новым CSS стилем, нам необходимо открыть шаблон CSS стилей в WordPress:

Админ-панель — Дизайн — Редактор — Список стилей (style.css)

После чего проматываем данный шаблон до самого низа.

В данном примере мы повторим стиль, который используют надписи: ”Понравилась статья? Расскажи друзьям!” и “Следуй за мной в“.

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

После название следуют скобки, в которых и будет заключен новый стиль. Скобки имеют следующий вид: { }

Что у нас получилось, а получилось следующее:

.tool1 { } tool1 – это мое произвольно придуманное название для нового css стиля.

Имейте ввиду, что данный стиль будет действовать только на обычный текст, а не на ссылки.

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

Первое что мы делаем, это задаем шрифт и его размер.

Размер шрифта задается в пикселях:

.tool1 {font:bolder 16px «Comic Sans MS», Verdana, Arial;}

Где: bolder – жирное начертание

16px – размер шрифта

“Comic Sans MS”, Verdana, Arial – стиль шрифта, который будет использоваться. Зачем же я написал целых 3 стиля, да и еще первый в кавычках? Все очень просто: каждый компьютер имеет свой набор стилей для шрифтов, и поэтому если первого стиля на компьютере посетителя не окажется, то будет использован 2-ой стиль, если же не окажется и второго стиля, то будет использован третий. Кавычки же компонуют данный стиль. Так как данный стиль состоит из трех слов, компьютер не сможет “понять” его, для этого и используются кавычки.

Далее устанавливаем отступ от нижней части текста до нижестоящего элемента. Это делается для того, чтобы текст, который будет использовать стиль “tool1″, не нависал и не наползал друг на друга. Данный интервал рассчитывается также как и размер шрифта — в пикселях.

.tool1 {font:bolder 16px «Comic Sans MS», Verdana, Arial; padding-bottom: 10px;}

В данном случае, я установил интервал в 10 px.

Теперь зададим цвет для шрифта. В моем случае, больше подойдет белый цвет, так как цвет фона -> черный.

.tool1 {font:bolder 16px «Comic Sans MS», Verdana, Arial; padding-bottom: 10px; color: white;}

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

.tool1 {font:bolder 16px «Comic Sans MS», Verdana, Arial; padding-bottom: 10px; color: white; text-shadow: 0 0 20px #5EB3C0;}

Где: text-shadow – это элемент, отвечающий за тень вокруг текста

0 0 20px – выставленные значения в px, для образования свечения.

#5EB3C0 – цвет свечения

Вот таким нехитрым способом, мы с вами создали новый CSS стиль для своего блога в WordPress.

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

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

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

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

Как вы заметили, в кавычках прописываем название, созданного вами в style.php, нового CSS стиля. А вместо: “Теги, отвечающие за вывод текста”, естественно элементы, отвечающие за вывод текста.

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

Таким образом, теперь заголовок этого плагина будет использовать созданный мною CSS стиль.

comments powered by HyperComments

Оставьте мне собщение