NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:andere-erweiterungen:runde-ecken-in-bildern [2009/04/25 08:05] 127.0.0.1 external edit |
deutsch:andere-erweiterungen:runde-ecken-in-bildern [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ====== Runde Ecken in Bildern ====== | ====== Runde Ecken in Bildern ====== | ||
| - | |||
| - | FIXME übersetzen | ||
| Forum: [[http://forum.phpwcms.org/viewtopic.php?f=27&p=112420#p112420]] \\ | Forum: [[http://forum.phpwcms.org/viewtopic.php?f=27&p=112420#p112420]] \\ | ||
| Line 10: | Line 8: | ||
| \\ | \\ | ||
| - | Wouldn't it be nice to "make" an image with rounded corners on the fly, only by choosing a template (yes, that simple so everybody now can be a shotophop hero)? | + | Wäre es nicht nett, ein Bild mit abgerundeten Ecken zu erstellen, "im vorbeigehen" sozusagen, indem man einfach ein Template auswählt (ja, so einfach, dass jetzt jedermann ein Photoschopp- Held sein kann)? |
| - | Ok, here we go: | + | Ok, hier geht's los: |
| - | ==== Files ==== | + | ==== Dateien ==== |
| - | * **Copy the following code and save it as ##cornerframed.tmpl## in ##template/inc_cntpart/images/ ##** | + | * **Kopiere den folgenden Code und speichere ihn als ##cornerframed.tmpl## in ##template/inc_cntpart/images/ ##** |
| Line 97: | Line 95: | ||
| \\ | \\ | ||
| - | * **Copy the following code and save it as "cornerframed.css" in ##template/inc_css/specific/ ##** | + | * **Kopiere den folgenden Code und speichere ihn als "cornerframed.css" in ##template/inc_css/specific/ ##** |
| <code css|h cornerframed.css |h> | <code css|h cornerframed.css |h> | ||
| Line 135: | Line 133: | ||
| } | } | ||
| </code> | </code> | ||
| - | See how the wrapper.className of the script is corresponding with the div.rwrapper of the CSS. Everything within this wrapper will be "treated", but nothing outside of it. | + | Schau Dir an, wie "wrapper.className" des Scriptes korrespondiert mit "div.rwrapper" des CSS. Alles innerhalb dieses Wrappers wird "behandelt", aber nichts aaußerhalb davon. |
| - | ==== Images ==== | + | ==== Bilder ==== |
| - | Now you need to fiddle together some images - 4 exactly. Make your own ones, borrow them from elsewhere or take these (they are not mine, but from the originating site, so please do them on your own, but with these you'll get the idea). I will post some new ones later on (probably ;) ) | + | Jetzt musst Du nur noch ein paar Bilder zusammenfummeln - 4, um genau zu sein. Mach Deine eigenen, borge sie von irgendwo oder nimm die hier (das sind nicht meine, sie sind von der Originalseite, also mach bitte Deine eigenen, aber mit Hilfe der hier vorliegenden bekommst Du schon mal eine Idee davon, wie alles funktioniert). Ich werde später ein paar neue posten (wahrscheinlich ;) ) |
| <note tip> | <note tip> | ||
| - | In this example I have placed them into a folder named "pics", but you can throw them anywhere (but then you'll have to edit the CSS-file accordingly) | + | In diesem Beispiel habe ich sie in ein Verzeichnis "pics" gesteckt, aber Du kannst sie genau so gut irgendwoanders hinstecken (aber die CSS-Datei muss dann natürlich entsprechend angepasst werden) |
| </note> | </note> | ||
| Download: {{:deutsch:andere-erweiterungen:images.zip|Images}} | Download: {{:deutsch:andere-erweiterungen:images.zip|Images}} | ||
| - | + | Jetzt bleibt Dir nur noch zu tun, einen Artikel im Backend zu editieren, einen neuen Content Part "Bilder<div>" zu erstellen, das obige Template auszuwählen und ein Bild (oder mehrere) und los geht's! :) | |
| - | Now your only task will be to edit one of your articles in backend, add another Content Part "images(div)", select the new template, choose one or many images and off it goes. | + | Fröhliches Runden! |
| - | Happy rounding! | + | |
| <note> | <note> | ||
| - | All this can be seen in it's original beauty at \\ | + | All' das kann in seiner originalen Schönheit angeschaut werden auf \\ |
| [[http://sitepoint.com/examples/rounded_images/]] | [[http://sitepoint.com/examples/rounded_images/]] | ||
| - | I had to change very few parts of the script to get it going. Very nice! Thank you! | + | Ich hatte sehr wenig am Script zu ändern, um es für phpwcms zum Laufen zu bringen. Sehr nett! Danke! |
| </note> | </note> | ||
| <note important> | <note important> | ||
| - | Since this is relying on JS the fallback is simple too: just no rounded corners, that's all. | + | Da das Script sich auf eingeschaltetes Javascript verlässt, ist bei **aus**geschaltetem JS lediglich eben **kein** Bild zu sehen. |
| - | Many thanks for your attention :lol: | + | Vielen Dank für Ihre Aufmerksamkeit :lol: |
| </note> | </note> | ||
