Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Lytebox Rahmen Farbe ändern
#1
Moin.
Bitte einmal kurz vormachen.
Ich habe in den Themes die Farbe von schwarz auf rot geändert. So weit. So gut.
Jetzt habe ich einen roten Rand.  Reicht eigentlich.
Aber wie müsste es aussehen wenn ich im CSS die Farbe von schwarz auf rot ändern möchte?
Heißt: Den ganzen weissen Rahmen rot.


.jpg  LB Outer Container Hintergrund Farbe.JPG (Größe: 46,02 KB / Downloads: 33)


Ich würde es nur gerne einmal vor Augen haben, damit ich erkennen kann wie es funktioniert.
Wird wahrscheinlich zuviel des guten sein. Aber ich möchte es mal testen.

Testseite: www.bsv-fortuna.de/Test
ThomasS
bsv2016
Gruß
Thomas

Mobirise 4.7.8 + Code Editor
Corel X8, PSE 14, jAlbum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

für individuelle Einstellungen müsstest Du die CSS-Datei der Lytebox ändern:

lytebox.css

http://www.bsv-fortuna.de/Test/Lyteboxsc...ytebox.css

Du hast in Deiner .js Datei ein "Farb-Thema" gewählt (z.B. "red")

Zitat:this.theme = (typeof lyteboxTheme !== 'undefined') && /^(black|grey|red|green|blue|gold|orange)$/i.test(lyteboxTheme) ? lyteboxTheme : 'red'; // themes: black (default), grey, red, green, blue, gold, orange

... in dieser CSS-Datei werden alle Themen farblich berücksichtigt.

Du müsstest also jetzt entsprechend Deiner Themen-Wahl, dieses Thema in der CSS-Datei von der Farbe ändern.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin Tommy.
Verstehe. Aber wie muss das Script dann aussehen?
Was muss wie wo stehen? (siehe Screenshot #1)
Wäre schön wenn das einmal sehen könnte, damit ich dahinter komme.
Danke dir.
Gruß
Thomas

Mobirise 4.7.8 + Code Editor
Corel X8, PSE 14, jAlbum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
also dann z.B. alle rot haben willst (hier red) - dann müsstest Du diese Klassen ändern:

Zitat:#lbOuterContainer { position: relative; background-color: red; width: 200px; height: 200px; margin: 0 auto; }
#lbOuterContainer.black { border: 2px solid #CCCCCC; background-color: #000000; }
#lbOuterContainer.grey { border: 2px solid red; }
#lbOuterContainer.red { border: 2px solid #DD0000; }
#lbOuterContainer.green { border: 2px solid #00B000; }
#lbOuterContainer.blue { border: 2px solid #5F89D8; }
#lbOuterContainer.gold { border: 2px solid #B0B000; }
#lbOuterContainer.orange { border: 2px solid #D15211; }

#lbTopContainer, #lbBottomContainer {
font: 0.85em Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; font-size: 0.9em;
overflow: hidden; margin: 0 auto; padding: 0; position: relative; z-index: 14; display: none;
}
#lbTopContainer { overflow: hidden; margin-top: 5px; }
#lbTopContainer.black, #lbBottomContainer.black { background-color: #000000; }
#lbTopContainer.grey, #lbTopContainer.red, #lbTopContainer.green, #lbTopContainer.blue, #lbTopContainer.gold, #lbTopContainer.orange,
#lbBottomContainer.grey, #lbBottomContainer.red, #lbBottomContainer.green, #lbBottomContainer.blue, #lbBottomContainer.gold, #lbBottomContainer.orange {
background-color: red;

... bedenke aber, dass dann die Hintergrundfarbe der Buttons nicht mehr stimmt. Müsstest Du die Buttons eben im Grafik-Programm noch anpassen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Dankeschön
Gruß
Thomas

Mobirise 4.7.8 + Code Editor
Corel X8, PSE 14, jAlbum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hab es ausprobiert. Hat geklappt.
Aber wie schon vermutet. Ist zuviel des Guten. Wird zu rot.
Gruß
Gruß
Thomas

Mobirise 4.7.8 + Code Editor
Corel X8, PSE 14, jAlbum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Thomas, Du musst ja nicht 'red' nehmen, kannst ja den gewünschten Farbcode #xxx..... einsetzen
viele Grüße
coco

NOF 2015 /RocketCake 2.0/win10prof/64/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Es ging wegen unserer Vereinsfarben tatsächlich um dieses "red".
Danke dir.
Gruß
Thomas

Mobirise 4.7.8 + Code Editor
Corel X8, PSE 14, jAlbum
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Hallo zusammen,

ich möchte dieses Thema noch einmal aufgreifen, ich habe einige Projekte mit NOF erstellt und so langsam gehen mir die Optionen aus, da die Lytebox und vor allem deren Rahmen ja am besten zu jedem Layout individuell passen sollte.
Das einfachste aus meiner Sicht wäre, wenn man NOF irgendwie dazu bewegen könnte, die datei Lytebox.css nicht immer aus dem Programmordner zu laden und anschliessend diese zu publizieren, damit könnte man die .css einfach auf dem FTP anpassen und gut wäre es, allerdings hat die Datei in der Publizieren Ansicht ein kleines Schloß davor, so dass man den Haken bei nie publizieren leider nicht setzen kann.
Gibt es hierfür eine Lösung, so dass NOF die .css nicht immer aus dem Installationsordner mitschickt?

Danke und Grüße Blume
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
.... welche Lytebox meinst Du denn - die von 'SwissKnife'?

Die solltest Du am besten nicht mehr verwenden, derweil diese veraltet ist.

Natürlich könntest Du die CSS-Datei kopieren und meinetwegen

lytebox2.css

nennen und dann zu dieser Datei auf einer anderen Seite einen Link setzen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Hi Tommy,

ja die von Swissknife, welche Lösung empfiehlst Du denn? WOW Slider habe ich schon mal getestet, komme aber damit nicht so recht klar, die Seite muss schlussendlich von Laien gepflegt werden, somit je einfacher desto besser, es sollen am Ende um die 20+ Slideshows in eine einzige .html Seite eingebunden werden.

Danke für Deine Mühen Blume
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Moin,

die Farben stehen ja in der CSS-Datei:

lytebox.css

Da diese Lytebox von SwissKnife ja wie eine "Komponente" in NOF integriert wird, wird die Verlinkung zu dieser CSS-Datei auch automatisch in den Quelltext geschrieben. Genau deswegen hat ja damals SwissKnife den Benutzern das Leben einfacher machen wollen. Dadurch sind aber die individuellen Möglichkeiten natürlich etwas beschränkt.

Am einfachsten ist sicherlich die "Visual Lightbox", die auch alle Dateien (auch die Miniaturbilder) selbstständig generiert und man muss nur noch Teile des generierten Quelltextes in die HTML-Editoren von NOF kopieren. Du findest auf meinen Seiten etliche Tutorials dazu und auch einen Film.

Auf dieser Seite habe ich z.B. ganz unterschiedliche Konfigurationen dieser Lytebox.

http://www.nof-tutorials.com/Visual-Lightbox-5-4/

... dann gibt es auch noch das Original der Lytebox von Markus Hay, auch dort erkläre ich alle Möglichkeiten des Einbaus:

http://www.tommyherrmanndesign.com/nof/L...-Version5/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Moin Tommy,

ich habe mir Dein TUT zu der Lytebox schon mehrfach durchgelesen, irgendwie erscheint mir diese Lyteboxeinbindung extrem schwierig zu sein, bzw. Zeitaufwendig. Wenn zB eine Diashow über 100 Bilder hat, und es dan auch noch weit über 20 Diashows geben soll, dauert dies doch ewig oder?
Ich habe schon einmal mit dem WOW Slider experimentiert, der lässt sich relativ schnell und komfortabel bedienen, abgesehen davon, dass er hin und wieder mal abstürzt.
Einziges Problem an dem ist, das der sich nicht über die eigentliche Seite legt, so wie die Lytebox von Dir oder die von Swissknife sondern immer eine ganze Seite öffnet - oder mache ich da etwas falsch?
Hier einmal ein Beispiel:
http://www.roadeagle-arnsdorf.de/Slidesh..._2016.html

Grüße Blume
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Moin,

die 'Visual Lightbox' ist der gleiche Hersteller wie der vom 'WOW Slider' (damit haben sie angefangen) und wenn Du den 'WOW Slider' schon eingebunden hast, dann funktioniert das bei der 'Visual Lightbox' ganz genauso.

Einfach die mit "Head Section" und "Body Section" markierten Bereiche in die HTML von NOF einfügen und fertig. Es ist unheimlich einfach. Gerade bei vielen Fotos bietet sich dieses Programm an.

Probiere es doch einfach zunächst mit einem neuen Testprojekt aus, es gibt eine kostenlose Version, die Du auch später freischalten kannst, sodass dieses 'Wasserzeichen' mit 'Visual Lightbox' dann auch verschwindet.

Du darfst weder beim 'WOW Slider' noch bei der 'Visual Lightbox' den gesamten Code in NOF einfügen, sondern immer nur die markierten Bereiche.

Also die Head-Section von hier:

<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->

bis hier:

<!-- End WOWSlider.com HEAD section -->

kommt dann in NOF in die HTML vom Layout

> Fenster "Layout-Eigenschaften" > Button "HTML" > "Zwischen Head Tags"


... und die Body-Section von hier:

<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->

bis hier:

<!-- End WOWSlider.com BODY section -->

gehört dann in NOF in die HTML eine aufgezogenen Textfeldes in den HTML-Code Editor (siehe auch mein Tutorial dazu).

Das alles habe ich auch für den WOW-Slider hier beschrieben.

http://www.tommyherrmanndesign.com/nof/W...orial.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Lytebox responsiv? stobi_de 5 1.229 20.05.2016, 21:07
Letzter Beitrag: coco
  SwissKnife Lytebox 5 Obba 12 1.843 27.02.2016, 19:36
Letzter Beitrag: Obba
  Swiss Knife Lyte Box Text Link-Ändern des Hintergrunds Thomas Saake 9 1.609 08.01.2016, 14:46
Letzter Beitrag: Tommy Herrmann
  SwissKnife Lytebox TextLinkCCS - CSS-Klasse lässt sich nicht zuordnen Ritschi63 3 1.860 26.10.2015, 09:12
Letzter Beitrag: Tommy Herrmann
  Inhalt Alt und Title Text bei Swissknife Lytebox der selbe Bee 8 5.140 13.09.2014, 11:28
Letzter Beitrag: Bee
  Lageänderung der SK-Lytebox-Galerie Anzeige coco 11 2.685 31.03.2014, 18:42
Letzter Beitrag: coco
  Swissknife - Lytebox und NOF 2013 stobi_de 27 7.804 19.03.2014, 19:09
Letzter Beitrag: coco
  Lytebox 5.5 Komponenten töffix 20 6.685 02.11.2013, 18:09
Letzter Beitrag: immergut
  SK Lytebox im iframe coco 13 4.525 17.08.2013, 14:06
Letzter Beitrag: coco
  Lytebox im IFrame ich bin am verzweifeln Rabe 8 2.220 28.07.2013, 10:34
Letzter Beitrag: Raven



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!