Artikelinhalt: WYSIWYG

Hier nun eine minimalistische Version für ein Bootstrap Template für PHPWCMS

Die Einteilung des Artikels erfolgt nur über den Abschnitt des Artikels sowie das Grid-System von Bootstrap (3.4.1) Hier haben wir einen Text im Artikelinhalt WYSIWYG mit Standard Template.
Um den Aufbau etwas zu verdeutlichen, hat die row-Klasse einen orangen Rand und die col-Klassen einen grünen Rand.
Wählt man im Artikel Abschnitt: Bootstrap Container, erstellt PHPWCMS automatisch einen row container um diesen Abschnitt. Alle artikel, die sich im glechen Abschnitt befinden, kann man dann innerhalb dieses Abschnittest dann über angefügte Artikelklassen positionieren,
 

Artikelinhalt: Code

Das Template:

<!-- main start -->
<!-- CSS: {TEMPLATE}lib/bootstrap-3.4.1/css/bootstrap.990.min.css -->
<!-- CSS: {TEMPLATE}01-bs-template/css/bs-simple.css -->

<!-- Bootstrap Navbar Anfang -->

 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Phpwcms Bootstrap Sandbox</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">

            {NAV_LIST_UL:B,130,10, active | nav navbar-nav navbar-right ul-klasse| ul-dropdown-menu-klasse| ul-dropdown-menu-klasse-sublevel||, active ,,0,,}
 
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<main> 
     {HEADER}
     {LEFT}{CONTENT}{RIGHT}
     {FOOTER}
</Main><!-- /.wrapper -->
<footer class="footer">
   <div class="container">
     <div class="row">
       <div class="flex-container">  <!-- sorgt für gleich hohe Div-Container -->
         <!-- hier trägt man eben den Contenpart ein, den man im Footer haben möchte -->
         {SHOW_CONTENT:CP,111}
         {SHOW_CONTENT:CP,222}
         {SHOW_CONTENT:CP,333}
         {SHOW_CONTENT:CP,444}
         </div>
       </div><!-- /.flex-container -->
     </div><!-- /.row -->
´ </div><!-- /.container -->
</footer>
    
<!-- Javascripte die in den Head geladen werden -->

<!-- Bootstrap Core JavaScript -->
  <script src="template/lib/bootstrap-3.4.1/js/bootstrap.min.js"></script>    
<!-- main ende -->

Artikelinhalt: Code

die CSS Klassen:

/* Bootstrap Menü Klassen     in extra CSS Datei */

.spaceBeforeCP {clear:both;} div.spaceAfterCP {clear:both;} 

main{ /* Mindesthöhe der Seite */ 
    height: auto !important;     
    min-height: 96.6% !important; 
    padding-top: 50px;
    padding-bottom: 30px;    
    background-color: rgba(255,255,255,0.7);
}

footer{ /* Einstellungen Footer */ 
    height: auto;
    background-color: rgba(0,0,0,0.3);
    padding: 10px;
}

.container{
    width: 100%; 
    max-width: 1500px; /* maximale Breite des Content */ 
}
.row{ /* diese Klasse ist normal nicht nötig! der Abstand ist nur damit sich die Linien nicht überdecken ------------------ */ 
    padding: 2px;
    border: 1px solid orange;
}


/* Klassen Bilder   -------------------------------------------------------------*/
.row [class*="col-"] {border: 1px solid green;}  /* nicht nötig */

.imageEntry{
    float: left;
    width: 25%;
    padding: 0.1%;
    border-radius: 0px;
}
.img-thumbnail, .image-thumb{
    width: 100%;
    padding: 1px;
    border-radius: 0px;
}

.indicators, .controls { /* Anzeige des Inicators im Artikel Bilder Div abschalten  ----*/
    display: none;
}

Artikelinhalt: Bilder

mit Standard Vorlage

1. Image 1
2. Image 2
3. Image 3
4. Image 4

Previous Next