Seblod Masonry Template mit Flexbox responsive konfigurieren

Gerne wird für das Anzeigen von Elementen in Suchlisten von Seblod das Template Masonry verwendet. Das Template kann über die Datei "element.php" und einer dazugehörigen CSS-Datein einfach konfiguriert werden.

Resourcen: Masonry Template

siehe praktisches Beispiel>>

Desktop-Ansicht:

Responsiv-Ansicht:

Konfiguration von element.php:

Pfad: ../templates/seb_masonry/positions/yoursearch_typ/list/element.php

Inhalt:

// No Direct Access
defined( '_JEXEC' ) or die;
// Add stylesheets
JHtml::_('stylesheet', 'templates/seb_masonry/css/custom.css', array('version' => 'auto'));

$unternehmen = $cck->getValue('your_field');
$stadt = $cck->getValue('your_field');
... your  Fields-Entry....

?>

<div class="rahmen">
<div>

<div class="flex-container">
<div class="div1">
<?php if($logo != "") : ?> <div><?php echo $logo ?><p></p> </div><?php endif ;?>
  ...

</div>
<div class="div2">
<?php if($unternehmen != "") : ?> <div>...your Input...</div><?php endif ;?>
<?php if($stadt != "") : ?> <div>...your Input...</div><?php endif ;?>
 ...
</div>
<div class="div3" >
<?php if($kurztext != "") : ?> <div>...your Input...</div> <?php endif ;?>
<?php if($angebot != "") : ?> <div>...your Input...</div> <?php endif ;?>
<p></p>
<?php if($pdf_upload != "") : ?> <div>...your Input...</div><?php endif ;?>
 ...
</div>
       </div>
             </div>
                   </div>

Konfiguration von custom.css:

Pfad: ../templates/seb_masonry/css/custom.css

Inhalt:

/* Style fuer Seblodliste seb_mansory */

.rahmen {
width: auto;
box-sizing: border-box;
border: dotted 1px #ccc;
margin: 20px;
}

.flex-container {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
min-width: auto;
}

.div1 {
min-width: 20px;
max-width:none;
float:left;
height: auto;

padding-top: 30px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
border: 0px solid blue;
box-sizing: border-box;
}

.div2 {

min-width: 30%;
max-width: 35%;
height: auto;
padding: 15px;
border: 0px solid red;
box-sizing: border-box;
}
.div2 h1 {
line-height: 1.4;
font-weight: 600;
font-family: Playfair Display;
font-size: 28px;
}

.div3 {
min-width: 30%;
height: auto;
float:right;
padding: 10px;
border: 0px solid green;
box-sizing: border-box;
}

@media screen and (max-width: 370px) {
.rahmen { max-width: 360px;}
.flex-container { flex-direction: column;}
.div2 {max-width: 98%;}
}

@media screen and (max-width: 420px) {
.rahmen { max-width: 400px;}
.flex-container { flex-direction: column;}
.div2 {max-width: 98%;}
}

@media screen and (max-width: 800px) {
.rahmen { max-width: 760px;}
.flex-container { flex-direction: column;}
.div2 {max-width: 98%;}
}

Fragen zum Thema können über das Kontaktformular gestellt werden!