Footer bzw. Footer Boxen ausrichten

Aebian · May 23, 2021 at 11:08 PM

Hallo Zusammen,

Ich habe eine Frage zu den Footer Boxen bzw. Footer. Aktuell habe ich drei Text-Boxen erstellt und dem Footer zugewiesen.

Jedoch werden diese Boxen nicht wie hier bei WoltLab in drei Boxen aufgeteilt, sondern bleiben in einer Box bestehen:

Muss ich hier etwa das Ganze doch als eine HTML Box erstellen statt drei einzelnen Boxen?

Mein Gedanke war, das die Suite das automatisch erledigt mit der Positionierung, aber evtl. ist dies auch gar nicht verbaut?

Danke.

Regards,

Alexander

HTMH · May 24, 2021 at 12:20 AM

Da gibt es verschiedene Möglichkeiten.

Ich habe ein Template genutzt und das eingebunden, ist einfacher als mit 3 Boxen.

Aber schau mal hier Verschiedene Boxen im Footer Menü - wie?

HTMH · May 24, 2021 at 12:41 AM

Template erstellen, Name z.b. = FooterxXx

Template Inhalt

Code

<div id ="add_footer" class ="layoutBoundary">
<div class ="addInbox">
<div class ="add_boxleft">

<h1>Informationen</h1>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
</div>
<div class ="add_boxcenter">
<h1>Quick Links</h1>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
</div>
<div class ="add_boxright">
<h1>Support</h1>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
<p><a href="#">Text</a></p>
</div>
</div>
</div>

Display More

Template pageFooter ändern.

Unter <footer id="pageFooter" class="pageFooter">

folgendes einfügen

{include file='FooterxXx'}

Passendes CSS

CSS

// +++ FooterxXx
#add_footer.layoutBoundary {
  padding: 10px 0px 10px;
  background-color: $wcfContentBackground;
}
.addInbox {
  width: auto !important;
  display: -webkit-flex;
  display: flex;
}
#add_footer.layoutBoundary h1 {
  font-size: 14px;
  margin-bottom: 10px;
  color: $wcfHeaderText;
  padding: 4px 10px;
  font-weight: 600;
  background-color: $wcfHeaderBackground;
}
#add_footer.layoutBoundary h2 {
  font-size: 16px;
  line-height: 16px;
  color: $wcfContentHeadlineText;
  padding: 7px 0px;
  margin-bottom: 10px;
  border-bottom: 2px solid $wcfContentHeadlineText;
}
#add_footer.layoutBoundary h2::before {
  content: "\f0ac";
  font-family: FontAwesome;
  padding-right: 4px;
  font-size: 18px;
  font-weight: 400;
}
#add_footer.layoutBoundary p {
  line-height: 1.3;
  font-weight: normal;
  margin-left: 5px;
}
#add_footer.layoutBoundary p.textbox {
  line-height: 1.4;
  font-weight: normal;
}
#add_footer.layoutBoundary li {
  list-style: none;
  text-decoration: none;
  border: none;
}
#add_footer.layoutBoundary a::before {
  content: "\f101";
  font-family: FontAwesome;
  padding-right: 4px;
}
.add_boxright_second a::before {
  display: none;
}
#add_footer.layoutBoundary a {
  font-weight: normal;
  text-decoration: none;
}
.add_boxleft {
  float: left;
  width: 33.3%;
  margin-right: 0.3%;
  min-height: 120px;
  outline: 0px none;
  padding-bottom: 5px;
}
.add_boxcenter {
  float: left;
  width: 33.3%;
  margin-left: 0.4%;
  margin-right: 0.3%;
  min-height: 120px;
  outline: 0px none;
  padding-bottom: 5px;
}
.add_boxright {
  float: left;
  margin-left: 0.4%;
  margin-right: 0.3%;
  width: 33.3%;
  min-height: 120px;
  outline: 0px none;
  padding-bottom: 5px;
}

@include screen-md-down {
  .addInbox {
    display: flex;
  }
  .add_boxleft {
    width: 100%;
  }
  .add_boxcenter {
    width: 100%;
  }
  .add_boxright {
    width: 100%;
  }
  #add_footer.layoutBoundary h1 {
    margin-top: 15px;
    font-size: 16px;
    line-height: 20px;
  }
}
@include screen-sm-down {
  .addInbox {
    display: flex;
  }
  .add_boxleft {
    width: 100%;
  }
  .add_boxcenter {
    width: 100%;
  }
  .add_boxright {
    width: 100%;
  }
  #add_footer.layoutBoundary h1 {
    margin-top: 15px;
    font-size: 16px;
    line-height: 20px;
  }
}
@include screen-xs {
  .addInbox {
    display: grid;
  }
  .add_boxleft {
    width: 100%;
  }
  .add_boxcenter {
    width: 100%;
  }
  .add_boxright {
    width: 100%;
  }
  #add_footer.layoutBoundary h1 {
    margin-top: 15px;
    font-size: 16px;
    line-height: 20px;
  }
}
// --- FooterxXx

Display More

Basierend auf Simple AddFooter

Aebian · May 24, 2021 at 12:51 AM Best Answer

Danke fuer den ersten Link.

Die drei Boxen duerfen bestehen bleiben. Als CSS muss lediglich folgendes eingebaut werden:

Code: css.css

.boxesFooter {
    padding:40px 0
}
@media (min-width:1025px) {
    .boxesFooter .boxContainer {
        margin:0 -20px
    }
}
@media (max-width:1024px) {
    .boxesFooter .boxContainer {
        margin:0 -10px
    }
}
@media (min-width:769px) {
    .boxesFooter .boxContainer {
        display:flex;
        flex-wrap:wrap
    }
}
.boxesFooter .boxContainer .box {
    padding:0 20px
}
@media (min-width:769px) {
    .boxesFooter .boxContainer .box {
        flex:0 0 33%;
        margin-top:0;
        max-width:33%
    }
}
.boxesFooter .boxContainer .boxMenu {
    display:block;
    margin:0
}
.boxesFooter .boxContainer .boxMenu > li {
    padding:0
}
.boxesFooter .boxContainer .boxTitle + .boxContent {
    margin-top:10px
}
.boxesFooter .boxContainer .boxTitle {
    text-transform:uppercase
}
.boxesFooter .boxImage {
    float:none;
    width:auto
}
.boxesFooter .boxImage img {
    width:136px;
    margin-left:24px
}
.boxesFooter .boxWithImage .boxContent {
    margin-left:0;
    margin-top:20px
}

Display More

DMedia · May 24, 2021 at 12:52 AM

Quote from HTMH

Ich habe ein Template genutzt und das eingebunden, ist einfacher als mit 3 Boxen.

Wieso sollte das einfacher sein? Wenn man Textboxen (Position: Seitenende) verwendet, reicht etwas CSS von dieser Website aus:

Code

/* Footer Boxen */
.boxesFooter {
    padding: 40px 0;
}

.boxesFooter .boxContainer {
    margin: 0 -20px
}

@media (min-width:769px) {
    .boxesFooter .boxContainer {
        display: flex;
        flex-wrap: wrap;
    }
}

.boxesFooter .boxContainer .box {
    padding: 0 20px;
}

@media (min-width:1025px) {
    .boxesFooter .boxContainer .box {
        flex: 0 0 20%; // 20% ersetzen mit 100 / Anzahl an Boxen
        margin-top: 0;
        max-width: 20% // 20% ersetzen mit 100 / Anzahl an Boxen
    }
}

.boxesFooter .boxContainer .boxTitle {
    text-transform: uppercase;
}

.boxesFooter .boxContainer .boxTitle + .boxContent {
    margin-top: 10px;
}

Display More

bruno.bap · May 24, 2021 at 9:27 AM

Quote from DMedia

...reicht etwas CSS von dieser Website aus:

Guten Morgen,

ich habe das auch mal ausprobiert, leider verteilen sich die Boxen bei deiner Version seltsam :

Hundiiiiiiiiii · May 24, 2021 at 11:29 AM

Wenn du nur Links verwenden willst, dann nimm das Footermenü im ACP:

ACP -> Inhalt -> Menüs -> Footer-Links

DMedia · May 24, 2021 at 12:42 PM

Quote from bruno.bap

Guten Morgen,
ich habe das auch mal ausprobiert, leider verteilen sich die Boxen bei deiner Version seltsam :

Das dürfte an dem noch zusätzlich vorhandenen Footer-Menü liegen. Der Code stammt von WoltLab.

HTMH · May 24, 2021 at 1:35 PM

DMedia Weil man die 3 Boxen in einer Datei hat und so schneller anpassen kann.

Hundiiiiiiiiii Sieht aber ohne CSS Anpassung bei 3 Menüs unschön aus, da die da Boxen eine Breite von 25% haben und die Überschrift muss als Externer Link angeben werden, was zwar mit # funktioniert, aber dann habe ich da einen "Toten" Link.

bruno.bap Das FooterMenü im ACP auschalten oder

CSS

[data-box-identifier="com.woltlab.wcf.FooterMenu"] {
  display: none;
}

Footer bzw. Footer Boxen ausrichten

Aebian May 24, 2021 at 12:52 AM

Participate now!

Similar Threads

Externe Internet Seite ins Forum einbinden

Boxen zusammenfügen?

Bewerte das Forum Design des vorherigen Users

Footer Boxen erstellen

Statistik

Aebian May 24, 2021 at 12:52 AM

Participate now!

Similar Threads

Externe Internet Seite ins Forum einbinden

Boxen zusammenfügen?

Bewerte das Forum Design des vorherigen Users

Footer Boxen erstellen

Statistik

Aebian May 24, 2021 at 12:52 AM