bereits festgelegte Schriftfarbe ändern

  • Hallo Ihr Lieben,


    gleich vorab, steinigt mich bitte nicht, falls ich nicht die richtigen Begriffe verwende oder mich komisch ausdrücke... Ich bin absoluter Leihe was Codierungen etc. angeht!


    Dennoch habe ich ein kleines Problem. Ich arbeite als Content Redakteurin und bin dementsprechend natürlich auch für die Homepage meines Chefs zuständig. Was an und für sich kein Problem ist, da die Homepage bereits komplett erstellt ist und ich einen Baukasten zur Verfügung habe, der es mir erlaubt Texte, Bilder, etc. hochzuladen, neue Seiten anzulegen usw..

    Allerdings bin ich gerne kreativ und finde die Homepage für meinen Geschmack zu langweilig. Da es in dem Baukasten auch die Möglichkeit gibt Metatags einzufügen und so die bereits vorhandene Codierung zu überschreiben, habe ich das gleich ausprobiert.
    Das hat auch ganz gut funktioniert. Ich habe jetzt einen anderen Hintergrund und eine neue Schriftfarbe... zumindest größtenteils, denn eine Sache bereitet mir Probleme und ich weiß nicht wie ich es lösen kann.


    Auf der Homepage kann ich Artikel erstellen, die dann auf der Startseite zur Hälte zu sehen sind. Die Überschrift des Artikels ist ein Link, der mich auf die Seite mit dem kompletten Artikel führt. Diese Überschrift allerdings, lässt sich nicht, wie der Rest des Textes, in eine andere Farbe umwandeln. Klicke ich darauf und sehe den kompletten Text, ist die Überschrift weiß, nur eben auf der Startseite nicht.

    Ich habe schon probiert sie über a {... anzusprechen, aber da habe ich nur die Farbe aller anderen Links verändert... die sollen aber so bleiben.


    Dann habe ich mir in den Edge Entwicklungstools angeschaut, wie diese Überschrift im Quellcode angesprochen wird. Sie steht, mal ganz weit gefasst unter "h2". Also habe ich das in den Metatags probiert, aber das hat überhaupt nichts bewirkt. Irgendwie weiß ich so langsam echt nicht mehr weiter. Wenn ich es in den Entwicklungstools ändere, dann spricht die Überschrift auch drauf an, aber wenn ich die Seite dann neu lade ist es wieder weg :(


    Vielleicht kann mir hier ja jemand helfen!

    Das steht bereits in meinen Metatags:


    <style type="text/css" media="screen, projection">

    <!--

    body {

    background: url('/images/user_pages/kristian-seedorff-BvUicqkaZZ0-unsplash.jpg') no-repeat;

    background-position: top center;

    background-attachment:fixed;

    background-size: cover;

    Color: white;

    a {

    Color: #e0001b;

    }


    #bread_and_crump {

    display: none;

    }

    #navigation {

    margin-top: 0px;

    }


    -->


    <style type="text/css" media="screen, projection">

    <!--


    </style>

  • Hast du es schon mit...

    Code
    a.h2 {
        color: red;
    }
    a.h2:hover {
        color: blue;
    } 

    ... versucht, oder mit h2 > a?

    Vielleicht hilft das ja, wobei ich da auch eher ein "Anfänger" bin in dem Bereich

  • Dein Stylesheet ist fehlerhaft:

    Die schließende geschweifte Klammer ( } ) am Ende der body-Formatierung fehlt.

    Des weiteren ist es üblich, im CSS die Kleinschreibung beizubehalten .. also color und nicht Color. Daran solltest du dich halten.


    Damit der Vorschlag von LoSti's World funktioniert, musst du zwischen dem a und dem h2 ein Leerzeichen setzen und den Punkt weglassen, denn

    a.h2 spricht einen Hyperlink (a) an, der eine Klasse h2 ( class="h2") hat. Ich denke, dass das bei dir nicht der Fall ist.

    Mit a h2  wird ein h2 Element innerhalb eines a Tags ( <a....><h2>..</h2></a> ) angesprochen.

  • Danke für Eure Antworten. Die geschweifte Klammer habe ich eingefügt und alles auf Kleinschreibung gestellt.

    Leider lässt sich der blöde Link mit keiner der genannten Möglichkeiten ansprechen :(


    Ich habe Mal ein Bild vom Quellcode gemacht, in dem ich ihn gefunden habe. Vllt hilft das ja jemandem.


    LG

  • Da du einen Link <a...> innerhalb einer Überschrift <h2> ansprechen willst, dann wäre der Selektor

    Code
    h2 a {...}

    passend.

    Der ändert dann aber auch die Formate für alle <a>'s innerhalb einer Überschrift <h2>.

    Wenn du was anderes brauchst/willst, dann musst du dem a oder dem der h2 eine Klasse geben, dann kann man gezielter ansprechen.

  • Also wie ich es mache... Es funktioniert einfach nicht. Auch die beiden letzten Vorschläge nicht. Könnte es evtl noch dran liegen, dass diese Link-Überschriften im Quellcode containert sind?


    Falls nicht, werde ich mich eben nach einem weniger dunklen Hintergrund umsehen müssen.


    Aber danke für Eure Hilfe!

  • Achso...

    Die Möglichkeit das über die Entwicklertools direkt dauerhaft im Quellcode zu ändern besteht wahrscheinlich nicht oder? Weil da funktioniert es zumindest temporär, wenn ich die Seite nicht verlasse.


    LG

  • Du könntest dir diese ganze rumexperimentieren ersparen ... und hättest schon längst eine funktionierende Lösung... wenn du uns einfach einen Link zu deiner Seite postest. Oder den gesamten Quellcode (HTML und CSS).

    Oder ist deine Seite so geheim?

  • Du könntest dir diese ganze rumexperimentieren ersparen ... und hättest schon längst eine funktionierende Lösung... wenn du uns einfach einen Link zu deiner Seite postest. Oder den gesamten Quellcode (HTML und CSS).

    Oder ist deine Seite so geheim?

    Das wäre am einfachsten.

    Ich möchte auch noch ein Tipp abgeben

    Code
    #module .bm h2 a ~ a{
      color:blue
    }
  • Also wie ich es mache... Es funktioniert einfach nicht.

    Dann machst Du es immer noch falsch, #7 funktioniert mit dem gezeigten HTML. Wenn bei Dir nicht, hast Du ein anderes HTML als gezeigt oder das CSS immer noch falsch angewendet. Bleibt aber am Ende Rumraterei, weil Du uns nicht zeigst, was Du wirklich hast. Damit meinen wir einen Link oder geposteten Code ( kein Bild! ).

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!