Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobi-TeamBlock-Alternative
#1
Moin Tommy,

nix los hier. Damit du nicht ins Grübeln kommst, bin ich mal so frei, hier etwas interessantes vorzustellen.

Bootsrap 4.1.1
https://bootsnipp.com/snippets/n42d8
Ich habe schon damit rumgefummelt, meine altbekannten Probleme wiederholen sich aber.
Der Einbau in Mobi gestaltet sich für mich mehr als problematisch, denn irgend etwas stört, sprengt Mobiblöcke, die Schriften werden riesengroß usw.

Wenn dich das interessiert...dich herausfordert, dann wäre ein TUT von dir natürlich bombastisch.
(ist mir auch eine NOF-Spende wert Kussmund )

Tschüßßßiiii
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Claus,

ich habe im Moment sehr viel (unerwartete) Sachen um die Ohren und habe fast keine Zeit. Dennoch habe ich mir das angeguckt und das passt nicht mehr zum heute von Mobirise verwendeten und viel neueren Bootstrap 4.2.1.

Das ist zu alt und verwendet noch Bootstrap 4.1.1

Man müsste also zunächst die alten Dateien von Bootstrap 4.1.1 zusätzlich laden und inwieweit diese dann mit der neueren Version korrespondieren ist sehr fraglich. Das ist mir daher alles zu unlogisch und umständlich.

Sorry, ich kann und will da jetzt nichts machen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
(19.08.2019, 13:31)Tommy Herrmann schrieb: Claus,

ich habe im Moment sehr viel (unerwartete) Sachen um die Ohren und habe fast keine Zeit. Dennoch habe ich mir das angeguckt und das passt nicht mehr zum heute von Mobirise verwendeten und viel neueren Bootstrap 4.2.1.

Das ist zu alt und verwendet noch Bootstrap 4.1.1

Man müsste also zunächst die alten Dateien von Bootstrap 4.1.1 zusätzlich laden und inwieweit diese dann mit der neueren Version korrespondieren ist sehr fraglich. Das ist mir daher alles zu unlogisch und umständlich.

Sorry, ich kann und will da jetzt nichts machen.

...ist doch ok Tommy. No Stress
Mit 4.2.1 wußte ich noch nicht....
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Gucke mal,

sobald ich die Bootstrap 4.1.1 Dateien hinzu lade, geht dieser Slider einwandfrei und einfach einzubauen. Dann geht aber nichts anderes mehr, siehe Screenshot, so sieht dann meine Bootstrap 4.2.1 Navi aus :D


.jpg  Testimonials-Slider-4-1-1.JPG (Größe: 171,87 KB / Downloads: 14)


Wenn Du externe Anwendungen suchst, dann gib immer zumindest noch bei der Suche ein:

Bootstrap 4.2
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
... bevor ich meine Seite wieder lösche, schreibe ich gleich hier noch eine Anleitung zum Einbau (nur wegen der Logistik des Einbaus) ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Einbau wäre dann so:

1) in die Seiteneinstellungen "Inside <head> code":

Code:
    <!-- Bootstrap 4.1.1 Dateien -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

    <!-- Google font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,600i,700,700i,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i,800,800i">

    <!-- carousel -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">


2) in die Seiteneinstellungen "End of <body> code":

Code:
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>

  <script>
    $('.testimonial_owlCarousel').owlCarousel({
        loop:true,
        margin:10,
        dots:false,
        nav:true,
        autoplay:false, 
        smartSpeed: 3000,
        autoplayTimeout:4000,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    })
  </script>


3) Als Block den Code-Editor-Block direkt aufziehen

4) in diesen Block in den Bereich "HTML Editor" die gesamte "section":

Code:
        <section class="testimonial_section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                      <div class="about_content">
                            <div class="background_layer"></div>
                            <div class="layer_content">
                                <div class="section_title">
                                    <h5>CLIENTS</h5>
                                    <h2>Happy with<strong>Customers &amp; Clients</strong></h2>
                                    <div class="heading_line"><span></span></div>
                                    <p>If you need any industrial solution we are available for you. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                </div>
                                <a href="#">Contact Us<i class="icofont-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="testimonial_box">
                            <div class="testimonial_container">
                                <div class="background_layer"></div>
                                <div class="layer_content">
                                    <div class="testimonial_owlCarousel owl-carousel">
                                        <div class="testimonials">
                                            <div class="testimonial_content">
                                                <div class="testimonial_caption">
                                                    <h6>Robert Clarkson</h6>
                                                    <span>CEO, Axura</span>
                                                </div>
                                                <p>The team at Tectxon industry is very talented, dedicated, well organized and knowledgeable. I was most satisfied with the quality of the workmanship. They did excellent work.</p>
                                            </div>
                                            <div class="images_box">
                                                <div class="testimonial_img">
                                                    <img class="img-center" src="https://cdn.pixabay.com/photo/2017/08/30/17/27/business-woman-2697954_960_720.jpg" alt="images not found">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="testimonials">
                                            <div class="testimonial_content">
                                                <div class="testimonial_caption">
                                                    <h6>Robert Clarkson</h6>
                                                    <span>CEO, Axura</span>
                                                </div>
                                                <p>The team at Tectxon industry is very talented, dedicated, well organized and knowledgeable. I was most satisfied with the quality of the workmanship. They did excellent work.</p>
                                            </div>
                                            <div class="images_box">
                                                <div class="testimonial_img">
                                                    <img class="img-center" src="https://cdn.pixabay.com/photo/2016/02/19/10/56/man-1209494_960_720.jpg" alt="images not found">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="testimonials">
                                            <div class="testimonial_content">
                                                <div class="testimonial_caption">
                                                    <h6>Robert Clarkson</h6>
                                                    <span>CEO, Axura</span>
                                                </div>
                                                <p>The team at Tectxon industry is very talented, dedicated, well organized and knowledgeable. I was most satisfied with the quality of the workmanship. They did excellent work.</p>
                                            </div>
                                            <div class="images_box">
                                                <div class="testimonial_img">
                                                    <img class="img-center" src="https://cdn.pixabay.com/photo/2017/09/21/19/06/woman-2773007_960_720.jpg" alt="images not found">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

5) und in den Bereich "CSS Editor" die gesamte CSS:

Code:
    .testimonial_section {
      display: block;
      overflow: hidden;
    }
    .testimonial_section:after {
      display: block;
      clear: both;
      content: "";
    }
    .testimonial_section .about_content {
      background-color: #020d26;
      padding-top: 77px;
      padding-right: 210px;
      padding-bottom: 62px;
      position: relative;
    }
    .testimonial_section .about_content .background_layer {
      background-color: #020d26;
      width: auto;
      margin-left: -200px;
      right: 0;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    .testimonial_section .about_content .layer_content {
      position: relative;
      z-index: 9;
      height: 100%;
    }
    .testimonial_section .about_content .layer_content .section_title {
      margin-bottom: 24px;
      position: relative;
    }
    .testimonial_section .about_content .layer_content .section_title:after {
      display: block;
      clear: both;
      content: "";
    }
    .testimonial_section .about_content .layer_content .section_title h5 {
      color: #fff;
      font-family: "Open Sans";
      font-weight: 400;
      font-size: 15px;
      line-height: 28px;
      color: #818a8f;
      margin-top: -5px;
      margin-bottom: 6px;
    }
    .testimonial_section .about_content .layer_content .section_title h2 {
      font-family: "Titillium Web";
      font-weight: 300;
      font-size: 45px;
      line-height: 50px;
      padding-bottom: 51px;
      margin-bottom: 0px;
      color: #fff;
    }
    .testimonial_section .about_content .layer_content .section_title h2 strong {
      font-weight: 600 !important;
      width: 100%;
      display: block;
    }
    .testimonial_section .about_content .layer_content .section_title .heading_line {
      position: relative;
    }
    .testimonial_section .about_content .layer_content .section_title .heading_line span {
      transition: all 0.5s ease-in-out 0s;
      position: relative;
    }
    .testimonial_section .about_content .layer_content .section_title .heading_line span:after {
      content: "";
      right: auto;
      left: 69px;
      position: absolute;
      bottom: 28px;
      width: 17px;
      margin-left: 0;
      border-bottom-width: 3px;
      border-bottom-color: #cacaca;
      border-bottom-style: solid;
    }
    .testimonial_section .about_content .layer_content .section_title .heading_line:after {
      content: "";
      left: 1%;
      margin-left: 0;
      position: absolute;
      bottom: 28px;
      width: 59px;
      border-bottom-width: 3px;
      border-bottom-style: solid;
      border-bottom-color: #ff5e14;
    }
    .testimonial_section .about_content .layer_content .section_title p {
      color: #fff;
      margin: 0 0 15px;
    }
    .testimonial_section .about_content .layer_content a {
      color: #fff;
      text-transform: capitalize;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s;
    }
    .testimonial_section .about_content .layer_content a i {
      font-size: 18px;
      vertical-align: middle;
    }
    .testimonial_section .about_content .layer_content a:hover {
      color: #ff5e14;
    }
    .testimonial_section .testimonial_box {
      margin-top: 60px !important;
      position: relative;
    }
    .testimonial_section .testimonial_box .testimonial_container {
      background-color: #ff5e14;
      margin-left: -170px !important;
      position: relative;
    }
    .testimonial_section .testimonial_box .testimonial_container .background_layer {
      background-color: #ff5e14;
      width: auto;
      margin-right: -200px;
      right: 0;
      background-image: url(../images/map.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content {
      position: relative;
      z-index: 9;
      height: 100%;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel {
      display: block;
      position: relative;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials {
      margin: 10px 0 10px 0;
      padding: 62px 0px 72px 50px;
      position: relative;
      text-align: center;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .testimonial_content {
      box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.13);
      margin-left: 150px;
      margin-top: 69px;
      padding: 45px 40px 45px 40px;
      z-index: 1;
      position: relative;
      background-color: #fff;
      transition: all 0.5s ease-in-out 0s;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .testimonial_content .testimonial_caption {
      margin-bottom: 15px;
      position: relative;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .testimonial_content .testimonial_caption:after {
      content: "";
      width: 30px;
      display: block;
      height: 2px;
      text-align: center;
      left: 46%;
      margin-top: 6px;
      background-color: #ff5e14;
      position: absolute;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .testimonial_content .testimonial_caption h6 {
      padding-top: 0;
      margin-bottom: -5px;
      font-size: 19px;
      font-weight: 600;
      line-height: 24px;
      color: #020d26;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .testimonial_content .testimonial_caption span {
      font-size: 12px;
      color: #9f9f9f;
      margin: 0;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .testimonial_content p {
      padding: 0;
      margin: 0;
      padding-top: 10px;
      font-size: 16px;
      line-height: 28px;
      font-weight: 400;
      color: #5d6576;
      font-style: italic;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .images_box .testimonial_img {
      border: none;
      position: absolute;
      top: 0;
      left: 55px;
      top: 80px;
    }
    .testimonial_section .testimonial_box .testimonial_container .layer_content .testimonial_owlCarousel .testimonials .images_box .testimonial_img img {
      border: 5px solid #fff;
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
      width: 35%;
    }
    .testimonial_section .testimonial_box .testimonial_container .owl-nav .owl-prev {
      position: absolute;
      top: 165px;
      right: 42px;
      border-radius: 0;
      background: #ff5e14;
      display: block;
      outline: 0;
      width: 34px;
      line-height: 34px;
      height: 34px;
      color: #fff;
      font-size: 23px;
      margin-top: -20px;
      transition: all 0.3s ease-in-out;
    }
    .testimonial_section .testimonial_box .testimonial_container .owl-nav .owl-prev:hover {
      background: #020d26;
    }
    .testimonial_section .testimonial_box .testimonial_container .owl-nav .owl-next {
      position: absolute;
      top: 165px;
      right: 5px;
      border-radius: 0;
      display: block;
      background: #ff5e14;
      outline: 0;
      width: 34px;
      text-align: center;
      line-height: 34px;
      height: 34px;
      color: #fff;
      font-size: 23px;
      margin-top: -20px;
      transition: all 0.3s ease-in-out;
    }
    .testimonial_section .testimonial_box .testimonial_container .owl-nav .owl-next:hover {
      background: #020d26;
    }

    @media all and (max-width: 991px) {
      .testimonial_section .about_content {
        padding-right: 15px !important;
      }
      .testimonial_section .about_content .background_layer {
        width: 200% !important;
      }
      .testimonial_section .testimonial_box {
        margin-top: 0 !important;
      }
      .testimonial_section .testimonial_box .background_layer {
        width: 200% !important;
        margin-left: -200px;
      }
      .testimonial_section .testimonial_box .about_content {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 28% !important;
      }
      .testimonial_section .testimonial_box .testimonial_container {
        margin-left: -15px !important;
      }
      .testimonial_section .testimonial_box .testimonial_container .testimonials {
        margin: 0px 0 20px 0;
      }
      .testimonial_section .testimonial_box .testimonial_container .testimonials .testimonial_content {
        margin-left: -36px !important;
      }
      .testimonial_section .testimonial_box .testimonial_container .testimonials .images_box {
        display: none;
      }
    }


.jpg  Code-Editor.JPG (Größe: 170,74 KB / Downloads: 11)


Der Slider würde dann aber zunächst eine lokale Publizierung benötigen, damit die JavaScripts in den Browser geladen werden.

Man könnte auch als Block einen einfachen Textblock verwenden und dessen Code-Editor verwenden, dann kommt aber dies CSS von Bootstrap 4.1.1 mit der von Mobirise (Bootstrap 4.2.1) restlos durcheinander.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
ach ja - hier übrigens meine Testseite (die ich aber in Mobirise bereits wieder gelöscht habe):

Testimonial-Slider.html

... EDIT

ganz interessant, habe den Link zu meiner funktionierenden Testseite wieder hier gelöscht, derweil Mobirise offensichtlich ganz brav auch die CSS von der nicht mehr in der Software vorhandenen Seite am Server gelöscht hat Smiling
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Äh ja....
https://www.afripix.de/claus-slider/

ist nun so ziemlich 1zu1 übernommen.....
Die Bootstrap-links und jQueries weglassen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Danke Tommy,

funzt super auf dem Desktop. Eigentlich auch auf dem Smartphone, eigentlich...
Die Fotos von den Mitarbeitern sind auf dem Handy nicht zu sehen. Wer das aber braucht, eben genau diese Anzeige auf dem Handy, der ist aufgeschmissen. Schade....Schade...Schade
Mit freundlichen Grüßen
Claus aus dem hohen Norden

...am achten Tag schuf Gott den Rechtsanwalt
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Moin Frank,

gut - ich habe jetzt nicht lange dafür Zeit gehabt. Offensichtlich geht es ja mit Bootstrap 4.2.1 thumbs up Bei mir ging das nicht, vielleicht habe ich auch irgend etwas vergessen, allerdings sieht Dein Quelltext genau so aus, wie ich es versucht hatte. Vielleicht wirkten bei mir aber auch noch andere Anweisungen wegen einer anderen Navi und einem Footer, den Du nicht mit eingebaut hast.

@Claus,

ja - das mit den Fotos könnte man sicherlich für das Handy noch anpassen.

Zitat:.testimonial_section .testimonial_box .testimonial_container .testimonials .images_box {
display: none;
}
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
  Wordpress-Elemente in Mobi? stobi_de 0 79 21.10.2019, 08:01
Letzter Beitrag: stobi_de
  Eigene Mobi Versions-History erstellen und speichern Hans Klawun 2 152 14.10.2019, 16:22
Letzter Beitrag: Hans Klawun
  Kontaktformular von mobi Manuel 7 318 08.10.2019, 20:18
Letzter Beitrag: Tommy Herrmann
  Mobi History Down ? Hans Klawun 2 99 25.09.2019, 21:09
Letzter Beitrag: Tommy Herrmann
  Typo3 nach Mobi stobi_de 3 242 02.09.2019, 15:54
Letzter Beitrag: Wolfgang Z
  Nur Geläster übern Mobi-Support stobi_de 3 165 27.08.2019, 11:56
Letzter Beitrag: Tommy Herrmann
  Akkordeon-fehler in Mobi oder im Stober? stobi_de 4 188 12.08.2019, 22:58
Letzter Beitrag: funsport
  Timeline in Mobi c-laus 38 881 10.08.2019, 15:46
Letzter Beitrag: Thomas Saake
  Php-Webmailer und Mobi - neues Problem stobi_de 24 1.888 23.07.2019, 09:49
Letzter Beitrag: Tommy Herrmann
  POPUP BUILDER von MOBI c-laus 5 552 31.05.2019, 12:28
Letzter Beitrag: Rancher



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!