HTMLBox zerschießt Webfront

Ich will eigentlich nur in einer HTMLBox CSS verwenden.


$html = '<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Echo Info</title>
<style type="text/css">
.mediaplayer {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	background-color: hsla(0,0%,100%,0.00);
	color: hsla(0,0%,100%,1.00);
	text-shadow: 1px 1px 3px hsla(0,0%,0%,1.00);
}
.cover {
	display: block;
	float: left;
	padding-left: 8px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
}
.mediaplayer .cover #echocover {
	-webkit-box-shadow: 2px 2px 5px hsla(0,0%,0%,1.00);
	box-shadow: 2px 2px 5px hsla(0,0%,0%,1.00);
}
.description {
	vertical-align: bottom;
	float: none;
	padding-top: 60px;
	padding-right: 11px;
	padding-bottom: 11px;
	padding-left: 11px;
	margin-top: 0px;
}
.title {
	font-size: xx-large;
}
.subtitle1 {
	font-size: large;
}
.subtiltle2 {
	font-size: large;
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;acme:n4:default;bilbo:n4:default.js" type="text/javascript"></script>

</head>

<body>
<main class="mediaplayer">
  <section class="cover"><img src="' . $imageurl . '" width="145" height="145" id="echocover"></section>
  <section class="description">
    <div class="title">' . $title . '</div>
    <div class="subtitle1">' . $subtitle_1 . '</div>
    <div class="subtiltle2">' . $subtitle_2 . '</div>
  </section>
</main>
</body>
</html>';
		$this->SetValue("EchoInfo", $html);

das zerschießt mir aber den Webfront.

Die Schriftgröße und anscheinend auch Schriftart wird im gesamten Webfront geändert, was ich aber nicht will.

Was mache ich ich falsch, es hat doch jedes Element seine eigene class und ich kann mir nicht vorstellen das der Webfront exakt die gleiche class nutzt.

Wie muss man also vorgehen um CSS nur in der HTMLBox zu nutzen ohne den restlichen Webfront irgendwie unabsichtlich mit zu ändern?

Doch :frowning: die Klasse „title“ wird schon von der Webfront.css verwendet!

Ciso Pitti

Ah :eek:, ok danke für die Info.

Was doch eine kleine Änderung alles bewirkt jetzt ist alles ok.

Gibt es denn irgendwo eine dokumentierte Liste der Klassen, die der Webfront benutzt, die man in dem Fall dann nicht nutzten darf?

Bevor man alle Klassen scannt bietet sich ein Prefix für eigene Sachen an, z.B. „myTitle“ oder „my_title“ :slight_smile:

Ciao Pitti

Das ist soweit korrekt, da die HTMLBoxen direkt im „WebFront“ drin sind und somit das CSS vom WebFront teilen. Wenn alle Browser übergreifend ShadowDOM unterstützen, könnte man dies besser „absichern“… aber noch ist es nicht soweit.

paresy