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
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, 12: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....
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
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
  Mobi-Mega-Menü stobi_de 22 597 13.05.2020, 09:46
Letzter Beitrag: Tommy Herrmann
  Mobi-Style-Editor stobi_de 2 141 20.04.2020, 16:57
Letzter Beitrag: Martin73
  Mobi-Preis stobi_de 8 295 19.04.2020, 17:43
Letzter Beitrag: Tommy Herrmann
  Mobi-Shop: Artikel ausverkauft stobi_de 19 541 11.04.2020, 08:14
Letzter Beitrag: Tommy Herrmann
  POPUP BUILDER von MOBI c-laus 10 1.173 09.04.2020, 10:49
Letzter Beitrag: stobi_de
  Galeriefehler in Mobi 4.12.1 stobi_de 5 286 19.02.2020, 09:18
Letzter Beitrag: stobi_de
  Tabelle sortieren - kann Mobi nicht rechnen? Utz29 2 244 16.01.2020, 18:05
Letzter Beitrag: Utz29
  Bild innerhalb Mobi bearbeiten? stobi_de 2 235 04.01.2020, 13:58
Letzter Beitrag: stobi_de
  Hintergrund fixiert Mobi 3 kanzlei100 2 257 19.12.2019, 17:04
Letzter Beitrag: kanzlei100
  Wordpress-Elemente in Mobi? stobi_de 0 240 21.10.2019, 07:01
Letzter Beitrag: stobi_de



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!