WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 18.10.2018 09:42:38

byteworker
Member

CSS a img link ohne text decoration

Main Zusammen,

ich stehe gerade bisserl auf dem Schlauch. Ich möchte gerne per CSS textlinks anders auszeichen. Generelle Idee alles was ein <a href... hat, bekommt eine per css animierte Unterlinie.

ABER ich will nicht, das z.B. die Minigallery ihre Bilder mit dem Effekt darstellt.

Ansatz:

/*************/
/* hover effekt */
/*************/


#main a {
  text-decoration: none;
  position: relative;
  color: #B22222;
}
#main a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #B22222;
  transition: 0.4s;
}
#main a:hover:after {
  width: 100%;
}

Offline

#2 18.10.2018 10:36:05

colinax
Developer

Re: CSS a img link ohne text decoration

Da hilft leider nur die Trennung über zusätzliche Klassen (z. B. #main minigallery a) oder die Trennung der über Abschnitte/Blocks (z. B. .block1 .main a, .block1 .sub a, .block2 a, ... )

Offline

Liked by:

florian, byteworker

#3 18.10.2018 10:56:50

webbird
Administrator

Re: CSS a img link ohne text decoration

Das ist (für mich zumindest) zu wenig an Information. Eventuell kann man mit :not() oder komplette(re)n CSS-Pfaden arbeiten, das hängt davon ab, welche Klassen die Bildlinks in der Minigalerie bzw. die Textlinks selbst haben. Man könnte z.B. den kompletten Minigalerie-Abschnitt ausnehmen, wenn der eine eindeutige ID oder CSS-Klasse hat.


Some people just need a high-five. In the face. With a chair.

Offline

Liked by:

florian, byteworker

#4 18.10.2018 11:36:18

florian
Administrator

Re: CSS a img link ohne text decoration

Alle denkbaren Fälle lassen sich auch meines Erachtens nicht abdecken, wie colinax und webbird schon schrieben. Du musst also schauen, welche Module zum Einsatz kommen, die meist bereits von Haus aus einen div mit eigene Klassen um den von ihnen generierten Code legen (bzw. dies in den jeweiligen Modul-/Ausgabeeinstellungen leicht eingerichtet werden kann), und für diese dann Ausnahmen definieren (das !important nicht vergessen, da ein auf eine ID angewendeter Style ein höheres Gewicht hat als auf eine Klasse).
Wenn Du eine Vielzahl unterschiedlicher Module hast, ist es andersherum wahrscheinlich einfacher, d.h. dass Du den animierten Unterstrich (sehr hübsch anzusehen, nebenbei bemerkt) nicht per Default hinterlegst, sondern dafür eine eigene Klasse definierst, die dann manuell dem Link im Linkeigenschaftendialog zuzuweisen ist.

Offline

Liked by:

byteworker

#5 18.10.2018 12:05:29

byteworker
Member

Re: CSS a img link ohne text decoration

Ja danke zunächst für die Anregungen, ich zeige Euch, wo ich das verwenden will:

http://cms.auheim-kultur.de/

Momentan macht der Hovereffekt was er will, im Logo, in der Navi, im Accordion auf einigen Seiten, ich will das nur im Bereich des Contents, im Footer eventuell auch, dann halt auch nur wenn man einen Textlink überfährt. Jetzt klarer zu verstehen was ich beabsichtige?

Offline

#6 18.10.2018 12:31:25

colinax
Developer

Re: CSS a img link ohne text decoration

Da hier header, section und footer statt den divs verwendet wird, ist es eh ganz einfach.

header a, section a, footer a, ...


Der Head deiner Template index.php sollte auch korrigiert werden, zuerst Template css dann die Module css danach jquery und zum Schluss Modul JS, wenn man die Modul JS nicht gleich nach unten vor das html ende setzt.

Last edited by colinax (18.10.2018 12:32:50)

Offline

Liked by:

byteworker

Board footer

Powered by FluxBB

up