header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14 headerimage1 headerimage2 headerimage3 headerimage4 headerimage5 headerimage6
Sie sind hier: Startseite > Templates > klr-3col-flex > noeditmode.css
Letzte Bearbeitung:

noeditmode.css

In dieser Datei werden die Styles definiert, die dem User präsentiert werden und für die es besondere Styles für die Darstellung im Editor gibt.
Die Spezial-Formatierungen, die z. B. unterschiedlich reagieren, je nachdem ob dem Setzen von Cookies durch den User zugestimmt wurde oder nicht, oder einen Maus-Over-Effekt enthalten sind in der stylesheet.css definiert für die symbolische Darstellung im Editorfenster.
Diese Definition muss für die Front-End-Darstellung, also das, was der normale User zu sehen bekommt, zurückgenommen werden und durch die eigentliche, gewünschte Spezial-Effekt-Formatierung ersetzt werden.
Das erfolgt in der noeditmode.css, die nach der stylesheet.css geladen wird, wenn sich die Seite nicht im Editier-Modus befindet.

Dateiname: templates/krl-3col-flex/noeditmode.css

/* krl-3col-flex-V1 - last update 18.07.2021 */

/* Die folgenden Formatierungen sind zur Front-End-Darstellung als Korrektur der
Editormodus-Formatierung vorhanden.
Die Formatierungen für die Back-End - Darstellung befinden sich in der stylesheet.css. */


div.body {
margin: 0px auto 0px auto;
}

p.no_cookies_text {
background-color:unset;
}
p.no_cookies_text::before {
content: unset;
vertical-align: unset;
font-weight: unset;
font-size: unset;
color: unset;
}
p.cookies_text {
background-color: unset;
}
p.cookies_text::before {
content: unset;
vertical-align: unset;
font-weight: unset;
font-size: unset;
color: unset;
}

/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
span.tooltip, span.t-tiptext-unten, span.t-tiptext-oben {}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}

/* Tooltip text */
.tooltip .t-tiptext-unten, .tooltip .t-tiptext-oben {
visibility: hidden;
/* Breite des Tooltips */
max-width: 80%;
height: auto;
text-align: center; /* Textausrichtung in der Box */
padding: 5px; /* damit der Text nicht am inneren Rand klebt */
margin: 4px; /* damit die Toolbox nicht am unteren Wortrand klebt, und der Pfeil evtl im Buchstaben darüber verschwindet */
border-radius: 6px;

/* Position the tooltip text */
position: absolute;
z-index: 1;
}

/* Tooltip unterhalb des Wortes */
.tooltip .t-tiptext-unten, .tooltip .t-tiptext-oben {
opacity: 0;
transition: opacity .7s;
top: 100%;
left: 50%;
margin-left: -30%; /* Nutze die halbe Weite (120/2 = 60 oder 100%/2 = 50%), um den Tooltipp zu zentrieren. Bei max-width: auto; kann man mit den % spielen. -70% ist näher nach links; -30 % weiter nach rechts */
}
/* Tooltip oberhalb des Wortes */
.tooltip .t-tiptext-oben {
top: unset;
bottom: 100%;
}

.tooltip .t-tiptext-unten::after, .tooltip .t-tiptext-oben::after {
content: " ";
position: absolute;
bottom: 100%; /* Pfeil oberhalb der Tooltip-Box */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0057b0 transparent;
}
.tooltip .t-tiptext-oben::after {
bottom: unset;
top: 100%; /* Pfeil unterhalb der Tooltip-Box */
border-color: #0057b0 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .t-tiptext-unten, .tooltip:hover .t-tiptext-oben {
visibility: visible;
opacity: 1;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */

/* Bild einblenden beim hovern eines Textes innerhalb eines Blindlinks (<a href="#">) */
span.mausbild img {
display: none;
width: unset;
max-width: 95%;
height: auto;
}

a:hover span.mausbild img{
display:block;
width: unset;
position: absolute;
z-index: 1;
}

| Seitenanfang | |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap