Sozdaiblog.ru
Назад

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

Опубликовано: 21.08.2012
Время на чтение: 3 мин
71
567

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

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

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

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

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

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

 

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

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

 


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

 

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

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

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

 

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

Поделиться
Похожие записи
Комментарии:
  • Владимир
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • blogrub
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • Андрей
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • Сергей
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • Алексей
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • Сергей
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • Олег
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

      • Сергей
        Опубликовано: 23.08.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 23.08.2012 Ответить на сообщение

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

  • Алексей
    Опубликовано: 22.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.08.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 24.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.09.2012 Ответить на сообщение

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

      • Таисия
        Опубликовано: 27.09.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.09.2012 Ответить на сообщение

          Вы должны были в самом конце стилей вставить:
          ::-moz-selection {
          background-color: #6c7b8b;
          color: #fff;
          }
          ::selection {
          background-color: #6c7b8b;
          color: #fff;
          }
          В этом коде меняете код цвета — background-color: #6c7b8b;
          Тоесть — #6c7b8b
          В обеих строчках!
          Больше ничего не нужно делать!

  • Анастасия
    Опубликовано: 26.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.09.2012 Ответить на сообщение

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

      • Анастасия
        Опубликовано: 27.09.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.09.2012 Ответить на сообщение

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

      • Таисия
        Опубликовано: 27.09.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.09.2012 Ответить на сообщение

      Молодцом!

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 27.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.09.2012 Ответить на сообщение

      Mozilla Firefox и Opera!

  • Татьяна
    Опубликовано: 18.12.2012 Ответить на сообщение

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

    • Татьяна
      Опубликовано: 18.12.2012 Ответить на сообщение

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

      • Татьяна
        Опубликовано: 18.12.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 18.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 18.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 18.12.2012 Ответить на сообщение

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

          • Татьяна
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Татьяна
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Татьяна
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Татьяна
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 19.12.2012 Ответить на сообщение

            Форум по WordPress!

          • Татьяна
            Опубликовано: 19.12.2012 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 19.12.2012 Ответить на сообщение

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

  • Алекс
    Опубликовано: 15.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 15.01.2013 Ответить на сообщение

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

  • Наталья
    Опубликовано: 14.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 14.02.2013 Ответить на сообщение

      Здравствуйте, Наталья!
      Ваша проблема в том, что Вы используете для редактирования текста text-align: justify;.
      Посмотрите на него в HTML-редакторе сообщений.
      До тех пор, пока браузеры не имеют возможности динамически расставлять переносы в словах, вебмастеры должны забыть выключку по ширине как страшный сон (цитата из статьи одного блоггера).
      Думаю, что теперь Вам всё ясно.

  • Дмитрий
    Опубликовано: 01.03.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 01.03.2013 Ответить на сообщение

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

      • Дмитрий
        Опубликовано: 02.03.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 02.03.2013 Ответить на сообщение

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

  • Felicia
    Опубликовано: 08.08.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 11.08.2014 Ответить на сообщение

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

      • Felicia
        Опубликовано: 11.08.2014 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 13.08.2014 Ответить на сообщение

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

  • александр
    Опубликовано: 04.02.2016 Ответить на сообщение

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

  • алесандр
    Опубликовано: 08.02.2016 Ответить на сообщение

    Добрый день, я совсем еще новичок в сайтостроении и вопросов тьма, попробовал изменить фон под текстом, зашел на вордпрессе
    на внешний вид-редактор-опустился вниз и открыл style.css и вставил после */ ::-moz-selection {
    background-color: FFFF00;
    color:000033 ;
    }
    ::selection {
    background-color: FFFF00;
    color:000033 ;
    }
    хотел чтобы фон под текстом стал желтым, но ничего не изменилось.Объясните пожалуйста в чем ошибка

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.