студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: HTML-CSS-PHP
студия занимательная МИХАЛИКА

Как изменить цвет ссылок на сайте

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

 


Меняем цвет ссылок на сайте и делаем их более красивыми и понятными

 

 

 

В самом деле: я всегда сомневаюсь в этическом благополучии людей-админов тех сайтов, на которых сплошняком обучающие МАНУЛЫ по заработку денег в сети. Но взглянув на их инструментарий продвижения, становится забавно: ну, если сам админ не могёт выправить свой бложок (блюдя приличие для посетителей сайта), то отчего бы ни заказать себе более-менее адекватную тему оформления…

 

 

Или финансовый воротила ещё не заработал!?

 

 

Ну, ладно..! …приступим к делу.

 

 

 

Тема: Меняем штатный цвет ссылок на сайте

 

 

 

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

 

 

Для начала предложу классический пример CSS, который вы сможете поменять на своё усмотрение… А сейчас просто копируйте у меня и прописывайте к себе в файл стилей style.css, куда-нить в самый его конец — основной ФАЙЛ СТИЛЕЙ находится в корневой папке вашей темы.
…поехали — сегодня мы рассмотрим пример ссылки «читать далее».

 

 

.readmore a {
padding: 10px;
margin-bottom: 15px;
float: right;
font-style: italic;
/*color: #000;*/
}

 

 

Поясню:
1 строка: уникальный id класс. Задавая который, можно поменять цвет любой ссылки, как на страницах сайта так и в сайдбаре, например. Стоит обратить внимание: видите буковку «а» — это определение, которое обращается непосредственно к ссылке этого id класса.

 

 

2 и 3 : отступы (расположение ссылки относительно соседних элементов сайта)

 

4: расположение ссылки на листе сайта – лево/право…

 

5: стиль текста ссылки (здесь свойство italic – курсив)

 

6: ну и наша сегодняшняя цель – ЦВЕТ ссылки. У меня этот элемент закомментирован. То есть при этом цвет нужной нам ссылки останется цветом /по умолчанию/ темы. И как понимаете, если его «открыть», цвет изменится на нужный нам.

 

 

Итак: если вам всего-то нужно поменять цвет всех ссылок вашего блога, то это запросто.
Наводите курсор на ссылку; щёлкаете правой клавишей… в выпадающим подменю кликаете «просмотреть код элемента». Это штатное средство любого браузера: но есть и неплохое расширение Фаербаг … Я пользуюсь им.

 

 

…смотрите: (я не буду здесь подробно пояснять фотографии, ибо на это есть видео: ссыль в финале статьи) на фото нужно кликать…

 

 

 

Как изменить цвет ссылок на сайте

 

 

…а если что-то непонятно, то посмотрите видео или пишите в комментариях – разберёмся.

 

 

Итак:

 

 

Посмотрите внимательно на то, что подчёркнуто зелёным.

 

 

Всё достаточно удобно: справа – нумерация строк элементов (будет просто отыскать в скрипте style css нужные примеры). Внимание: если у вас цель сменить цвет всех ссылок сайта скопом, просто заменяйте свойства селектора «а» на свои… color: ***** (подчёркнуто в самом низу справа)

 

 

Чуть выше – наш пример стилей ССЫЛКИ. Ну и в левом окне (то, что побольше) я обозначил сам уникальный класс, которым и определяется данная ссылка, кстати те классы, которые вам могут в последствии понадобиться, отыскиваются (или задаются) именно в левом окошке.

 

 

 

У меня, как видите, .readmore — у вас может быть присвоен другой id класс. А поэтому, вам останется только скопировать его (прямо из этого окошка: кликаете на него два раза; копируете и прописываете за место моего в своём файле стилей CSS).

 

 

 

Как отыскать уникальный id-класс? …проведите осторожненько курсором сверху вниз по всем прописанным скриптам в левом окошке «инструмента разработчика» и как только в основном окне браузера (на вашем сайте) нужная вам ссылка подсветится синеньким цветом — место расположения курсора и будет на ИМЕНИ id-класса.

 

 

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

 

 

 

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

 

 

 

Если у вас ссылка «Читать далее» была не «завёрнута» в div-класс (не имела уникального имени /селектора CSS, скажем так/), тогда её нужно «обернуть» и присвоить уникальное имя.

 

 

Например, открываете файл post.php, отыскиваете саму ссылку …#more- … и заворачиваете её в ДИВ класс

 

 

<div class="любое уникальное имя: на английском языке, у меня, как видите readmore">
<a ЗДЕСЬ ПОЛНЫЙ ПРИМЕР ССЫЛКИ… </a>
</div>

 

 

Точку перед уникальным классом, добавите только в стилях css.

 

 

 

О многом другом и интересном в следующих статьях…

 

 

Ну а теперь, как и говорил выше, предложу ещё один способ обозначения ваших сайтовых ссылок:

 

 

 

Как изменить цвет ссылок на сайте

 

 

Видите справа ссылки иконку..? Почти как в Википедии…

 

 

 

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

 

 

Всё! …а вы тестируйте свою работу.

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *