Предположим код css у меня будет, но как его применить к выбранному слову в тексте записи. Вставлял в гутенберге в поле дополнительные стили css, ничего не произошло. Может кто подскажет как это сделать?
background: #f7f7f7;
border-color: #ccc;
box-shadow: 0 1px 0 #ccc;
color: #555;
vertical-align: top;
CSS с кнопки «Создать тему». Примерно так такие слова и делаются. Только оберните его во что-нибудь.
-
Ответ изменён 5 лет, 9 месяцев назад пользователем
ren334.
@ren334 я не шарю… как его вставить на выбранное слово в записи? вставлял в дополнительные стили css — add_editor_style( ‘css/text.css’ );
я не шарю…
именно для этого я и дал вам ссылку
Объяснять довольно долго. Оборачиваете слово в тег нужное слово, например css в вашем предложении.
<p>Предположим код <span class="truba"">css</span> //здесь обернул нужное слово в тег
у меня будет, но как его применить к выбранному слову в тексте записи. Вставлял в гутенберге в поле дополнительные стили css, ничего не произошло. Может кто подскажет как это сделать?</p>
Я обернул нужное слово в предложении в тег <span> и присвоил ему класс .truba
Теперь добавляем в файл style.css следующее:
.truba {
background: #f7f7f7;
border-color: #ccc;
box-shadow: -1px 1px 1px #ccc;
color: #555;
vertical-align: top;
}
Стиль применен. Данный класс применяем ко всем словам.
Если хотите изменить цвет при наведении мыши на слово, например, на красный, делаем так:
.truba:hover {
background: #ff0707;
border-color: #23282d;
box-shadow: -1px 1px 1px #ca2b2b;
color: #000;
vertical-align: top;
}
Добавляем сей код туда же. Далее экспериментируйте, ищите новые команды. Изучите режим разработчика в браузере. Там можно набивать код и смотреть результаты в режиме реального времени, а потом просто добавлять в файл style.css
@tuxfighter форум и создан для того, чтобы люди делились знаниями. Это тоже самое, что при покупки куриного мяса в магазине будут выдавать цыплёнка и пособие по его уходу, а вместо овощей — пачку семян и мешок земли. Вместо бензина на заправке выдавать нефть и учебник химии.
@tuxfighter форум и создан для того, чтобы люди делились знаниями.
1. CSS не относиться к ВП ни коем образом. От слова «совсем»
2. Здесь нет вывески «Бесплатное обучение CSS за 15 уроков»
Когда вы придете на форум строителей, вы начнете просить, что бы вам прочитали курс сопромата? или инженерной графики?
@ren334 Благодарствую. Правда ничего не произошло после добавление кода, но буду знать в каком направлении «копать»
Вы сначала при работе и исходным кодом добавьте нужный тег с нужным классом к слову. В классическом редакторе проблем это не составит. После добавьте стили для этого тега. Потом можете присваивать тег с нужным классом ко всем словам.
@ren334 Я открыл сайт где есть подобная кнопка, нашёл код и вставил его прямо в запись в режиме хтмл. Работает.
Код следующий: <span style=»font-size: 90%; background: #f8fafa; color: #1A202D; margin: 0 4px; padding: 0 2px; border: #809aa6 1px solid; border-radius: 3px; display: inline-block; box-shadow: 1px 1px 1px #595858; min-width: 18px; line-height: 21px; text-align: center; height: 20px;»>текст</span>
открыл сайт где есть подобная кнопка, нашёл код и вставил его прямо в запись в режиме хтмл. Работает.
И это халабуду вам придется вставлять каждый раз при создании нового текста. Проще в style.css создать новый класс, добавить это туда. И достаточно будет добавлять
<span class="class-name">Текст</span>
И делайте все в рамках дочерней темы. Иначе при обновлении все слетит и ваш пользовательский код затрется.
@ren334 я вставить вот такой код в стили http://prntscr.com/neaq6i
потом в записи вставил вот такой код <span class=»text»>Текст</span> . Но ничего не происходит, что я делаю не так? Код добавлял в файл main.css. Так как в стиле.ксс написано — The main css stylesheet of the Hueman theme is located in /assets/front/css/main.css.
Сделал дочернею тему и вставил код туда, вроде всё получилось, спасибо @ren334
@wordprosik Всегда пожалуйста. Только на будущее. Лучше такие названия стилей, как .text .number и тому подобное лучше не использовать. А вот .nomerok сойдет. Объясню, почему у вас получилось после использования в дочерней теме.
Есть .text с определенным кодом в основной теме. Но у кода для этого же стиля в дочерней теме будет более высокий приоритет, что значит, что вы, сами того не зная, переиначили уже существующий стиль.
Замените название на то, что не будет конфликтовать, .texrtische например. И не используйте идентификаторы, классы, пользовательские функции с распространенными названиями. Позаковырестей лучше.
