Verändern eines div-element per usercontent.css möglich?

lupus52

Hallo,

ich habe ein NAS und diese eine Konfigurationsoberfläche in HTML. Leider hat der Programmierer einen div-Bereich falsch deklariert, so dass ein Teil der Breite abgeschnitten wird. Ist es möglich per usercontent.css oder anders die Spaltenbreite nachträglich zu verändern? Ich habe keinen Zugriff auf den Quellcode. Sonst würde ich da die Vorlage ändern.

Es muss also nach dem Aufruf der Seite passieren. Irgendwie.

Der relevante Teil aus dem Quelltext:

Code

<div dojoType="LayoutContainer" layoutChildPriority='left-right' style="width: 100%; height: 100%;">


			<div dojoType="LinkPane" id="leftMenuPane" layoutAlign="left" executeScripts="true" href="frame_left_menu.html" style="width: 178px; height: 100%; margin: 0; padding: 0; background-image: url(../res/image/panel_bg0.gif); background-repeat: repeat-y;"></div>


			<div dojoType="ContentPane" layoutAlign="client">
				<div dojoType="LayoutContainer" layoutChildPriority="top-bottom" style="width: 100%; height: 100%;">


					<div dojoType="ContentPane" id="navigationPane" layoutAlign="top" executeScripts="true" href="frame_navigation_bar.html" style="width: 100%; height: 19px; background-image: url(../res/image/full_path_bg.gif); border: 0px;"></div>


					<div dojoType="ContentPane" id="statusPane" layoutAlign="bottom" executeScripts="true" href="frame_status_bar.html" style="width: 100%; height: 34px; background-image: url(../res/image/bottom_bg.gif);"></div>


					<div dojoType="ContentPane" layoutAlign="client" id="contentPane" cacheContent="true" executeScripts="true" style="background-image: url(../res/image/config_bg.gif);"></div>


				</div>
			</div>

Alles anzeigen

Mit diesem Code wird die Hauptansichtsfläche aufgebaut. Der linke Bereich "LinkPane", früher hätte man wohl Frame gesagt, ist mit 178 Pixel Breite definiert. Ich bräuchte aber 250 damit der Text rein passt. Deutsch ist einfach breiter als englisch. Und der Programmierer hat hier eine Fixbreite von 178 eingesetzt. Für Englisch reicht das. Für Deutsch ist es zu schmal.

Gibt es da eine Möglichkeit?

aborix

Hallo!

Teste in der userContent.css:

Code

#leftMenuPane {width: 250px !important}

lupus52

Hallo und danke.

Das hat leider keinerlei Auswirkung. Meine usercontent.css müsste im richtigen Verzeichnis sein. Es war keine dar und wurde angelegt wie woanders beschrieben.

Wenn ich mit "Element untersuchen" mir die Quelltexte anschaue stehen da die 178 jetzt an zig Stellen. Wird wohl vererbt?

Habe ein paar davon testhalber mal auf 250 geändert Das hatte teilweisen Einfluss. So wurde z.B. der linke "Frame" breiter. D.h. der rechte Block wurde schmäler und fing um den entsprechenden Wert weiter rechts an. Zum Teil wurde auch die vorher verdeckte Schrift sichtbar. Aber die wohl hinterlegte helle Hintergrundgrafik in dem Bereich bleibt bei 178. Ich finde aber nicht die Stelle, woher die Grafik kommt. Sonst könnte man die ja vielleicht nach rechts stretchen.

Wie kann ich denn testen, ob die userconent überhaupt Einfluss nimmt oder nehmen kann? Ich bin da Laie mit Grundkenntnissen in HTML.

aborix

Die userContent.css muss im Ordner chrome liegen und dieser im Profilordner, s. Bild.
Die Namen userContent.css und chrome müssen genau stimmen, inkl. Groß- und Kleinbuchstaben.

Um zu sehen, ob die userContent.css überhaupt eine Wirkung hat, teste mit:

CSS

#leftMenuPane {background-color: green !important; background-image: none !important;}

Damit müsste der Hintergrund grün sein, ohne Bild.

Oder mit:

Code

#leftMenuPane {display: none !important}

Damit müsste das Element komplett verschwinden.

Die URL der Hintergrundgrafik findet man so:
Klick auf "Element untersuchen", dann im rechten Teil den Inspektors auf "Berechnet", und bei background-image steht die URL.
Welche Maße hat das Bild?

Speravir

Ergänzung zu Aborix: Wenn man userContent.css nutzt, wirken sich Änderungen erst nach einem Browser-Neustart aus. Genauso ist es übrigens bei userChrome.css.

Zur URL des Hintergrundbildes: Die steht als relativer Pfad im geposteten Code:

Code

background-image: url(../res/image/panel_bg0.gif);

Aborix’ Tip sollte den absoluten Pfad liefern.