Unterschiedliche Hintergrundbilder bei pagetab-Aufbau?

dadoc · 15 März 2018, 15:22:01

Hallo zusammen,
wie kann man bei Gridster- und Pagetab-Aufbau für verschiedene Unterseiten unterschiedliche Hintergrundbilder definieren? Ist das hier Beschriebene auch dafür gültig (habe es damit nämlich nicht hinbekommen...)?
Wenn ich eine weitere user-css anlege und in index.html referenziere, erscheint deren Hintergrundbild dann leider auf allen Seiten ...
Danke für Tipps &
Viele Grüße
Martin

drhirn · 15 März 2018, 16:13:20

Ich bin mir nicht sicher, ob ich verstanden habe, was du möchtest. Aber du kannst ja dem <body> jeder Unterseite ein Hintergrundbild übergeben. Entweder direkt in der unterseite.html

Code Auswählen

<body style="background-image:url('...');">
oder indem du dem <body> eine CSS ID/Klasse zuweist und dann eine "user-css" verwendest.

Code Auswählen

<body id="unterseite1">

dadoc · 15 März 2018, 16:30:33

Zitat von: drhirn am 15 März 2018, 16:13:20
Ich bin mir nicht sicher, ob ich verstanden habe, was du möchtest. Aber du kannst ja dem <body> jeder Unterseite ein Hintergrundbild übergeben. Entweder direkt in der unterseite.html
Code Auswählen Erweitern
<body style="background-image:url('...');">

Das habe ich als erstes versucht, aber es wird trotzdem immer das Bild aus der fhem-tablet-ui-user.css geladen. Die sieht bei mir so aus:

Code Auswählen

body {
	background:#000000 url(../images/bg-1.jpg) 0 0 no-repeat;
	background-size: 1024;
 }
.semitransparent {
     background: rgb(0, 0, 0) !important;
     background: rgba(0, 0, 0, 0.7) !important;
}

Wenn ich die Referenz auf fhem-tablet-ui-user.css aus der index.html auskommentiere, wird das Standard-Hintergrundbild bg-1.jpg natürlich nicht mehr geladen - aber eben auch nicht die direkt in die Unterseite eingebundene Grafik mixer.jpg (sondern kein Hintergrundbild).

Code Auswählen

<body style="background-image:url('./images/mixer.jpg');">
Pfad müsste stimmen, wenn ich ./images/mixer.jpg als image widget einbinde, wird es angezeigt.

drhirn · 15 März 2018, 17:25:16

So, hab das grad ausprobiert. Das Hintergrundbild muss in das entsprechende li-Element.
Also wenn du z.B. das Beispiel nimmst: https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab#Navigationsleiste
dann gehört's in die Zielseite ins zweite li.

Code Auswählen


<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
	<ul>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
		<li data-row="1" data-col="2" data-sizex="4" data-sizey="4" class="left-align" style="background-image:url('../images/default/back.png');">Pagetab02.html</li>
	</ul>
</div>
</body>
</html>

dadoc · 15 März 2018, 17:36:57

Dann hast Du aber nur ein Hintergrundbild für das betreffende Gridster-Feld, nicht für die ganze Seite - oder habe ich Dich falsch verstanden?.

drhirn · 15 März 2018, 17:49:47

Ah, das Menü soll auch das Hintergrundbild haben? Sagt ja zu Begin, ich weiß nicht, was genau du möchtest

Tja, dann habe ich leider schlechte Nachrichten. Zumindest ich finde keinen Anhaltspunkt, wo man das Hintergrundbild unterbringen könnte. Da müsstest du dann wohl auf JavaScript ausweichen.

dadoc · 15 März 2018, 18:30:04

Stimmt, da war ich ungenau. Aber nein: Das Menü (eine Spalte breit am linken Rand) soll kein Hintergrundbild bekommen. Aber der ganze Content bzw. Nicht-Menü-Teil, der ja aus diversen Gridster-Elementen besteht.

CQuadrat · 08 November 2018, 07:40:30

Hallo Zusammen,

ich stehe momentan vor dem selben Problem: ich will das Hintergrund nur auf der "Startseite" haben. Auf allen anderen zu navigierenden Seiten soll kein Hintergrundbild sein.
Gibt es dazu mittlerweile eine Lösung?

Danke und Gruß

Christoph