Я редактирую следующий сайт: http://ju-jitsu.co.uk/
Я не создал сайт, но унаследовал его.
На всем сайте основной цвет ссылки — ФИОЛЕТОВЫЙ, а при наведении курсора мыши — красный.
И это нормально.
Тем не менее, мы хотим изменить цвет ссылок на страницах:
http://ju-jitsu.co.uk/upcoming-events/
Мы хотим изменить это на ЧЕРНЫЙ текст, а затем, когда мышь наведется, на красный.
Моей первой мыслью было сделать это css:
.page-id-5983 a {
color: black;
}
Однако это не сработало. Я попытался изменить «черный» на «# 000000», и попытался вставить в Style.CSS в основной теме и ребенка … все без радости.
Итак, теперь я попробовал маршрут PHP. Я успешно клонировал шаблон страницы по умолчанию и вставил измененное имя страницы шаблона. Это было загружено и принимается как допустимый файл шаблона для всех страниц для бокового меню атрибута.
Я также успешно могу зайти в редактор и выбрать шаблон страницы для редактирования.
У меня такой вопрос: какой код и где он вставлен, необходим для переопределения цветов ссылок по умолчанию?
Если PHP не является маршрутом, и я должен следовать CSS, какие-либо идеи о коде и где он должен быть вставлен?
Большое спасибо
Добавьте это в файл style.css
#upcoming_event:hover {
color: #ec0000 !important; /** or whatever hex color code you want **/
}
Отредактируйте пример гиперссылки из:
<a href="/upcoming-events">Upcoming Event</a>
Кому (добавить идентификатор в гиперссылку):
<a id="upcoming_event" href="/upcoming-events">Upcoming Event</a>
1) [!important
] перезапишет исходную настройку CSS
2) Использование идентификатора вместо класса предотвратит перезапись других в том же классе, так как идентификатор уникален.
Добавьте это в свой файл CSS
table a{
color: #000000;
}
Или же
Добавьте класс в таблицу, например «events», затем настройте свой CSS-файл:
.events a{
color: #000000;
}
Текущий стиль содержит .entry a
, Это имеет тот же «вес», что и предлагаемый вами селектор, .page-id-5983 a
потому что оба состоят из одного имени класса и одного имени элемента. Это означает, что то, что наступит последним, отменяет другое.
Итак, самое очевидное решение: сделать селектор более конкретным, например:
.page-id-5983 .entry a {
}
Возможно, вам придется добавить другие селекторы, чтобы переопределить определенные виды оп ссылок. В конце концов, фиолетовый цвет применяется к ряду селекторов. В CSS я нахожу:
a, .entry a, .related-title, .carousel-layout2 .carousel-item-title, a .pagelink, .page-numbers {
}
Таким образом, вам может понадобиться изменить, добавив .page-id-5983
для каждого селектора, который вы хотите переопределить.
.page-id-5983 a, .page-id-5983 .entry a,
.page-id-5983 .related-title,
.page-id-5983 .carousel-layout2 .carousel-item-title,
.page-id-5983 a .pagelink, .page-id-5983 .page-numbers {
}
PS: CSS-препроцессор, такой как SCSS, наверняка поможет вам в этом!
прежде всего попробуйте дать класс этой таблице (потому что я думаю, что вам нужно изменить только ссылки внутри этой конкретной таблицы), например .events-table
затем
table.events-table a {
color: #000000;
}
table.events-table a:hover {
color: red;
}
Чтобы быть более уверенным, поместите их в конец таблицы стилей.