Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

Text-Editor in NOF News-Komponente einbauen...
#76
... na - das passt doch thumbs up
Alle Beiträge dieses Benutzers finden
#77
Hallo Doris,
warum sind denn diese CSS Befehle direkt im Quelltext und nicht ausgelagert?

Code:
body {
   font-family: Verdana;
   font-size: 12px;
   line-height: 20px;
  }

  /* Link */
  a:link, a:visited {
   color: #0000EE;
   text-decoration: None;
  }
  a:hover {
   color: #EE0000;
  }

  /* Suche */
  form#suche {
  text-align: right;
  }

  /* Kategorien */
  p#kategorien {
   text-align: left;
  }

  /* Nachrichten */
  dl.nachrichten {
   padding: 0;
   margin-left: 3rem;
    
  }

  /* Nachrichten - Überschrift */
  dl.nachrichten dt span {
   font-size: 1.0rem;
   font-weight: bold;
  }

  /* Nachrichten - Bild */
  dl.nachrichten dd img.bild {
   margin-top: 1.5rem;
   margin-right: 2rem;
   margin-bottom: 1.5rem;
   margin-left: 2.5rem;
   padding-right: 0;
   border: Solid 0 #C0C0C0;
   float: left;
  }

  /* Nachrichten - Hintergrund zeilenweise einfärben! */
  dl.nachrichten:nth-child(even) {
   background-color: no color;
   border-top: solid 1px rgb(225,225,225);
   border-bottom: solid 1px rgb(225,225,225);
   padding-top: 3rem;
   padding-bottom: 2rem;
   padding-left: 0;
   margin-top: 2rem;
   margin-bottom: 2rem;
   margin-left: 0;
   margin-right: 0;
   border-radius: 0px;
  }
  dl.nachrichten:nth-child(odd) {
   background-color: #F5F5F5;
   border-radius: 12px;

  }

  /* "NEU"-Markierung der Nachrichten */
  dl.nachrichten dt span.neu {
   color: #AF2B6C;
   font-size: 1.2rem;
   font-style: Verdana;
   text-shadow: 1px 1px 1px #252525;
   font-style: italic;
  }

  /* Navigation (Vorherige Seite - Nächste Seite) */
  p#navigation {
   text-align: center;
  }

  /* Newsticker */
  marquee {
   width: 60%;
   margin: 0 20% 0 20%;
   outline: solid 1px #E3E9EF;
  }

LG
Dozi
#78
... weil sie bisher nur mit dem PHP-Code beschäftigt war Rolleyes und das eben erst einmal alles so angepasst hat, dass es nun eben auch als CMS für ihre Seite anwendbar ist.

... das ist nicht wirklich einfach.
Alle Beiträge dieses Benutzers finden
#79
Das habe ich auch nicht in Abrede gestellt Tomy. Trotzdem sollten CSS Befehle nicht direkt im Qurlltext stehen, sondern ausgelagert sein. Das kann Doris ja im Nachgang noch machen. Wink

LG
Dozi
#80
ach nee Kussmund

:talk:
Alle Beiträge dieses Benutzers finden
#81
:D
#82
hallo Dozi :-)

Weil ich das ins Layout-HTML der Seite schreiben sollte, auf der die Einträge zu sehen sein sollen, nehme ich an.

Ansonsten weiß ich nicht, wieso der im Quelltext ist.

Wie lagert man das denn aus?
Ist das kompliziert?

(13.12.2013, 19:22)Dozi schrieb: Hallo Doris,
warum sind denn diese CSS Befehle direkt im Quelltext und nicht ausgelagert?

Code:
body {
   font-family: Verdana;
   font-size: 12px;
   line-height: 20px;
  }

  /* Link */
  a:link, a:visited {
   color: #0000EE;
   text-decoration: None;
  }
  a:hover {
   color: #EE0000;
  }

  /* Suche */
  form#suche {
  text-align: right;
  }

  /* Kategorien */
  p#kategorien {
   text-align: left;
  }

  /* Nachrichten */
  dl.nachrichten {
   padding: 0;
   margin-left: 3rem;
    
  }

  /* Nachrichten - Überschrift */
  dl.nachrichten dt span {
   font-size: 1.0rem;
   font-weight: bold;
  }

  /* Nachrichten - Bild */
  dl.nachrichten dd img.bild {
   margin-top: 1.5rem;
   margin-right: 2rem;
   margin-bottom: 1.5rem;
   margin-left: 2.5rem;
   padding-right: 0;
   border: Solid 0 #C0C0C0;
   float: left;
  }

  /* Nachrichten - Hintergrund zeilenweise einfärben! */
  dl.nachrichten:nth-child(even) {
   background-color: no color;
   border-top: solid 1px rgb(225,225,225);
   border-bottom: solid 1px rgb(225,225,225);
   padding-top: 3rem;
   padding-bottom: 2rem;
   padding-left: 0;
   margin-top: 2rem;
   margin-bottom: 2rem;
   margin-left: 0;
   margin-right: 0;
   border-radius: 0px;
  }
  dl.nachrichten:nth-child(odd) {
   background-color: #F5F5F5;
   border-radius: 12px;

  }

  /* "NEU"-Markierung der Nachrichten */
  dl.nachrichten dt span.neu {
   color: #AF2B6C;
   font-size: 1.2rem;
   font-style: Verdana;
   text-shadow: 1px 1px 1px #252525;
   font-style: italic;
  }

  /* Navigation (Vorherige Seite - Nächste Seite) */
  p#navigation {
   text-align: center;
  }

  /* Newsticker */
  marquee {
   width: 60%;
   margin: 0 20% 0 20%;
   outline: solid 1px #E3E9EF;
  }

LG
Dozi
Alle Beiträge dieses Benutzers finden
#83
Hi,

... ich hatte ja in meinem Beitrag #25 das hier geschrieben, da ich keine Lust hatte Dir was zu erklären, bevor nicht klar ist, ob Du Dich überhaupt für dieses Nachrichten Skript entscheidest:

Zitat:Wie man eine CSS-Datei verlinkt, können wir Dir ja später erklären (passieren tut dann auch nichts anderes, nur befindet sich dann diese CSS eben in einer extra Datei und nicht mehr direkt auf der Seite).

gucke doch einfach mal auf meiner Nachrichten-Seite den Quelltext an. Rechte Maustaste um im Kontext-Menü "Seitenquelltext anzeigen" wählen.

Dann siehst Du oben die Verlinkung zu einer CSS Datei "nachrichten.css" mit den Anweisungen, die Du jetzt direkt auf der Seite hast. Das gehört dann bei NOF in die HTML des Layouts Deiner Formular-Seite > "Zwischen Head Tags" - also anstelle der jetzigen Style-Anweisung die bei Dir jetzt dort steht.

Also diese Verlinkung:

Code:
<link rel="stylesheet" type="text/css" href="./nachrichten.css">

Ich habe die Klassen dieses Stylesheets in eine Datei kopiert und dann auf diese verlinkt. Der eine Punkt vor

./nachrichten.css

bedeutet > "bleibe im gleichen Verzeichnis". In Deinem Fall könntest Du also dann die Datei

nachrichten.css

in das Verzeichnis "html" mit Deinem FTP-Programm auf Deinen Server kopieren.

Öffne also z.B. Deinen "Windows Editor" und kopiere diese Klassen (ohne das <style> oben und das </style> unten) dort hinein - also das hier:

Code:
body {
   font-family: Verdana;
   font-size: 12px;
   line-height: 20px;
  }

  /* Link */
  a:link, a:visited {
   color: #0000EE;
   text-decoration: None;
  }
  a:hover {
   color: #EE0000;
  }

  /* Suche */
  form#suche {
  text-align: right;
  }

  /* Kategorien */
  p#kategorien {
   text-align: left;
  }

  /* Nachrichten */
  dl.nachrichten {
   padding: 0;
   margin-left: 3rem;
    
  }

  /* Nachrichten - Überschrift */
  dl.nachrichten dt span {
   font-size: 1.0rem;
   font-weight: bold;
  }

  /* Nachrichten - Bild */
  dl.nachrichten dd img.bild {
   margin-top: 1.5rem;
   margin-right: 2rem;
   margin-bottom: 1.5rem;
   margin-left: 2.5rem;
   padding-right: 0;
   border: Solid 0 #C0C0C0;
   float: left;
  }

  /* Nachrichten - Hintergrund zeilenweise einfärben! */
  dl.nachrichten:nth-child(even) {
   background-color: no color;
   border-top: solid 1px rgb(225,225,225);
   border-bottom: solid 1px rgb(225,225,225);
   padding-top: 3rem;
   padding-bottom: 2rem;
   padding-left: 0;
   margin-top: 2rem;
   margin-bottom: 2rem;
   margin-left: 0;
   margin-right: 0;
   border-radius: 0px;
  }
  dl.nachrichten:nth-child(odd) {
   background-color: #F5F5F5;
   border-radius: 12px;

  }

  /* "NEU"-Markierung der Nachrichten */
  dl.nachrichten dt span.neu {
   color: #AF2B6C;
   font-size: 1.2rem;
   font-style: Verdana;
   text-shadow: 1px 1px 1px #252525;
   font-style: italic;
  }

  /* Navigation (Vorherige Seite - Nächste Seite) */
  p#navigation {
   text-align: center;
  }

  /* Newsticker */
  marquee {
   width: 60%;
   margin: 0 20% 0 20%;
   outline: solid 1px #E3E9EF;
  }


... dann speicherst Du diese Datei ab als eben z.B. "nachrichten.css" > "Speichern unter" und wählst bei "Dateityp" > "Alle Dateien" und bei "Codierung" > "ANSI"

Man sollte Style-Anweisungen nicht direkt in eine Seite kopieren, sondern eben in eine CSS-Datei. Passieren tut dann genau das gleiche, nur das eben durch die Verlinkung diese Style-Anweisungen in die HTML-Seite eingelesen werden.

Ist ungefähr so als wenn Du das Eis aus dem Gefrierbehälter isst oder schön sauber auf dem Teller servierst :D
Alle Beiträge dieses Benutzers finden
#84
Tommy,
stimmt. Ist schon ein paar Seiten her gewesen und war aus meinem Hirn erst mal raus. Wenn ich das nächste Mal an meinem Hauptrechner sitze, lager ich die Datei aus... sieht ja wirklich nicht gut im Quelltext aus :-)
Alle Beiträge dieses Benutzers finden
#85
Moin Doris,

ja - frage nur, falls es da noch Probleme gibt.

Eigentlich macht man das dann noch ein wenig geschickter. Du solltest dann diese Datei "nachrichten.css" direkt in Dein Projekt-Verzeichnis "Assets" kopieren, also als Beispiel - bei Windows 7 liegt das ungefähr hier (hier heißt mein NOF-Projekt Nachrichten):

C:\Users\Admin\Documents\NetObjects Fusion 2013\User Sites\Nachrichten\Assets

Dann liest Du diese CSS-Datei direkt in die Assets-Verwaltung von NOF mit ein und hakst "Datei immer publizieren" an, so "weiß" NOF, dass diese Datei "in Gebrauch" ist und wird sie auch publizieren.

http://www.tommyherrmanndesign.com/nof/h...alten.html

... dann guckst Du in der Ansicht "Publizieren" (der große Button der "Publizieren-Ansicht") wo NOF diese Datei abgelegt hat. Sollte sie nicht im Verzeichnis "html" liegen, dann verschiebst Du sie dahin, indem Du diese mit der rechten Maustaste ausschneidest und im Verzeichnis "html" wieder einfügst.

Nun wird NOF jede Änderung, die Du in der "nachrichten.css" (die ja nun im Verzeichnis "Assets" liegt) auch sofort und gleich übernehmen und diese CSS-Datei immer automatisch mit in das Verzeichnis "html" publizieren (lokal und entfernt) und auch in einer "Vorlage" mit sichern.



Du solltest auch noch in der Datei:

nachrichten.php

die gleiche Änderung mit dem Umbruch <br> nach dem Datum bei der Suchen-Funktion vornehmen. Das findest Du in etwas bei Zeile 238.

... damit das bei eine Suche genauso aussieht wie vorher.

.png  Nachrichten-Suche.PNG (Größe: 579,96 KB / Downloads: 46)
Alle Beiträge dieses Benutzers finden
#86
P.S.:

... es ist immer schwierig zu entscheiden - wo fange ich mit den Erklärungen an und wo höre ich auf, denn ich will Dich nicht vollständig verwirren :verwirrt2:

Aber nur der Vollständigkeit halber sei noch erwähnt:

Du kannst diese CSS-Datei auch noch eleganter in NOF verwenden, denn wenn Du sie in der Assets-Verwaltung erst einmal eingelesen hast, dann findest Du diese Datei auch in der "Design-Ansicht" mit allen Selektoren und dem CSS-Code wieder. Hier mal die Ansicht von der Einbindung meiner Datei "nachrichten.css". Ich habe sie im Masterrahmen, da ich nur diese eine Seite in dem Projekt habe, Du wählst dann "Seitenspezifisch"

.png  CSS-Datei-einbinden.PNG (Größe: 125,34 KB / Downloads: 57)


Dann kannst Du dort mit der rechten Maustaste auf die CSS-Datei gehen ("CSS-Datei einbinden in") und diese Datei bestimmten Bereichen zuordnen, also z.B. (in Deinem Fall) nur dieser einen Nachrichten-Seite ("Seitenspezifisch"), die Du beim Button "Auswählen" dann anhakst.

Dann brauchst Du auch in der "Assets-Verwaltung" das Häkchen bei "Datei immer publizieren" nicht setzen, denn nun "weiß" NOF von dieser Datei und wird sie bei Bedarf mit publizieren (also z.B. nach einer Änderung).

Dann erstellt NOF die Verlinkung zu dieser CSS-Datei ganz alleine auf dieser Seite Smiling - also das hier:

Code:
<link rel="stylesheet" type="text/css" href="./nachrichten.css">


Hier kannst Du Dir Deine jetzige CSS-Datei fertig downloaden (habe sie Dir schon mal erstellt):

.css   nachrichten.css (Größe: 1,72 KB / Downloads: 46)


Kannst auch noch zusätzlich mal hier gucken, dort erkläre ich das auch nochmals in einem anderen Tutorial zum Fullscreen-Hintergrund und auch wie man Javascript-Dateien richtig einbindet.

http://www.tommyherrmanndesign.com/nof/H...-tut2.html
Alle Beiträge dieses Benutzers finden
#87
Uiii Tommy,
du bist ein genialer Schatz :-)

vielen lieben Dank. Ich werd mir das in Kürze alles zu Gemüte führen...

In dem Zusammenhang noch eine Frage:

Welche Variante ist sinnvoller, wenn ich in der endgültigen Website mehrere Bereiche mit dieser als CMS genutzten Nachrichtenfunktion nutzen will, die natürlich unterschiedliche Inhalte anzeigen sollen? Denn das wird auf jeden Fall so sein.

Bei der NOF-Komponente konnte ich dabe einfach CSV-Dateien mit unterschiedlichen Namen im DB-Ordner nutzen.

Bei dem jetzigen Script muss ich wohl jeweils eine eigene Datenbank anlegen, oder? Anders fällt mir das jetzt nicht ein.
Alle Beiträge dieses Benutzers finden
#88
ich hab mal ne Frage nur zum Verständnis für mich....

In deiner Nachrichten.css sind die Klassen Body und a drin.... wenn aber diese Klasse in style.css definiert ist, dann wird doch diese überschrieben...weil doch NOF bei der Publizierung seine eigenen CSS an den Schluss hängt...
so ist es jedenfalls bei mir gewesen, und das hat mich zur Weißglut gebracht..
Alle Beiträge dieses Benutzers finden
#89
Ich habe auch festgestellt, dass einige Formatierungen über die von NOF definierte CSS umgesetzt werden (sind aber wohl, wie ich das sehe, nur die Klassen, die in beiden Scripten vorkommen). Da die Darstellung der Links und die allgemeinen Basiselemente sowohl in dem Bereich, der von NOF publiziert wird als auch der der Bereich und Inhalt der Nachrichten/Datenbank gleich aussehen soll, macht das nichts. War für mich erst mal nur irritierend festzustellen, dass die FOrmatierungsinformationen über 4 Wege zum Ziel führen :-).

Vielleicht lässt sich das noch vereinfachen. ABer zuviel Zeit möchte ich da jetzt (noch) nicht investieren, weil ich dann nie fertig werde. Daher ist erstmal wichtig, dass es funzt. Mir sitzt die zeit im Nacken.

Ich denke aber, dass der letzte Post von Tommy die Lösung bringt, wenn die anzuwendende Css-Datei von Nof mitpubliziert wird...

(14.12.2013, 13:26)Internetdepp schrieb: ich hab mal ne Frage nur zum Verständnis für mich....

In deiner Nachrichten.css sind die Klassen Body und a drin.... wenn aber diese Klasse in style.css definiert ist, dann wird doch diese überschrieben...weil doch NOF bei der Publizierung seine eigenen CSS an den Schluss hängt...
so ist es jedenfalls bei mir gewesen, und das hat mich zur Weißglut gebracht..
Alle Beiträge dieses Benutzers finden
#90
... also die Class 'body' und 'a' braucht Doris eher nicht - muss man gucken, was man will.

Die Skripte von "Webbausteine.de" sind ja zunächst mal so aufgebaut, dass sie auch eigenständig vernünftig aussehen (er kann ja nicht wissen, wer was wie benötigt).

Im übrigen wird eine eigene, selbst eingelesene CSS-Datei immer unter die von NOF gesetzt.

@Doris - es ist doch einfach so:

Wenn Du eine gleiche Class unter einer bereits vorhandenen Class (mit dem gleichen Namen) aufrufst, dann wird diese Class die "ältere" (obere) überschreiben. Manchmal macht das Sinn, wenn NOF sich bockbeinig anstellt oder man keinen Bock zum Suchen hat :D
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Steuerung einbauen werner51 4 1.332 24.12.2020, 09:43
Letzter Beitrag: Tommy Herrmann
  Text in spezieller Form abbilden Franz54 10 1.955 11.06.2020, 14:17
Letzter Beitrag: Franz54
  Fixierte Text-Box nintama 4 1.492 06.06.2020, 12:18
Letzter Beitrag: nintama
  Code-Editor-Update c-laus 21 5.040 21.03.2018, 12:26
Letzter Beitrag: Tommy Herrmann
  Counter einbauen diggena 1 2.108 26.08.2017, 16:39
Letzter Beitrag: Rancher
  Text-Animation hinzufügen Flocki11833 26 5.384 24.04.2017, 17:25
Letzter Beitrag: Raven
  you tube Komponente schweibert 3 1.913 16.02.2017, 16:16
Letzter Beitrag: immergut
  Text geht auf über Text encanto 16 6.168 16.01.2017, 13:30
Letzter Beitrag: Tommy Herrmann
  Css-formatierter Text-Link als Button klappt nicht stobi_de 2 2.146 08.01.2017, 11:47
Letzter Beitrag: stobi_de
  Flash Uhr erstellen als eigene Komponente NYC 1 3.073 24.12.2016, 07:22
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!