ГлавнаяВёрстка WordPress › Как изменить цвет выделения текста в статье?


Как изменить цвет выделения текста в статье?


Как изменить цвет выделения текста в статье

Приветствую, всех читателей – Sozdaiblog.ru!

В этой статье Вы узнаете, как изменить цвет выделения текста на Вашем ресурсе.

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

Может Вам это никогда и не пригодиться, но Вы должны иметь представление об этом хаке.

Лично я его использовал, и он отлично влился в мою тему оформления. Можете выделить любую часть текста и посмотреть для наглядности.

По умолчанию в WordPress, цвет выделения текста – «Голубой». Что в свою очередь, может подходить не каждому. Решить эту проблему очень легко.

 

Как изменить цвет выделения текста.

Для изменения цвета выделения текста, скопируйте следующий код и вставьте его в самый конец Вашего файла – «style.css», который находиться в папке активной темы оформления:

 


::-moz-selection {
background-color: #6c7b8b;
color: #fff;
}
::selection {
background-color: #6c7b8b;
color: #fff;
}

 

Внутри этого кусочка стилей, Вы найдёте значения – «background-color» и просто – «color». При помощи этих элементов, задаётся цвет фона текста при выделении и цвет букв.

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

На сегодня всё. До новых статей...

 

С уважением, Дениc Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




71 комментарийА что думаете Вы?

  1. Владимир

    Здравствуй Денис . Я ещё не всё понимаю ,как функционионирует

    Вордпресс,но про таблицы стилей я знаю. Сегодня я скачал уроки от

    Евгения Попова по Вордпрессу. Думаю ,что в них я найду ответ ,как

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

    С уважением Владимир.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Владимир! Самое главное не бояться делать, а то очень многие пишут, что страшно применять что-то новое! Со временем разберётесь, это не космический корабль, а мы все поможем!

    [Ответить]

  2. blogrub

    Вопрос а на ютуб вы закрываете ссылки ноу?

    [Ответить]

    Денис Черников ответил:

    Раньше закрывал, а сейчас они внесли изменения в код и это практически невозможно, только «noindex» ставлю и всё, но от него то толку мало, он от передачи веса не спасает!

    [Ответить]

  3. Андрей

    спасибо за подсказку

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Заходите!

    [Ответить]

  4. Сергей

    Денис, спасибо большое за хак. Обязательно начну применять у себя на сайтах!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Мне кажется очень полезная вещичка!

    [Ответить]

  5. Алексей

    Денис, спасибо за подсказку!!!

    Для меня подобрать цвет ссылки было проблемой...

    Еще бы объяснил, как форму комментов, похожую на твою сделать...

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Алексей! На счёт комментов, всё регулируется в настройках, как и сколько отображать!

    [Ответить]

  6. Сергей

    Да идея интересная, да и просто стилистику текста можно приукрасить таким способом. Вообщем Респект!

    [Ответить]

    Денис Черников ответил:

    Спасибо! Очень простое решение и код маленький совсем!

    [Ответить]

  7. Олег

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

    [Ответить]

    Денис Черников ответил:

    Краткость сестра таланта, или ещё кого!)))

    [Ответить]

    Сергей ответил:

    Главное по делу, а во сколько строчек умещается не суть.

    [Ответить]

    Денис Черников ответил:

    Да, согласен! Главное донести до людей полезный материал! Иногда читаешь длинный пост, реально надоедает, тем более если нет изюминки от автора!

    [Ответить]

  8. Алексей

    Денис, зайди в гости по ссылке снизу...

    В своей статье на похожую тему я сделал ссылку на твой ресурс...

    [Ответить]

    Денис Черников ответил:

    Посмотрим, что у Вас там новенького!

    [Ответить]

  9. Таисия

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

    [Ответить]

    Денис Черников ответил:

    Нет, Таисия!

    Цвет задаётся через стили CSS, которые мы добавляем! Обновите кэш!

    [Ответить]

    Таисия ответил:

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

    Допустим я добавила статью и хочу выделить кусок текста, что я должна сделать?

    И еще этот кусок кода я должна вставить в самый конец файла после последней скобки или до скобки? Может я не туда его вставляю.

    [Ответить]

    Денис Черников ответил:

    Вы должны были в самом конце стилей вставить:

    ::-moz-selection {

    background-color: #6c7b8b;

    color: #fff;

    }

    ::selection {

    background-color: #6c7b8b;

    color: #fff;

    }

    В этом коде меняете код цвета — background-color: #6c7b8b;

    Тоесть — #6c7b8b

    В обеих строчках!

    Больше ничего не нужно делать!

    [Ответить]

  10. Анастасия

    А у меня все равно синим выделяет. Не реагирует мой блог на этот кусок кода. Кэш вроде чистила... Немного смущает двойное двоеточие перед selection, но может это я еще недоизучала до такого css =)

    [Ответить]

    Денис Черников ответил:

    Анастасия, а Вы в тот код который мы дописываем свой цвет вставляете?

    [Ответить]

    Анастасия ответил:

    Ну да))) Но даже если бы оставила — поменялось бы на Ваш цвет выделения, правильно ведь?)) А оно не меняется вообще.

    [Ответить]

    Денис Черников ответил:

    Анастасия, у меня всё работает, что ещё сказать!

    [Ответить]

  11. Таисия

    Денис, я убрала этот код, но мой сайт изменился, все теперь такое крупное. Раньше я не водила бегунком, когда на него заходила, а теперь даже в панели управления если я хочу добавить запись — визуальный редактор стал большим и надвинулся на правую часть страницы, где (опубликовать) Теперь выручайте, видимо это не подходит для моей темы. Что мне делать, как мне уменьшить процент видимости сайта? Я не знаю правильно ли я изъясняюсь. Ну зайдите сами посмотрите. Сама я не справлюсь. Уже и откат делала на 24 сентября, но ничего не изменилось, вообщем одни проблемы. Помогите пожалуйста.((

    [Ответить]

    Денис Черников ответил:

    Таисия, с этим кодом проблем нет! Вы делаете бэкапы? Если, да, то перезапишите файлы CSS и всё! На сайте у Вас был, он весь уехал в левую сторону, а видимость нормальная! Вспоминайте, что Вы делали и как. и делайте обратные действия!

    [Ответить]

  12. Таисия

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

    [Ответить]

    Денис Черников ответил:

    Может Вы в самом браузере ВИД изменили! Я к примеру вижу, что размер Вашего сайта не изменился, а что у Вас в админке творится я не представляю! Как я здесь помогу! Смотрите код, вспоминайте всё, все действия! Возьмите, скачайте новый движок и потихоньку меняйте файлы! По другому ни как! Движок переустановить попытайтесь! Я один раз 10 часов подряд бился, весь блог сломал, одну кавычку не там поставил. Все файлы движка перебирал, темы все пробовал, в итоге на новую тему всё прикрутил через откаты!

    [Ответить]

    Таисия ответил:

    Денис, я попробую поменять вид в браузере, но как это сделать? Подскажите.А если не поможет, дальше буду думать.

    [Ответить]

    Денис Черников ответил:

    В настройках самого браузера, вид, масштаб! Но если мой нормально отображается, значит не то!

    [Ответить]

  13. Таисия

    И если в браузере, тогда все сайты такими будут? Но Ваш сайт не изменился.

    [Ответить]

  14. Таисия

    Денис, я помимо вставки кода вчера в панели управления -инструменты-неправильные ссылки, исправляла их. Потом, когда заметила проблему, сделала откат. Сейчас зашла вновь туда в (неправильные ссылки), а там написано (Ошибка базы данных: «./taisia11_0/wp_blc_links» Таблица помечена как испорченная и должна быть отремонтирована) Что это значит Вы что нибудь понимаете? Ну это после отката точно появилось.

    [Ответить]

    Денис Черников ответил:

    На счёт этого, обратитесь в службу поддержки своего хостера! Здесь совет не дам, БД хитрая вещь, там моих знаний маловато будет!

    [Ответить]

  15. Таисия

    Уже пишу письмо.

    [Ответить]

    Денис Черников ответил:

    Молодцом!

    [Ответить]

  16. Таисия

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

    [Ответить]

    Денис Черников ответил:

    Скачайте новую тему оформления или ту же самую и переустановите! И наконец, удалите все эти баннеры!У меня Ваш сайт не увеличен, а просто съехал в левую сторону!

    [Ответить]

  17. Таисия

    Последний вопрос, Денис, у вас какой браузер?

    [Ответить]

    Денис Черников ответил:

    Mozilla Firefox и Opera!

    [Ответить]

  18. Татьяна

    Денис! Что-то я опять напортачила. Цвет выделения я изменила, все нормально с этим, но теперь при копировании его куда-нибудь на блог, сайт, в группу в соц сети у меня текст отображается на черном фоне и совсем не читается. Пробовала все настройки вернуть обратно, но никакой реакции :( (

    [Ответить]

    Татьяна ответил:

    можно хотя бы как-то фон посветлее поменять или уже ничего не изменишь и только заново переустанавливать тему?

    [Ответить]

    Татьяна ответил:

    Я кстати фон меняю когда, но при выделении в статье это видно, что поменялся а вот при копировании на другой сайт ничего не меняется

    [Ответить]

    Денис Черников ответил:

    Извините, Татьяна, я ничего не понял. Можно более подробно!

    [Ответить]

    Денис Черников ответил:

    Был у Вас в гостях, всё работает!

    [Ответить]

    Денис Черников ответил:

    Татьяна, Вы перед изменениями делали резервные копии файлов?

    [Ответить]

    Татьяна ответил:

    Да. Делала. Только пока не умею ими пользоваться к своему стыду.

    Насчет поподробнее (если еще актуально) В самом начале, на прошлой неделе, я изменила фон выделения текста на темно коричневый. Все получилось. Потом я решила сделать как у вас написано в другой статье (Защита от плагиата — Трюк № 1) чтобы вообще «фигушки что получилось» Получилось. Правда, потом я решила все-таки от этого отказаться, удалила строки которые за это отвечают и прописала команды для окошка, как у вас, при попытке копирования. А цвет выделения поменяла с темно коричневого на светлосерый. Ну и довольная на время забыла об этом. А вчера написала пару постов, и как обычно собралась делать анонс в клубе, но при копировании текста с моего сайта обнаружила, что цвет выделения как и нужно — серый, но когда я вставляю его как анонс в клуб, когда запись создаю, то там весь текст на том самом темно коричневом фоне и совершенно не читаемый. Очень расстроена из-за этого... не хочу чтобы меня называли жадиной :( (

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Татьяна ответил:

    Правда. Если сначала в строку браузера, то все отлично вставляется. Все хорошо видно. А вот в Ворд у меня на темном фоне... Я уже с перепугу написала в поддержку хостинга чтобы вернули мне все как было неделю назад :) ) Думаете зря паникую? Может это только у меня так? Вроде и кеш чистила уже...

    [Ответить]

    Денис Черников ответил:

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

    Татьяна ответил:

    Спасибо, Денис! Вы даже не представляете как я благодарна когда мне отвечают на таких вот блогах, как ваш... потому что сама я очень и очень далека от программирования. Спасибо за поддержку!

    [Ответить]

    Денис Черников ответил:

    Всегда, пожалуйста! Заходите и друзей приводите!

    Татьяна ответил:

    Забыла спросить — а на каком форуме об этом нужно поговорить?

    [Ответить]

    Денис Черников ответил:

    Форум по WordPress!

    Татьяна ответил:

    Сейчас проверила как копируется с другого браузера :) )) Там все чисто :) )

    [Ответить]

    Денис Черников ответил:

    Замечательно!

  19. Алекс

    Спасибо большое! Очень помогло

    [Ответить]

    Денис Черников ответил:

    Всегда пожалуйста!

    [Ответить]

  20. Наталья

    Добрый вечер, Денис! Хочу сказать огромное спасибо за Вашу помощь в регистрации сайта на feedburner.com. Это единственный человек, который помог и отвечал на все вопросы по делу и абсолютно бескорыстно.

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

    Ларионцева Наталья.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Наталья!

    Ваша проблема в том, что Вы используете для редактирования текста text-align: justify;.

    Посмотрите на него в HTML-редакторе сообщений.

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

    Думаю, что теперь Вам всё ясно.

    [Ответить]

  21. Дмитрий

    Добрый вечер Денис.

    Подскажите пожалуйста как поменять цвет основного текста блога на вордпрессе моя темя ITheme2.

    Меняю цвет в style.css — почему-то все остается без изменений. Возможно вы уже сталкивались с таким. Ответ можете написать здесь или выслать его мне электронку.

    С уважением,

    Дмитрий Сергеев.

    [Ответить]

    Денис Черников ответил:

    Смотрите файл style.css, строка номер 7, там у Вас стоит цвет #cccccc. Меняйте на любой, а когда просматривать будите кэш браузера не забудьте почистить (в этом вся проблема в основном).

    [Ответить]

    Дмитрий ответил:

    Цвет поменялся, большое спасибо, но вот цвет ссылок почему-то не меняется. В тексте он отображается таким же цветом как и основной текст. Единственное удалось поменять цвет ссылок при наведении.

    [Ответить]

    Денис Черников ответил:

    Дмитрий, изучайте потихоньку HTML, тогда у Вас всё поменяется.

    [Ответить]

  22. Felicia

    Добрый день. И что делать с выделениями таблиц? Когда в выделение попадает таблица, там цвет остается прежним и все так некрасиво смотрится. Баг настоящий.

    [Ответить]

    Денис Черников ответил:

    Поменяйте цвет в таблицах, в чём проблема-то?

    [Ответить]

    Felicia ответил:

    А я не это имела ввиду. Когда выделяешь на странице весь текст, и где-то выделяется какая-нибудь таблица, там цвет выделения таблицы остается прежним, меняется только цвет выделения самого текста. Это конкретный баг, смотрится все ужасно.

    [Ответить]

    Денис Черников ответил:

    Так разговор идёт о тексте, причём тут таблица!? Если Вас это не устраивает, не используйте!

    [Ответить]

  23. александр

    Добрый день, я новичок в сайтостроении но наткнулся на ваш сайт

    и возникли вопросы.Заинтересовала тема изменения фона под текстом, вы пишите «Для изменения цвета выделения текста, скопируйте следующий код и вставьте его в самый конец Вашего файла – «style.css», который находиться в папке активной темы оформления»: а где эта папка я не знаю, для особо одаренных не могли бы вы объяснить поподробней где находиться эта папка

    [Ответить]

  24. алесандр

    Добрый день, я совсем еще новичок в сайтостроении и вопросов тьма, попробовал изменить фон под текстом, зашел на вордпрессе

    на внешний вид-редактор-опустился вниз и открыл style.css и вставил после */ ::-moz-selection {

    background-color: FFFF00;

    color:000033 ;

    }

    ::selection {

    background-color: FFFF00;

    color:000033 ;

    }

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

    [Ответить]

Оставить комментарий!

Вверх