CSS auf iframe anwenden?

Hi Leute,

ja ich weiß, dass es dazu schon viele Themen im Internet gibt, ich kann mit denen aber leider nichts wirklich anfangen, bzw. hat noch nichts funktioniert. Ich habe ein iFrame eingebunden (von der gleichen Domain) und möchte, dass bei dem iframe eine Sache anders aussieht, wie auf der Hauptseite. Wie kann man so einfach wie möglich einen CSS Befehl auf den Inhalt des iframes anwenden? Ich wäre für jede Hilfe wirklich sehr dankbar :)

Im Internet habe ich z.B. diesen Java Code gefunden, mit dem ich aber leider noch nicht weiter gekommen bin. Ducrh wass müsste ich hier z.B. "iframe" ersetzen?

$("iframe").contents().find("element-selector").css("border-color", "blue");

4 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

28.06.2020, 20:04

Das ist kein Java Code sondern JavaScript. Er macht eigentlich genau das was Du erreichen willst. Von der Seite aus die das iframe einbindet in dem iframe eine Style-Ausgabe ändern. Ist allerdings etwas mühsam wenn Du doch auf die Seite im iframe auch Einfluss hast. Daraus ergeben sich für mich 2 Fragen:

Wieso passt Du den Style nicht einfach direkt in der eingebundenen Datei an?
Wieso verwendest Du überhaupt ein iframe, wenn es die Inhalte von der gleichen Webseite lädt?

Woher ich das weiß:Berufserfahrung

CoolerTyp1997

Fragesteller

28.06.2020, 20:11

Hallo threadi,

danke für deine Antwort. Ja das Problem ist, dass ich die Hauptseite als "Referenzseite" habe und bei verschiedenen Unterseiten das iframe eingebunden habe, welches minimal anders aussehen soll als die "Referenzseite". Deshalb kann ich dort nicht die CSS Regel direkt machen.

Um nochmal auf das Script zurückzukommen:

Mit was müsste ich denn "iframe" ersetzen? Oder kann man das einfach so lassen?

threadi

28.06.2020, 20:13

@CoolerTyp1997

Das kannst Du so lassen, musst nur halt die dort stehenden CSS-Eigenschaften an deine Anforderungen anpassen. Du musst in deiner Seite allerdings auch jQuery eingebunden haben, denn es ist ein jQuery-Script.

CoolerTyp1997

Fragesteller

28.06.2020, 20:26

Mal ne blöde Frage: Wie kann ich denn sichergehen, dass JQuery bei mir eingebunden ist? Meines Wissens nach ist es eingebunden durch Plugins etc. (Ich benutze Wordpress) die das auch benutzen soweit ich weiß..

Den Code habe ich wie folgt geändert:

$("iframe").contents().find("#Anker-PowerCore-10000mAh").css("display", "none");

Die CSS ID (#Anker-PowerCore-10000mAh) ist bei dem entsprechendem Element bei der Referenzseite eingetragen. Dennoch wird das Element aber nicht ausgeblendet bei dem iframe. Auch andere CSS Regeln greifen nicht..

threadi

28.06.2020, 20:28

@CoolerTyp1997

Wordpress verwendet jQuery, es sei denn du hast ein Plugin, welches die Einbindung unterdrückt.

Wenn das JavaScript scheinbar nicht funktioniert, dann prüfe die Konsole im Entwicklerfenster, ob dort JavaScript-Fehler gelistet sind. Wenn ja, gehe diesen nach.

CoolerTyp1997

Fragesteller

28.06.2020, 20:33

Hmm. Das iframe wird mittels Lazy Load erst geladen, wenn man die Stelle erreicht hat. Könnte es vielleicht auch damit zusammenhängen? Bzw. habe ich das Java Script wie hier gezeigt auf der Seite eingebunden: https://www.publishingblog.ch/javascript-in-elementor-einbinden/

-> <script>$("iframe").contents().find("#Anker-PowerCore-10000mAh").css("display", "none");</script>

Das ist über dem iframe platziert. Wäre das denn so überhaupt richtig ?😅

threadi

28.06.2020, 20:35

@CoolerTyp1997

Wenn es per LazyLoad eingebunden wird, darfst Du es natürlich erst nach Ausführung des LazyLoad einbinden.

CoolerTyp1997

Fragesteller

28.06.2020, 20:37

Also den Scriptcode einfach unter den iframe Code setzen? Sorry du merkst, dass ich mich damit nicht so auskenne...😅

CoolerTyp1997

Fragesteller

28.06.2020, 20:38

Und wäre das so wie darüber beschrieben in Ordnung, wenn der Code darunter wäre?

CoolerTyp1997

Fragesteller

28.06.2020, 22:04

Aber es scheint ohne Lazy Load abgesehen davon leider auch nicht zu funktionieren... Echt merkwürdig

FinnB132

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

01.07.2020, 15:10

Also so wie ich das verstehe willst du seitenelemente wiederverwenden, da wäre das der Komplett falsche ansatz.

Das ganze nennt sich in der Webentwicklung u.a. "Templating":

https://en.wikipedia.org/wiki/Web_template_system

Für dieses Konzept gibt es zahlreiche implementierungen:

https://developer.mozilla.org/de/docs/Web/HTML/Element/template

https://colorlib.com/wp/top-templating-engines-for-javascript/

Edit: Wie ich sehe verwendest du Wordpress, da gibt es schon ein Templating system.

https://developer.wordpress.org/themes/template-files-section/page-template-files/

Woher ich das weiß:Studium / Ausbildung – Gelernter Fachinformatiker, Freiberufl. Softwareentwickler

CoolerTyp1997

Fragesteller

01.07.2020, 15:21

@FinnB132Hallo Finn,

ja du hast vom Prinzip recht. Ich hatte das damals so gemacht, weil ich keine einfache Möglichkeit gefunden habe, die Templates mit Ajax nachladen zu können und es bei iframes recht einfach ist per Plugin. Ich benutze den Elementor Page Builder für Wordpress (falls du den kennst). Ich kenne mich leider nicht mit Coden aus. Wüsstest du denn eine einfache Möglichkeit (z.B. per Plugin), wie man gwisse Elementor Templates mit Ajax nachladen könnte?

Slollo921

28.06.2020, 20:10

Du könntest eine klasse zuweisen (nicht auf den iframe sondern inhalt der anderen seite) aber die deklarationen nur auf der seite vornehmen via <style></style> wo der iframe eingefügt wird. Hab ich aber noch nie probiert kann also auch nicht sagen ob das klappt

Woher ich das weiß:Berufserfahrung – Selbstständige Tätigkeit seit 5 Jahren

CoolerTyp1997

Fragesteller

28.06.2020, 20:14

Aber dann würde das meine Wissens nach leider nicht für den iframe greifen. 🤔

Slollo921

28.06.2020, 21:26

@CoolerTyp1997

Gehe auch eher nicht davon aus. Aber weis es nicht deshalb der vorschlag

Cassandre66

28.06.2020, 20:03

Dann musst Du schon die Ursprungsseite im gewünschten Styl formatieren.

CoolerTyp1997

Fragesteller

28.06.2020, 20:12

Aber über JavaScript müsste das doch eigentlich funktionieren? 🤔

Cassandre66

28.06.2020, 20:14

@CoolerTyp1997

Ist es nur Text oder Text und Bilder von der Startseite?

CoolerTyp1997

Fragesteller

28.06.2020, 20:15

Leider beides..

Cassandre66

28.06.2020, 20:21

@CoolerTyp1997

Dann lies per php nur den Quellcode der Startseite ein und schneide ihn auf die Bedürfnisse zurecht.

CoolerTyp1997

Fragesteller

28.06.2020, 20:34

Hmm so ganz verstehe ich leider nicht wie du es meinst. Da kenn ich mich leider auch nicht gut genug für aus 😅

Ähnliche Fragen

Schriftfarbe in einem Iframe ändern?

Hallo,

Also folgendes Scenario, ich schreibe gerade an einer Website die einen iframe enthält der sich im selben Ordner befindet.

Auf der Hauptseite habe ich die Möglichkeit eingebaut den style zu ändern, dies ermögliche ich mit zwei verschiedenen .css Datein zwischen denen es möglich ist zu wählen. Jetzt möchte ich das sich die Schriftfarbe (.css file) von dem iframe auch ändert wenn ich auf der Hauptseite zb 1.css ausgewählt habe (will heißen das auf der Seite die im iframe angezeigt wird entweder 1.css oder 2.css geladen wird, immer davon abhängig welche der beiden gerade auf der Hauptseite aktiv ist). Ich denke das es möglich sein muss entweder mit js oder css (beide seiten könnten auch auf das selbe css/js zugreifen).

Meine frage ist also wie kann ich das bewerkstelligen. Andere idee die ich hatte ist das man ja vlt. auch einen filter über den iframe legen könnte der eine bestimmte Farbe ein eine andere ändert, bin leider relativ neu auf diesem Gebiet und habe leider keine Antwort auf Google gefunden die funktioniert

...zur Frage

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zur Frage

CSS Iframe Bearbeiten?

Hallo, meine Frage ist wie ich mit CSS den Style eins Iframes mit Textinhalt bearbeiten kann, also Schriftgröße, Farbe usw.... Bei mir hat es irgendwie nicht geklappt als ich das Frame versucht habe zu bearbeiten.

Wäre schön wenn mir jemand weiterhelfen könnte.

...zur Frage

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zur Frage

HTML Webseite: wechselbarer Inhalt des Iframe?

Hallo zusammen,

ich habe beschäftige mich nun seit etwa einer Woche mit dem Erstellen von Webseiten und wollte mal den ersten Schritt wagen und eine Seite erstellen. Spontan bin ich auf die Idee gekommen eine Art Nachrichten Seite zu erstellen und treffe nun auf folgendes Problem: Ich möchte durch das Anklicken der einzelnen Punkte in der Navigationsleiste den Inhalt des Iframes wechseln lassen, weiß aber leider nicht wie ich das anstellen soll.

(Kann bisher nur mit HTML und CSS etwas anfangen, falls jemand einen Lösungsvorschlag mit JavaScript hat, wäre ich sehr dankbar für eine Erklärung!)

...zur Frage

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zur Frage

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zur Frage

Border color Ändern?

MoinMoin Freunde

Ich würde gerne einen Text umrahme, und benutze folgenden code.

<div style="width: 460px; background-color: #ffffff; color: green; border: 7px solid #999;">

Nun will ich aber wie der Titel schon erahnen lässt, die border color noch ändern.

da ich keine CSS Kenntnisse habe, würde ich mich riesig freuen, wenn einer eine schnelle einfache Lösung hat in diesem code die border color zu ändern.

Mit freundlichen Grüssen

...zur Frage

Abstand zwischen zwei Tabellen über HTML/CSS?

table.border1 {

width: 100%; height: 50%;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

border: 2px solid #000000; }

caption {

letter-spacing: 2em;

border: 1px solid #000000;

background-color: #008080;

color: #FFFF00;

font-size: xx-large; }

th, td {

font-family: Arial;

padding: 2px;}

th {

background-color: #ccc;

border: 1px solid #000000; }

th.WT {

color: #3FFFFF; }

th.Woche {

width: 3%; }

th.Block {

width: 3%; }

th.Zeiten {

width: 4%; }

td.Woche {

font-size: 32pt;

background-color: #FFFF00;

border-bottom: 2px solid #000000;

border-right: 1px solid #000000; }

td.Block {

background-color: #ffff88;

font-size: 16pt;

border-bottom: 2px solid #000000;

border-right: 1px solid #000000; }

td.AZeit {

background-color: #ffffcc;

border-bottom: 1px dotted #000000; }

td.EZeit {

background-color: #ffffcc;

border-bottom: 2px solid #000000; }

td.Fach {

border-top: 2px solid #000000;

border-left: 2px solid #000000;

border-right: 2px solid #000000;

border-bottom: 1px dashed #000000;

background-color: #ffffe8;

color: #800000;

font-weight: bold;

width: 16%; }

td.Lehrer {

width: 10%;

border-left: 2px solid #000000;

border-bottom: 2px solid #000000;

border-right: 1px dashed #000000;

background-color: #ffffe8;

font-size: 10pt; }

td.Raum {

width: 6%;

border-bottom: 2px solid #000000;

border-right: 2px solid #000000;

background-color: #ffffe8;

font-size: 12pt; }

td.unten {

border-bottom: 5px solid #000000;

}

td.Info {

background-color: #abcdef;

}

td.Info1{

background-color: #FFFF00;

}

td.Info2{

background-color: #008080;

}

td.Info3{

background-color: #CCC;

}

td.Info4{

background-color: #00FFFF;

}

td.Info5{

background-color: #F5B3FF;

}

td.Info6{

background-color: #FF00FF;

}

td.Info7{

background-color: #808000;

}

td.Info8{

background-color: #BDEDBA;

}

td.Info9{

background-color: #FFB300;

}

td.Info10{

background-color: #00FF25;

}

td.Info11{

background-color: #FF0000;

}

td.Info12{

background-color: #B18380;

}

td.BB{

background-color: #FFFF00;

}

td.CC{

background-color: #008080;

}

td.DD{

background-color: #CCC;

}

td.EE{

background-color: #00FFFF;

}

td.FF{

background-color: #F5B3FF;

}

td.GG{

background-color: #FF00FF;

}

td.HH{

background-color: #808000;

}

td.II{

background-color: #BDEDBA;

}

td.JJ{

background-color: #FFB300;

}

td.KK{

background-color: #00FF25;

}

td.LL {

background-color: #FF0000;

}

td.MM{

background-color: #B18380;

}

table.border2{

width: 30%; height: 30%;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

border: 2px solid #000000; }

Ich möchte gerne zwischen der oberen tabell und er tabell unten(2)einen Abstand haben. Könnt ihr mir bitte schreiben wie das geht.(Die Infos in der Mitte sind nicht wichtig.)

Danke!!!!

...zur Frage

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

...zur Frage

Kann jemand diesen Button in HTML CSS umwandeln?

Hallo,

schafft es jemand, mir diesen Button in HTML und CSS zu machen?

Border color ist #f5bf8c

Font color ist #363639

Gradient links ist #fdc591

Gradient recht ist #cd9969

Und dann ist da noch so ein kleiner Schatten nach außen (gold) und nach Innen ein kleiner, schwarzer Schatten

...zur Frage

Mit CSS zwei verschiedene Tabellen verschönern?

Habe in CSS grad ne Tabelle die ich mit:

table{

width:100%;

background-color: black;

border-style: none;

height: 70px;

color: white;

text-align: center;

font: 200% serif;

}

verschönert habe. Habe jetzt aber noch eine andere Tabelle die ich andere Eigenschaften geben möchte. Wie mache ich das jetzt?

...zur Frage

Wie kann man eine Lightbox in einem iframe öffnen ohne Begrenzung des iframe?

Ich habe z.B. einen iframe mit height="400px" und width="100%". Darin befindet sich ein Element, dass per Klick eine Lightbox auf Fullscreen öffnet. Beides befindet sich auf der selben Domain/Server.

Leider öffnet die Lightbox nicht auf Fullscreen, sondern wird vom Rand des Bereiches (400px / 100%) begrenzt. Wie kann es über die Ränder hinaus gehen (fullscreen)?

PS: Das iframe möchte ich nicht auf Fullscreen einstellen, weil ich mehrere iframes untereinander haben möchte.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen