links im RTE mit css formatieren [Gelöst]

  • NilsBarenbrock NilsBaren...
    Padawan
    0 x
    32 Beiträge
    0 Hilfreiche Beiträge
    25. 03. 2007, 20:36

    Hallo,

    ich habe folgendes Problem:

    Ich formatiere meine Links in htmlarea im backend über das einbinden meiner css Datei:

    [TS]RTE.default {
    contentCSS = fileadmin/templates/css/rte_main.css
    }[/TS]

    in der css Datei steht folgendes:

    [HTML]body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color:#f7f7f7;
    padding: 5px;
    width: 574px;
    min-height: 325px;
    text-align: left;
    font-size: 12px;
    color: #101010;
    }
    .htmlarea-content-body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0;
    padding:3px;
    background-color:#f7f7f7;
    color: #101010;
    }
    p {
    font-size : 12px;
    line-height : 16px;
    margin : 10px 0;
    }
    ul {
    list-style-type : none;
    list-style-image : url(../img/pfeil_b.gif);
    padding-left : 15px;
    margin : 5px;
    }
    ul li ul {
    list-style-image : url(../img/pfeil_o.gif);
    padding-left : 15px;
    margin-bottom : 5px;
    }
    img {
    border : none;
    }
    a {
    color:#3f52a0;
    text-decoration : none;
    }

    a:link {
    color : #3f52a0;
    text-decoration : none;
    }
    a:visited {
    color : #3f52a0;
    text-decoration : none;
    }
    a:focus {
    color : #df5511;
    text-decoration : underline;
    }
    a:hover {
    color : #df5511;
    text-decoration : underline;
    }
    a:active {
    color : #3f52a0;
    text-decoration : none;
    }
    .external-link {
    color:#3f52a0;
    text-decoration : none;
    }
    .external-link-new-window {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link-new-window {
    color:#3f52a0;
    text-decoration : none;
    }
    .download {
    color:#3f52a0;
    text-decoration : none;
    }
    .mail {
    color:#3f52a0;
    text-decoration : none;
    }

    .external-link:link {
    color:#3f52a0;
    text-decoration : none;
    }
    .external-link-new-window:link {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link:link {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link-new-window:link {
    color:#3f52a0;
    text-decoration : none;
    }
    .download:link {
    color:#3f52a0;
    text-decoration : none;
    }
    .mail:link {
    color:#3f52a0;
    text-decoration : none;
    }

    .external-link:visited {
    color:#3f52a0;
    text-decoration : none;
    }
    .external-link-new-window:visited {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link:visited {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link-new-window:visited {
    color:#3f52a0;
    text-decoration : none;
    }
    .download:visited {
    color:#3f52a0;
    text-decoration : none;
    }
    .mail:visited {
    color:#3f52a0;
    text-decoration : none;
    }

    .external-link:focus {
    color:#df5511;
    text-decoration : underline;
    }
    .external-link-new-window:focus {
    color:#df5511;
    text-decoration : underline;
    }
    .internal-link:focus {
    color:#df5511;
    text-decoration : underline;
    }
    .internal-link-new-window:focus {
    color:#df5511;
    text-decoration : underline;
    }
    .download:focus {
    color:#df5511;
    text-decoration : underline;
    }
    .mail:focus {
    color:#df5511;
    text-decoration : underline;
    }

    .external-link:hover {
    color:#df5511;
    text-decoration : underline;
    }
    .external-link-new-window:hover {
    color:#df5511;
    text-decoration : underline;
    }
    .internal-link:hover {
    color:#df5511;
    text-decoration : underline;
    }
    .internal-link-new-window:hover {
    color:#df5511;
    text-decoration : underline;
    }
    .download:hover {
    color:#df5511;
    text-decoration : underline;
    }
    .mail:hover {
    color:#df5511;
    text-decoration : underline;
    }

    .external-link:active {
    color:#3f52a0;
    text-decoration : none;
    }
    .external-link-new-window:active {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link:active {
    color:#3f52a0;
    text-decoration : none;
    }
    .internal-link-new-window:active {
    color:#3f52a0;
    text-decoration : none;
    }
    .download:active {
    color:#3f52a0;
    text-decoration : none;
    }
    .mail:active {
    color:#3f52a0;
    text-decoration : none;
    }

    h1 {
    font-size : 22px;
    margin : 0;
    padding : 5px 5px 10px 0;
    font-family : Verdana;
    color : #3f52a0;
    }
    h2 {
    font-size : 20px;
    margin : 0;
    padding : 5px 5px 5px 0;
    font-family : Verdana;
    font-weight : bold;
    color : #df5511;
    }
    h3 {
    font-size : 18px;
    margin : 0;
    padding : 3px 0 3px 0;
    font-family : Verdana;
    font-weight : bold;
    color : #3f52a0;
    }
    h4 {
    font-size : 16px;
    margin : 0;
    padding : 3px 0 3px 0;
    font-family : Verdana;
    font-weight : bold;
    color : #df5511;
    }
    h5 {
    font-size : 14px;
    margin : 0;
    padding : 3px 0 3px 0;
    font-family : Verdana;
    font-weight : bold;
    color : #3f52a0;
    }
    h6 {
    font-size : 12px;
    margin : 0;
    padding : 3px 0 3px 0;
    font-family : Verdana;
    color : #df5511;
    }
    [/HTML]

    Die einzelnen Link-klassen müsste ich eigentlich nicht einzeln definieren, dass habe ich gemacht um dort einen Fehler auszuschließen ...

    Der Effekt ist nun folgender:

    Der Internetexplorer und auch Opera zeigen die Links und die anderen styles wie gewünscht an.

    Im Firefox werden alle styles, abgesehen von den Links, korrekt dargestellt. Links im rte mit Firefox bleiben blau und unterstrichen, wie es Standard ist.

    Wie bekomme ich also nun Firefox dazu, meine css angaben für Links im rte ebenfalls zu übernehmen?

    Vielen Dank im Voraus!

    Gruß,

    Nils

    [b]NACHTRAG[/b]:

    Im frondend verwende ich die gleichen style Angaben, interessanterweise werden diese dort sowohl vom Internetexplorer und Opera als auch von Firefox richtig verarbeitet.


  • 1
  • udowald udowald
    Sternenflotten-Admiral
    0 x
    160 Beiträge
    0 Hilfreiche Beiträge
    02. 10. 2007, 12:45

    Hallo Nils,

    ich habe das gleiche Problem. Hast du schon eine Lösung?

    Udowald

  • NilsBarenbrock NilsBaren...
    Padawan
    0 x
    32 Beiträge
    0 Hilfreiche Beiträge
    03. 10. 2007, 14:02

    Hallo udowald,

    ich habe das Problem mit der css Eigenschaft [HTML]!important[/HTML] gelöst.

    Dies schreibst du einfach hinter die css Eigenschaft, die du durchgehend weitervererben möchtest, denn das "!important" sorgt dafür, dass die eigenschaft von "normalen" css Angaben ohne "!important", die eigentlich nach der Vererbung von css Vorrang hätten, nicht mehr überlagert bzw. überschrieben wird.

    Beispiel für css code bei dem die Links korrekt dagestellt werden:
    [HTML]a:link, a:visited, a:active {
    color : #b20815 !important;
    text-decoration : none !important;
    }
    a:focus, a:hover {
    color : #ee001c !important;
    }[/HTML]

    Diese Vorgehensweise kann natürlich auch für andere Elemente wie abbr oder acronym verwendet werden.

    Weitere Informationen zu der Vererbung von css auf selfHTML.org:
    [url]http://de.selfhtml.org/css/formate/kaskade.htm#ursprung[/url]

  • udowald udowald
    Sternenflotten-Admiral
    0 x
    160 Beiträge
    0 Hilfreiche Beiträge
    04. 10. 2007, 12:05

    Hi Nils,

    danke für die Amtwort. Ich meine nicht die Darstellung des Links im Frontend sondern im RTE Eingabetextfeld selbst (Backend). Hier zeigt important! leider keine Wirkung. Die Links werden hier wahrschinlich mir blauem Format aus der DB geholt. Ich suche noch ein bischen.

    Wahrscheinlich hatte ich dich falsch verstanden oder?

    Trotzdem danke!

    udowald

  • udowald udowald
    Sternenflotten-Admiral
    0 x
    160 Beiträge
    0 Hilfreiche Beiträge
    04. 10. 2007, 13:08

    Nochmal Nils,

    1000 Punkte! Es hat funktioniert.

    body.htmlarea-content-body a:link {color:#FFBF00 !important; text-decoration:none !important;}

    Im css zum Ändern der Standardoptik vom RTE eingeben. Ohne !important geht es nicht.

    udowald

  • udowald udowald
    Sternenflotten-Admiral
    0 x
    160 Beiträge
    0 Hilfreiche Beiträge
    05. 12. 2007, 23:47

    Hi Nils,

    du könntest diesen thread als gelöst markieren.

    mfg
    udowald

  • 1