Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Full Width Image Slider in NetObjects Fusion (NOF)  (Gelesen 3798 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Full Width Image Slider in NetObjects Fusion (NOF)
« am: 12. Oktober 2013, 18:34:53 »
Anleitung, wie man einen Slider, der die Fensterbreite füllt und sich nahtlos der Größe des Browserfensters anpasst in NOF einbindet. 



So sieht das Ganze aus, wenn man es in NOF eingebaut hat. Schiebt einfach mal das Browserfenster zusammen und wieder auseinander um zu sehen, wie sich der Slider dabei verhält.

Hier der Slider zum manuellen weiterblättern:
http://demos.nof-community.de/responsiveSlider/index.html
Hier der Slider automatisch weiterblätternd:
http://demos.nof-community.de/responsiveSlider/html/seite_1.html


Rein nur den Slider in NOF zu integrieren, wäre gar nicht so kompliziert, will man jedoch eine Navi auf den Slider legen und auch Inhalte einfügen - was Websites ja nicht schlecht zu Gesicht steht ;) - dann gibt es schon einige Dinge zu berücksichtigen. Ich selbst habe den Slider in NOF11 integriert, die Anleitung sollte aber auch für andere NOF-Versionen passen. Legen wir los...
« Letzte Änderung: 06. Mai 2014, 14:44:34 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #1 am: 12. Oktober 2013, 19:18:58 »
Zunächst benötigt ihr einige Script- und CSS-Dateien welche ich, da ich ein paar Anpassungen für NOF vorgenommen habe, unter folgendem Link zum Download bereitstelle: http://demos.nof-community.de/responsiveSlider/fullwidthslider.zip

(die Originaldateien gibt es hier zum Download)


Wenn ihr die Zipdatei entpackt, erhaltet ihr einen Ordner mit dem Namen "fullwidthslider". In diesem Ordner befinden sich folgende 4 Dateien:

fullwidthslider.css
jquery.cbpFWSlider.js
jquery.cbpFWSlider.min.js
modernizr.custom.js

Bindet diese 4 Dateien als Assets in euer Projekt ein. Wie das geht könnt ihr hier nachlesen: www.nof-community.de/index.php/topic,11.0.html

Im Normalfall erkennt NOF automatisch das Dateiformat und publiziert die js-Dateien in den Ordner "assets" und die css-Datei in den Ordner "html".
Kontrolliert bitte zur Sicherheit über die Publizierenansicht, ob sich die Dateien auch an der entsprechenden Stelle befinden. Sollte dem nicht so sein, dann korrigiert dies bitte indem ihr die Dateien ausschneidet und in den entsprechenden Ordner einfügt. In folgendem Tutorial ist u.a. beschrieben, wie man den Ablageort für Dateien ändern kann: http://www.nof-community.de/index.php?topic=1539.0

Legt nun bitte für eure Startseite einen neuen Masterrahmen an.
Wie man das macht, könnt ihr hier nachlesen: www.nof-community.de/index.php/topic,354.0.html


« Letzte Änderung: 11. November 2013, 15:29:57 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #2 am: 13. Oktober 2013, 19:12:24 »
Bearbeitet nun Die Fotos für euren Slider in einem geeigneten Programm.
Wichtig ist, die Abmessungen aller Bilder sollten identisch sein.

Außerdem solltet ihr bedenken, dass die Dateigrößen nicht ins Unendliche gehen, denn die Summe aller Bilder muss beim Seitenaufbau geladen werden. Da kommen bei großen Bildern schnell einige KB wenn nicht sogar MB zusammen. Sind die Bilder zu klein, werden sie beim scalieren auf großen Monitoren wahrscheinlich sehr an Qualität verlieren.

Ich habe mich deshalb für ein Bildmaß von 1500 x 355px und nur 6 Bilder entschieden. http://demos.nof-community.de/responsiveSlider/assets/images/A.JPG

Wenn ihr eure Bilder fertig bearbeitet und abgespeichert habt, dann bindet ihr diese ebenfalls als Assets in euer Projekt ein.  www.nof-community.de/index.php/topic,11.0.html

Auch hier gilt, dass NOF die Bilder grundsätzlich automatisch im Ordner assets>>images ablegt, ein kontrollierender Blick in die Publizierenansicht gibt jedoch Gewissheit.
« Letzte Änderung: 11. November 2013, 15:31:17 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #3 am: 13. Oktober 2013, 22:26:23 »
-----------------------------------------------------------------------------------------------------
Einfügungen auf der Startseite
-----------------------------------------------------------------------------------------------------

Im nächsten Schritt sind einige Einfügungen an verschiedenen Stellen im Seiten-html nötig. Da sich die Einfügungen der Startseite geringfügig von denen der Unterseiten unterscheidet, geht es in diesem Post nur um die Starseite.

Drückt nun einmal die Taste F10 auf eurer Tastatur oder klickt einmal in den Masterrahmen und klickt im Anschluss den html-Button auf eurer Eigenschaftenpalette an.
Es öffnet sich ein Fenster in welchem ihr die folgenden Code-Schnipsel an der jeweils von mir angegeben Stelle einfügt.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "zwischen den Head-Tags" der Startseite:
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="./html/fullwidthslider.css" />
  2. <script src="./assets/modernizr.custom.js"></script>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Beginn des Haupttextes" der Startseite: ***
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <div align="center">                      
  2. <div id="cbp-fwslider" class="cbp-fwslider">    
  3. <ul>
  4. <li><a href="#"><img src="./assets/images/A.JPG" alt="img01"/></a></li>
  5. <li><a href="#"><img src="./assets/images/B.JPG" alt="img02"/></a></li>
  6. <li><a href="#"><img src="./assets/images/C.JPG" alt="img03"/></a></li>
  7. <li><a href="#"><img src="./assets/images/D.JPG" alt="img04"/></a></li>
  8. <li><a href="#"><img src="./assets/images/E.JPG" alt="img05"/></a></li>
  9. <li><a href="#"><img src="./assets/images/F.JPG" alt="img06"/></a></li>
  10. </ul>
  11. </div>

ACHTUNG!!! Der Code beinhaltet bereits den Befehl zum Zentrieren der Website!

Hinweis!!! In diesem Code sind die Dateinamen der Bilder anzupassen!
Achtet bei der Anpassung bitte unbedingt auf die Schreibweise, auch auf die Schreibweise der Dateiendung!

Will man mehr oder weniger Bilder im Slider anzeigen lassen muss man entweder eine solche Zeile hinzufügen oder löschen.
Code: HTML5
  1. <li><a href="#"><img src="./assets/images/F.JPG" alt="img06"/></a></li>


Für die letzte Einfügung solltet ihr euch vorab überlegen, ob euer Slider manuell geblättert werden soll oder ob ihr ein automatisches Blättern bevorzugt. Wählt danach den entsprechenden Codeschnipsel für eure Website aus.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" der Startseite wenn der Slider nur manuell bedient werden soll:
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <script src="./assets/jquery.cbpFWSlider.min.js"></script>
  2. $( function() {
  3.         /*
  4.         - how to call the plugin:
  5.         $( selector ).cbpFWSlider( [options] );
  6.         - options:
  7.         {
  8.                 // default transition speed (ms)
  9.                 speed : 500,
  10.                 // default transition easing
  11.                 easing : 'ease'
  12.         }
  13.         - destroy:
  14.         $( selector ).cbpFWSlider( 'destroy' );
  15.         */
  16.  
  17.         $( '#cbp-fwslider' ).cbpFWSlider();
  18.  
  19. } );
  20. <script src="./assets/rollover.js"></script>
  21. </div>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" der Startseite wenn der Slider automatisch blättern soll:
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <script src="./assets/jquery.cbpFWSlider.min.js"></script>
  2. var mouseEnteredSlider = false;
  3.  
  4. $(document).ready(function(){
  5.  
  6. $( '#cbp-fwslider' ).cbpFWSlider({
  7. // default transition speed (ms)
  8. speed : 500,
  9. // default transition easing
  10. easing : 'ease'
  11. }).mouseenter(function() {
  12. mouseEnteredSlider = true;
  13. }).mouseleave(function() {
  14. mouseEnteredSlider = false;
  15. });
  16.  
  17. setInterval(function() {
  18. if(!mouseEnteredSlider) {
  19. if($('.cbp-fwnext').css('display') != 'none'){
  20. $('.cbp-fwnext').click();
  21. } else {
  22. $('.cbp-fwdots span:first-child').click();
  23. }
  24. }
  25. }, 2000);
  26.  
  27. });
  28. <script src="./assets/rollover.js"></script>
  29. </div>
« Letzte Änderung: 11. November 2013, 15:35:15 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #4 am: 14. Oktober 2013, 13:32:46 »
-----------------------------------------------------------------------------------------------------
Einfügungen auf den Unterseiten
-----------------------------------------------------------------------------------------------------

Nun müssen die Einfügungen im Masterrahmen der Unterseiten vorgenommen werden.

Drückt wieder die Taste F10 auf eurer Tastatur ... und fügt wieder die folgenden Code-Schnipsel an der jeweils von mir angegeben Stelle einfügt.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "zwischen den Head-Tags" auf Unterseiten:
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="./fullwidthslider.css" />
  2. <script src="../assets/modernizr.custom.js"></script>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Beginn des Haupttextes" auf Unterseiten: ***
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <div align="center">                      
  2. <div id="cbp-fwslider" class="cbp-fwslider">    
  3. <ul>
  4. <li><a href="#"><img src="../assets/images/A.JPG" alt="img01"/></a></li>
  5. <li><a href="#"><img src="../assets/images/B.JPG" alt="img02"/></a></li>
  6. <li><a href="#"><img src="../assets/images/C.JPG" alt="img03"/></a></li>
  7. <li><a href="#"><img src="../assets/images/D.JPG" alt="img04"/></a></li>
  8. <li><a href="#"><img src="../assets/images/E.JPG" alt="img05"/></a></li>
  9. <li><a href="#"><img src="../assets/images/F.JPG" alt="img06"/></a></li>
  10. </ul>
  11. </div>

ACHTUNG!!! Der Code beinhaltet bereits den Befehl zum Zentrieren der Website!

Hinweis!!! In diesem Code sind die Dateinamen der Bilder anzupassen! Achtet bei der Anpassung bitte unbedingt auf die Schreibweise, auch auf die Schreibweise der Dateiendung!

Will man mehr oder weniger Bilder im Slider anzeigen lassen muss man entweder eine solche Zeile hinzufügen oder löschen.
Code: HTML5
  1. <li><a href="#"><img src="../assets/images/F.JPG" alt="img06"/></a></li>


Für die letzte Einfügung solltet ihr euch vorab überlegen, ob euer Slider manuell geblättert werden soll oder ob ihr ein automatisches Blättern bevorzugt. Wählt danach den entsprechenden Codeschnipsel für eure Website aus.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" auf Unterseiten wenn der Slider nur manuell bedient werden soll:
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <script src="../assets/jquery.cbpFWSlider.min.js"></script>
  2. $( function() {
  3.         /*
  4.         - how to call the plugin:
  5.         $( selector ).cbpFWSlider( [options] );
  6.         - options:
  7.         {
  8.                 // default transition speed (ms)
  9.                 speed : 500,
  10.                 // default transition easing
  11.                 easing : 'ease'
  12.         }
  13.         - destroy:
  14.         $( selector ).cbpFWSlider( 'destroy' );
  15.         */
  16.  
  17.         $( '#cbp-fwslider' ).cbpFWSlider();
  18.  
  19. } );
  20. <script src="../assets/rollover.js"></script>
  21. </div>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" auf Unterseiten wenn der Slider automatisch blättern soll:
-----------------------------------------------------------------------------------------------------
Code: HTML5
  1. <script src="../assets/jquery.cbpFWSlider.min.js"></script>
  2. var mouseEnteredSlider = false;
  3.  
  4. $(document).ready(function(){
  5.  
  6. $( '#cbp-fwslider' ).cbpFWSlider({
  7. // default transition speed (ms)
  8. speed : 500,
  9. // default transition easing
  10. easing : 'ease'
  11. }).mouseenter(function() {
  12. mouseEnteredSlider = true;
  13. }).mouseleave(function() {
  14. mouseEnteredSlider = false;
  15. });
  16.  
  17. setInterval(function() {
  18. if(!mouseEnteredSlider) {
  19. if($('.cbp-fwnext').css('display') != 'none'){
  20. $('.cbp-fwnext').click();
  21. } else {
  22. $('.cbp-fwdots span:first-child').click();
  23. }
  24. }
  25. }, 2000);
  26.  
  27. });
  28. <script src="../assets/rollover.js"></script>
  29. </div>
« Letzte Änderung: 11. November 2013, 15:37:03 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #5 am: 09. November 2013, 19:50:16 »
*** Aus nof-technischen Gründen habe ich die Code-Einfügung für den Slider direkt im Seiten-html vorgenommen, da die automatische Anpassung des Sliders an die Fenstergröße eures Browsers sonst nicht reibungslos funktionieren würde.

Der Slider ist in der Arbeitsansicht nicht zu sehen, sondern erst nach Publizierung. Er wird durch die CSS-Angaben in den eingebundenen Style-Dateien automatisch zu oberst in eurer Seite positioniert.
« Letzte Änderung: 09. November 2013, 19:58:58 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #6 am: 09. November 2013, 19:53:07 »
Wenn ihr möchtet, dass eure Navigationsleiste so auf dem Banner platziert wird, wie es im Beispielprojekt zu sehen ist, dann fügt ihr zunächst zu oberst in eurer Seite ein Textfeld ein. Klickt dieses Textfeld mit einem einfachen Klick an (der Cursor darf nicht blinken!) und klickt danach einmal den html-Button auf der EP an.

Es öffnet sich das Fenster zur Eingabe des Codes und ihr fügt die folgenden beiden Codeschnipsel an der jeweils angegebenen Stelle ein.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "vor dem Tag" (vorher)
-----------------------------------------------------------------------------------------------------

Code: HTML5
  1. <div id="navi">
  2. <div id="navi_inner">


-----------------------------------------------------------------------------------------------------
Code zum Einfügen "nach dem Tag" (nachher)
-----------------------------------------------------------------------------------------------------

Code: HTML5
  1. </div>
  2. </div>

Eure horizontale Navigationsleiste schiebt ihr nachdem ihr sie erstellt habt in dieses Textfeld. Die Postition der Leiste wird ebenfalls über die Angaben aus der Styledatei geregelt.
« Letzte Änderung: 09. November 2013, 20:01:47 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #7 am: 09. November 2013, 20:02:07 »
Die Farbe und Transparenz des Balkens auf welchem die Navi zu liegen scheint, könnt ihr in der fullwidthslider.css in folgender Formatvorlage  anpassen.

Code: HTML5
  1. #navi {
  2.         position:absolute;
  3.         top:0;
  4.         left:0;
  5.         width: 100%;
  6.         height: 47px;
  7.         background: rgba(37, 24, 5, .8);  
  8. }


Und zwar in dieser Zeile:

Code: HTML5
  1. background: rgba(37, 24, 5, .8);  

Hier stehen die ersten drei Zahlen für die normalen rgb-Farbwerte.
die letzte Zahl mit dem Punkt davor regelt die Transparenz.
Hier ist eine Spanne von .0 bis .9 möglich, wobei gilt, je höher die Zahl desto geringer die Transparenz.
« Letzte Änderung: 09. November 2013, 20:23:46 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #8 am: 11. November 2013, 15:39:05 »
Die Farbe und Transparenz der Navigationsschaltflächen zum Durchblättern des Sliders könnt ihr ebenfalls in der fullwidthslider.css in folgender Formatvorlage  anpassen.

Code: HTML5
  1. .cbp-fwslider nav span {
  2.         position: absolute;
  3.         top: 50%;
  4.         width: 50px;
  5.         height: 100px;
  6.         background: rgba(37, 24, 5, .7);
  7.         color: #fff;
  8.         font-size: 50px;
  9.         text-align: center;
  10.         margin-top: -50px;
  11.         line-height: 98px;
  12.         cursor: pointer;
  13.         font-weight: normal;
  14. }
  15.  

Und zwar könnt ihr in dieser Zeile die Farbe des Pfeils ändern:

Code: HTML5
  1.         color: #fff;

und in dieser Zeile könnt ihr die Farbe und Transparenz der Schaltfläche ändern:

Code: HTML5
  1.         background: rgba(37, 24, 5, .7);


Auch hier gilt, die ersten drei Zahlen stehen für die normalen rgb-Farbwerte.
die letzte Zahl mit dem Punkt davor regelt die Transparenz.
Hier ist eine Spanne von .0 bis .9 möglich, wobei gilt, je höher die Zahl desto geringer die Transparenz.



Das Aussehen der Schaltfläche bei mouseover regelt die folgende Klasse:

Code: HTML5
  1. .cbp-fwslider nav span:hover {
  2.         background: rgba(37, 24, 5, .9);
  3. }
« Letzte Änderung: 11. November 2013, 15:46:01 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #9 am: 11. November 2013, 15:41:44 »
Sollte euch der Schatten unter dem Slider stören, so könnt ihr diesen entfernen indem ihr die folgende Klasse bearbeitet...

Code: HTML5
  1. .cbp-fwslider {
  2.         position: relative;
  3.         margin: 0 0 40px 0;
  4.         overflow: hidden;
  5.         padding: 0px;
  6.         -o-box-shadow: 0 0 20px grey;
  7.         -moz-box-shadow: 0 0 20px grey;
  8.         -webkit-box-shadow: 0 0 20px grey;
  9.          box-shadow: 0 0 20px grey;
  10. }

und dabei diese Zeilen aus der Klasse entfernt:

Code: HTML5
  1.         -o-box-shadow: 0 0 20px grey;
  2.         -moz-box-shadow: 0 0 20px grey;
  3.         -webkit-box-shadow: 0 0 20px grey;
  4.          box-shadow: 0 0 20px grey;
« Letzte Änderung: 11. November 2013, 15:48:18 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Full Width Image Slider in NetObjects Fusion (NOF)
« Antwort #10 am: 11. November 2013, 15:50:58 »
Bei meinen Tests mit dem Slider fiel mir auf, dass es zu einem größeren Abstand zwischen den Inhalten des Layouts und denen des unteren MB kam. Warum habe ich bis jetzt noch nicht ergründet. Vermeiden lässt sich dieser Abstand, falls er bei euch autritt, indem ihr in eurem Layout einen Layout-Bereich aufzieht und eure Inhalte auf diesem Layoutbereich platziert.

Ich wünsche euch viel Spaß beim Nachbauen und gutes Gelingen!  :)

« Letzte Änderung: 20. Februar 2014, 20:22:31 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)