Tutorial: Newsbox mit runden Ecken dynamisch (!) erstellen

If you have created additional (non official) documentation or tutorials or something like that please post this here
Post Reply
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Tutorial: Newsbox mit runden Ecken dynamisch (!) erstellen

Post by santscho »

Ich habe einen Weg gefunden, Newsboxen mit abgerundeten Ecken dynamisch zu generieren. Realisiert im Backend wird die Box mit dem Contentpart "Einfacher Text". Es werden dazu speziell für die CP mit runden Ecken Templates erstellt, die im CP "Einfacher Text" ausgewählt werden können. Läuft mit Javascript.

Die Newsbox ist zweifarbig: Ein farbiger Balken für den Titel und der farbige Hintergrund der Inhaltbox.

WICHTIG! Ich alles was ihr wie hier unten beschrieben macht, ist euer eigenes Ding. Es sind nur Ansätze, die sicher verbessert werden können. Jedenfalls übernehme ich keine Verantwortung. Aber alle Schritte lassen sich zum Glück wieder rückgängig machen :-)


Zuerst alles downloaden: http://www.mediasolution.com.sg/downloa ... ewsbox.zip

1. "Nifty_News_1.css" und "Nifty_Corners.css" kopieren nach template/inc_css/

2. Ordner NiftyCube (enthält "niftycube.js") kopieren nach template/

Wichtig: Der Ordner "NiftyCube" NICHT umbenennen!

3. Abspeichern der Vorlage "newsbox1.tmpl" unter: template/inc_cntpart/plaintext/
Wobei hier der Name des Templates frei gewählt werden kann.

4. Einfügen der Javascript aus der Datei "Javascripts.txt" in den Header des PHPWCMS-Templates.

WICHTIG: Ich habe jedoch noch nicht getestet, ob "Runde Ecken" gleichzeitig mit Lightbox, GoogleMap oder MooFX funktioniert.

5. WICHTIG: Aktivieren der CSS "Nifty_News_1.css" und "Nifty_Corners.css" im Template nicht vergessen!

6. Einer Ebene das Template mit den enthaltenen Javascripts zweisen

7. In dieser Ebene einen Artikel erstellen

8. Contentpart "Einfacher Text" auswählen

9. Titel einfügen und Text schreiben

10. Vorlage auswählen

11. Speichern

12. Geniessen


TIPPS: Wenn der Titel der Newsbox nicht in <h4>, sondern z.B. in <h3> erscheinen soll, muss man alle <h4> in der CSS "Nifty-News1.css" und "newsbox1.tmpl" nach h3 ändern!

in der CSS-Datei "Nifty-News1.css" sind schon 3 Boxenstile vordefiniert; "one" "two" "three". Einfach anpassen oder beliebig viele neue generieren.
Natürlich auch im Template "newsbox1.tmpl" auswechseln. Man kann z.B. auch das Template mehrfach duplizieren und anders konfigurieren.

Die breite der Newsbox kann auch in dieser CSS abgeändert werden. So sind alle Newsboxen, erstellt mit dem selben Template, im Frontend einheitlich breit. Farben und Schriften werden auch in dieser CSS definiert.

Anmerkungen:
Ich habe auch schon Versuche mit Templates für den CP "Teaser" gemacht. Funktioniert! Ebenfalls kann man die Artikeltitel in abgerundeten Boxen darstellen lassen. und und und....
Vieles ist möglich: z.B. nur zwei gegenüberliegende Ecken abgerundet. Habe aber noch keine Zeit gefunden, dies auszuprobieren.


Ich mache einen Kurztrip nach Hongkong und kann erst am Sonntag wieder ins Forum.

Santscho
[/b]
Pappnase

Post by Pappnase »

hallo

haste du mal ein beispiel wo du es schon eingesetzt hast :-)
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Post by santscho »

Nein :-)

Habe es letzte Nacht ausgetüftelt, und ausprobiert. Aber da ich nach Hong Kong fliege, hatte ich keine Zeit, eine Beispielseite zu erstellen.

Aber hier ein Screenshot der drei Stile:

Image
Pappnase

Post by Pappnase »

hehe

habe mir mal erlaubt aus dem link nen img zu machen ;-)

muss ich mir mal anschauen sieht interessant aus :-)
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Post by update »

User avatar
defect
Posts: 95
Joined: Thu 27. Jan 2005, 17:17
Location: Rostock
Contact:

Re: Tutorial: Newsbox mit runden Ecken dynamisch (!) erstellen

Post by defect »

Hy All,

kann es sein das alle RoundCorner JS nicht funzen wenn sie auf nem Bild liegen? Die transparenz versagt dann?! Sprich die Ecken werden weiß.

Greetz Chrischan
Post Reply