[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
Background Pic im CSS per REX_MEDIA_BUTTON? - REDAXO Forum
Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

Background Pic im CSS per REX_MEDIA_BUTTON?

29. Mai 2005, 22:55

Suche eine etwas aussergewöhnliche Lösung und komme nicht weiter. Ich müsste ein Bild (via REX_MEDIA_BUTTON[1]) im Stylesheet (bzw. style tag im Modul) per Medienpool verwalten.
Der Aufbau ist folgendermaßen. Im Modul steht im Header:
<style type="text/css">
<!--
.rbbox { background: url(../bilder/testpic.jpg) no-repeat; }
-->
</style>
Das ".../textpic" möchte ich verwalten können!
Das Bild wird als Hintergrund benötig, da ich per css verschiedene Kantenformen eines Bildes generieren kann, obwohl nur ein viereckiges in den Medienpool geladen wird!
Ist dies überhaupt möglich?

gruß
gab

Benutzeravatar
Markus.Staab
Entwickler
Beiträge: 9634
Registriert: 29. Jan 2005, 15:50
Wohnort: Aschaffenburg/Germany
Kontaktdaten: ICQ Website

30. Mai 2005, 08:28

Hi gab,

ich verstehe das Problem nicht ganz.

Könntest du nochmal versuchen es anders zu umschreiben?

Gruß,
Markus

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

30. Mai 2005, 09:31

Ok, ich versuche, es genauer zu erklären. Ich kann ja ganz normal per REX_MEDIA_FILE Bilder in meinen Modulen verwenden, die dann irgendwie formatiert mit Text etc. in Kombination mit Templates auf der Website erscheinen.
Das Problem ist, dass ich für meine Zwecke eine CSS Definition habe, wo ich ein Bild in den Background eines per CSS definierten Boxen-Konstrukts legen muss. Somit erhalte ich z.B. runde Ecken, obwohl das Bild rechteckig in den Medienpool hochgeladen wird! Das ist meines Wissens der einzige Trick, runde Ecken hinzubekommen, ohne das Bild selbst manipulieren zu müssen. Dieses Background Bild möchte ich in meinen Artikeln ändern und verwalten können.

Falls immer noch nicht klar, paste ich mal den Source Code hier hin...


Gruß
gab

Goldfisch
Beiträge: 230
Registriert: 22. Sep 2004, 17:47
Wohnort: Aschaffenburg
Kontaktdaten: Website

30. Mai 2005, 11:09

wäre sowas nicht möglich? wenn ich es richtig verstanden habe.

Code: Alles auswählen

<?
echo "<div id=\"box\" style=\"float: right; padding: 4px 10px 5px 0; background: url(/files/FILE[1]) top right no-repeat\"></div>";
?>

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

30. Mai 2005, 14:14

Danke für den Lösungsansatz. Ich bekomme es leider so nicht hin. Vielleicht habe ich auch einen Denkfehler drin, bin nicht direkt der CSS-Profi. Aber das Konstrukt funktioniert einwandfrei mit folgendem Code. Ein im Stylesheet angegebenes Bild (background: url(../bilder/testbild.jpg) no-repeat;) wird mit runden "Ecken" dargestellt!

Hier ist der Code für die darzustellende Seite (der dann im Modul so umgebaut werden müsste, dass ein beliebig im Artikelmodul eingesetztes Bild genommen wird)

<html>
<head>
<link href="../styles/styles.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<p><div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent"></div>
<div class="rbbot"><div></div></div>
</div>
</p>
</body>
</html>

Und hier der code des stylesheets:

/* set background images for corners */
.rbroundbox { background: url(../bilder/testbild.jpg) no-repeat; }
.rbtop div { background: url(../bilder/rc_top_left.png) no-repeat top left; }
.rbtop { background: url(../bilder/rc_top_right.png) no-repeat top right; }
.rbbot div { background: url(../bilder/rc_bottom_left.png) no-repeat bottom left; }
.rbbot { background: url(../bilder/rc_bottom_right.png) no-repeat bottom right; }

/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 77px;
font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 15em; margin: auto; }

Vielleicht hilft das ja weiter. Die "runden" Ecken werden durch die Überlagerung der jeweiligen Bilder "top_left", "top_right" etc. erzeugt.
Ich finde die Funktion an sich genial, da man sehr flexibel ist (wenn man feste BIldgrößen nimmt!). Der User lädt ein Bild in den Medienpool und es wird per CSS gesteuert, wie die Kanten etc. dargestellt werden.
Wäre toll, wenn dies irgendwie funktionieren würde.

Gruß
gab

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

30. Mai 2005, 15:24

Hej,

könnte es daran liegen, das dein Ordner bilder heisst und nicht files wo die Medienpooldateien hochgeladen werden? Denn das von goldfisch sollte m.E. klappen.

lg Thomas

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

30. Mai 2005, 16:13

Nein, leider nicht, Bilder des Medienpools liegen in /files!
Wenn ich das richtig verstanden habe, muss ich den code von "Goldfisch" in die Ausgabe des Moduls einsetzen? Aber wie und wo muss ich Veränderungen vornehmen, damit es funktioniert? Wie gesagt läuft es ja ohne Einbindung in Redaxo wunderbar. Nur kann ich dann keine Bilder per Artikelmodul austauschen.

Nochmal die Beschreibung, wie es bereits funktioniert:

Der Code auf einer beliebigen HTML-Seite
<p><div class="rbroundbox"> = ruft das Background-Bild aus dem im CSS definierten Pfad auf.
Dazugehörige Angabe im CSS:
.rbroundbox { background: url(../bilder/rc_background3.jpg ) no-repeat; }

und folgendes platziert in einer beliebigen HTML-Seite die im CSS definierten Eckbilder über dem im CSS definierten Background-Bild!
<div class="rbtop"><div></div></div>
<div class="rbcontent"></div>
<div class="rbbot"><div></div></div>
</div>

Die Eckbilder sind lediglich kleine Quadrate mit einem transarenten Bereich (der sich dann über dem Background-Bild befindet) und der Abrundung in der Farbe des Seitenhintergrundes.

Gruß
gab

Goldfisch
Beiträge: 230
Registriert: 22. Sep 2004, 17:47
Wohnort: Aschaffenburg
Kontaktdaten: Website

30. Mai 2005, 17:22

du kannst nur bei der ausgabe, also an der stelle im dokument, an der das modul eingesetzt wird, den wert aus FILE[1] holen und dort einsetzen. also es geht auch im template, aber es macht keinen unterschied.
die betreffenden styles in einem extern dokument zu definieren, macht hier wenig sinn, da sie dort nicht mehr veränderbar sind.

hier schon. nur muss du die angaben direkt an ort und stelle angeben.
dann kannst du sie auch manipulieren.


ausgabe des moduls:

Code: Alles auswählen

<?

echo "
<p>
<div id=\"rbroundbox\" style=\"background: url(../files/FILE[1] ) no-repeat;\"></div>
";

?>

ich hab den exakten syntax jetzt nicht ausprobiert, sollte aber gehen.


wenn du einen link hast, wo du das setup hast, dann könnte man sich daten mal kopieren und es probieren.

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

30. Mai 2005, 20:21

Ich habe es!!! Der Code im Ausgabemodul von Goldfisch war vom Ansatz her gut und hat mich auf die richtige Fährte gebracht. Musste noch einiges ausprobieren und hizufügen, aber jetzt klappt es! Genial.

Vielen Dank!!!

Gruß
gab

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

30. Mai 2005, 21:21

Hej,

würdest du denn den Code auch für andere zugänglich machen?

lg Thomas

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

31. Mai 2005, 11:39

Ja klar, hier im Forum bekommt man immer sehr hilfreiches Feedback - genial. Das muss man unterstützen.
Soll ich den Code hier pasten od. zumailen...?
Muss aber erst noch ausprobieren, ob es auch in versch. Versionen des IE läuft. In Safari und Firefox funktioniert es.


Gruß
Gab

Benutzeravatar
Markus.Staab
Entwickler
Beiträge: 9634
Registriert: 29. Jan 2005, 15:50
Wohnort: Aschaffenburg/Germany
Kontaktdaten: ICQ Website

31. Mai 2005, 11:58

Hi gab,

poste einfach hier deine Ein/Ausgabe des Moduls.

Gruß,
Markus

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

31. Mai 2005, 12:57

Die Eingabe habe ich nicht verändert. Ist ein Standard REX_MEDIA_BUTTON.

Beispielsweise so:

<b>Bild:</b>
REX_MEDIA_BUTTON[1]

<?

if ("FILE[1]" != "")
{
echo "<img src=$REX[HTDOCS_PATH]/files/FILE[1] width=155>";
}

?>


Die Ausgabe lautet:
<?
echo "<div class=\"rbroundbox\" style=\"width: 239px; heigth: 155px; margin: auto; background: url(files/FILE[1]) no-repeat\">";

echo "<div class=\"rbtop\"><div></div></div>";

echo "<div class=\"rbbot\" ><div></div></div></div>";

?>

...wobei im dazugehörigen stylesheet rbtop, rbbot etc. definiert werden müssen. Oder man schreibt es direkt in das Modul, wie man möchte. Die Höhenangabe bei "height and width details" muss man an die Bildhöhe anpassen. Das ist ein relativer Wert, so ganz genau habe ich keine Richtlinie, welcher Bildhöhe (px) ein entsprechender exakter Wert entspricht.

CSS:

/* Hintergrundbilder für Ecken */

.rbtop div {
background: url(//top_left.png) no-repeat top left;
}


.rbtop {
background: url(/top_right.png) no-repeat top right;
}


.rbbot div {
background: url(/bottom_left.png) no-repeat bottom left;
}


.rbbot {
background: url(/bottom_right.png) no-repeat bottom right;
}


/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 103em;
font-size: 1px;
}


Gruß
gab

Benutzeravatar
Markus.Staab
Entwickler
Beiträge: 9634
Registriert: 29. Jan 2005, 15:50
Wohnort: Aschaffenburg/Germany
Kontaktdaten: ICQ Website

31. Mai 2005, 16:33

Hi,

danke erstma!

Wo hast du das ganze im Einsatz?

Gibts da ne url wo man sich das ansehen kann?

Gruß,
Markus

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

31. Mai 2005, 17:30

Noch nicht, da bin ich gerade dran. Gehört zum CI, das mit den runden "Ecken", deswegen habe ich mich überhaupt damit beschäftigt. Das hat mich einige Stunden gekostet ;-)

Wenn fertig, poste ich die URL, dauert noch etwas!


Gruß
gab

gab
Beiträge: 42
Registriert: 26. Jan 2005, 11:37

8. Jun 2005, 13:18

Hi,

habe noch eine Anmerkung zu den "runden" Ecken. Ich hatte das zuerst mit PNGs versucht, aber nicht berücksichtigt, dass der Internet Explorer keine PNGs mit Transparenz anzeigen kann. Also müsste man gifs nehmen. Leider habe ich das mit der Qualität bei den gifs nicht so hinbekommen, sodass die Rundungen gerastert waren etc.
Habe auch mit der IE-spezifischen Filter Funktion experimentiert, mit deren Alpha() Funktion man Vordergrundelemente und Hintergrundelemente ineinander verschmelzen lassen kann - ging auch nicht so wie ich wollte.
IE 7 soll angeblich PNGs voll unterstützen. Aber funktioniert vom Prinzip her schon, nur im Moment habe ich das erstmal auf Eis gelegt.


Gruß
gab

Goldfisch
Beiträge: 230
Registriert: 22. Sep 2004, 17:47
Wohnort: Aschaffenburg
Kontaktdaten: Website

8. Jun 2005, 13:56

den typ kann ich zwar nicht ab, aber die seite von jamie oliver finde ich sehr gut gemacht.

wenn ich mich richtig erinnere, hab ich bei durchlesen des css files gesehen, dass die abgerundeten ecken der verschiedenen boxen ohne grafiken gemacht sind.

schau doch mal dort rein.
http://www.jamieoliver.net/

der xml mob blog über das handy ist auch bemerkenswert.

Zurück zu „Allgemeines [R2]“