Hilfe bei Link und Hoverfarbe - Finde die CSS Klasse nicht

[Foos]

Hallo Leute,

ich verzweifel. Ich find in meinem CSS einfach nicht die passende Stelle um hier:


1.) Die Farbe der 12 Links zu ändern
2.) Die Farbe bei Hover zu ändern.

Könnt ihr mir vielleicht helfen? Wäre super toll..

Danke

 

[Gegenstrom]

Windows:
Google Chrome, Rechtsklick auf den Link(Bereich den du untersuchen magst), Untersuchen(Strg+Shift+i).
Firefox, Rechtsklick auf den Link(Bereich den du untersuchen magst), Untersuchen(Q).

Spoiler: CSS Klassen

[class*=color-] * {
    color: inherit!important; // core.min.css:5138 - bestimmt mit höchster Priorität dass die Farbe von dem Elternelement, in deinem Fall .color-theme genommen wird
}
.clients-1 .client-name {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4rem;
    opacity: 0.5; // skin.css:3819 - bestimmt die Transparenz
}
.color-theme, .color-hover-theme:hover {
    color: #000; // skin.css:563 - bestimmt den Farbwert
}

Ich würde raten, die Links sollen in dem "Goldton"/Beige erstrahlen?
Was genau du nun an den Klassen machen solltest, das bleibt ein wenig dein Geheimnis, denn es sieht für mich verschachtelt und durcheinander aus. Keine Ahnung was du alles noch auf anderen Seiten änderst wenn du den Farbwert anpasst.

Ich möchte dir eins mitgeben: wenn es dein CSS sein sollte, dann eine Verlinkung wie man Links im CSS anspricht: HTML Link Colors
Als Beispiel wie du die Links ansprechen kannst. Du müsstest dafür dein CSS(core.min.css) anpassen und das !important entfernen.

clients-1 a, .client-1 a:visited {
color: #cbaa85;
}
clients-1 a:hover, clients-1 a:active, clients-1 a:focus {
color: #ac8b66;
}

Abhilfe würde ein weiteres !important verschaffen, allerdings mag ich die Verwendung von !important nicht(und man sollte !important auch nur im Notfall benutzen, darfst dir dazu gerne mehrere Posts und Beiträge im Internet durchlesen) und würde dir eher dazu raten dein CSS cleaner aufzubauen. Versuch !important zu vermeiden. Solltest du less oder sass benutzen hilft es eine globale Klasse an den body zu hängen wenn du Themes verwendest und darüber dann deine variablen Passagen verändern. (geht auch mit purem CSS ist, ist nur etwas mehr Schreibarbeit)
Beispiel für less:

.classname a,
.classname a:visited {
  .theme-a & {
    //style für dein Theme a
  }
  .theme-b & {
    //style für dein Theme b
  }
}
//kompiliert würde es so aussehen
.classname a,
.classname a:visited {}
.theme-a .classname a,
.theme-a .classname a:visited {}
.theme-b .classname a,
.theme-b .classname a:visited {}

 

[Foos]

Danke für die ausführliche Antwort. Genau das hat mir sehr geholfen.
Es lag am !important. Das hab ich nun so verwendet und ich habs genau wie ich möchte.

Tausend Dank.

 

[Foos]

ääähm, @Gegenstrom kannst du mir vielleicht gleich nochmals kurz helfen

Auf dem Desktop sind die Namen ja in 3 Reihen a 4 Spalten. Auf dem Handy sind sie dann 4 Reihen a 3 Spalten. Ich hätte aber gerne in der Handyversion einfach alles untereinander. Also 1 Spalte und dann Zeile für Zeile. Auch hier komm ich nicht weiter

 

[Gegenstrom]

ääähm, @Gegenstrom kannst du mir vielleicht gleich nochmals kurz helfen

Auf dem Desktop sind die Namen ja in 3 Reihen a 4 Spalten. Auf dem Handy sind sie dann 4 Reihen a 3 Spalten. Ich hätte aber gerne in der Handyversion einfach alles untereinander. Also 1 Spalte und dann Zeile für Zeile. Auch hier komm ich nicht weiter

Fürs nächste mal: Mach dazu nen extra Thread auf, gehört nämlich nicht zu Link und Hoverfarbe.

Du solltest dir angewöhnen mit dem Entwicklerwerkzeug zu arbeiten, siehe Post oben(Untersuchen).
Und noch etwas, ich denke einfach mal du bist derjenige der die Website ins Leben gerufen hat und nen Template benutzt? Ich hoffe es zumindest. Ansonsten wird nen Stundensatz von 90€ + Urlaubszuschlag 135€ fällig.
Spaß beiseite.

Wieder dein core.min.css.
<div class="row content-grid-4 flex"> darin liegend sind es die Elemente <div class="grid-item">

Spoiler: kleine Hilfe

.content-grid-4 .grid-item {
  width: 25%; //core.min.css:1246 -  wäre dein default wenn du nicht mit max-width arbeiten würdest!
}
@media only screen and (max-width: 480px) {
[class*="content-grid-"] .grid-item {
  width: 100%; //core.min.css:5636 - wird aber überschrieben da später nochmal ein media query auftaucht
}}
@media only screen and (max-width: 768px) {
[class*="clients-"] .grid-item {
  width: 33.3333%; //core.min.css:8879 - trifft erst zu wenn du Auflösung von Tablet Hochformat hast
}}
@media only screen and (max-width: 480px) {
[class*="clients-"] .grid-item {
  width: 50%; //core.min.css:8891 - ist dein default für alles von 0-480px
}}

Ich weiß nicht was für eine Boilerplate du benutzt oder welche Front-End-Bibliothek das ist, aber es sieht mir nach viel zu viel überschreiben aus.
Zumal ich die media queries max-width nicht häufig, bzw. selten benutze. Ich schreib mein less immer von 0 aufwärts. Ab und zu benutz ich mal min-/max-height aber max-width hab ich schon ewig nicht mehr benutzt.
max-width beschränkt dich nach oben, min-width beschränkt dich nach unten(eben die minimale Breite). Bitte hierzu Google befragen und dir ein eigenes Bild von media queries machen.

Du müsstest schauen dass du deine media queries an deine Bedürfnisse anpasst.
0-480px width:100%
480-768px width:50%
768px-??? width: 33%
???-??? width:25% <-- pass da bitte bei Lieblingsplatz auf. Langes Wort was in bestimmten Auflösungen unter Mertl Kelterei liegt.

Spoiler: Dies wäre mein Lösungsansatz

.content-grid-4 .grid-item {
  width: 100%;
}
@media only screen and (min-width: 480px) {
  .content-grid-4 .grid-item {
  width: 50%;//gilt erst ab 480px und sollte damit ein Phablet sein oder Querformat Handy
  }
}
@media only screen and (min-width: 768px) {
  .content-grid-4 .grid-item {
  width: 33.333%;// manchmal Querformat Handy bzw Tablet Hochformat
  }
}
@media only screen and (min-width: 1024px) {
  .content-grid-4 .grid-item {
  width: 25%;//Querformat Tablet(manchmal auch Hochformat[ipad z Bsp]), kleiner Desktop
  }
}

Kann dir aber nicht sagen ob du damit nicht irgendetwas anderes an deinem Seitenaufbau verändern würdest!

Noch etwas, du solltest aufhören den * Universalselektor und die [class*= ""]Attributselektoren zu benutzen, dadurch verlangsamst du das Parsen deines CSS und somit den Aufbau deiner Site und du machst es dir nur selber viel zu kompliziert dein CSS zu lesen/bearbeiten/verstehen. Auch dazu gibt es diverse Post's im Internet.