XenForo Footer Contact Email Integration Guide

📩 XenForo Footer Contact Email Integration Guide

For those using XenForo forum software, adding contact email addresses to the footer can give your site a more professional appearance. This simple modification not only allows users to reach you quickly but also enhances your forum’s credibility.

In this guide, we’ll explain step by step how to easily add contact emails to your XenForo site’s footer section. You can complete this process by making small edits in just two templates.

🛠️ Step 1: Edit the PAGE_CONTAINER Template

Go to Appearance > Templates.
Search for and edit the PAGE_CONTAINER template.

Find the following line:

Bash:

 <footer class="p-footer" id="footer">
<div class="p-footer-inner">

Immediately below it, add the following code:

Bash:

<div class="jetto-contact-boxes">
  <!-- Reklam -->
  <div class="jetto-box">
    <div class="jetto-icon-section">
      <span class="jetto-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 32V480c0 17.7 14.3 32 32 32s32-14.3 32-32V384H384l96 96V64L384 160H96V32C96 14.3 81.7 0 64 0S32 14.3 32 32z"/></svg>
      </span>
    </div>
    <div class="jetto-content">
      <span class="jetto-label">Reklam Talepleri:</span>
      <span class="jetto-email">[email protected]</span>
    </div>
  </div>

  <!-- KVKK -->
  <div class="jetto-box">
    <div class="jetto-icon-section">
      <span class="jetto-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48c13.3 0 24 10.7 24 24V96H232V72c0-13.3 10.7-24 24-24zm48 24V96h47.4c-9.4-27.6-35.4-48-66.4-48H226.9c-31 0-57 20.4-66.4 48H208V72c0-26.5 21.5-48 48-48s48 21.5 48 48zm128 24H80c-26.5 0-48 21.5-48 48V416c0 26.5 21.5 48 48 48H432c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48zM104 336H80V304h24v32zm0-80H80V224h24v32zm0-80H80V144h24v32zM336 376H176c-13.3 0-24-10.7-24-24V280c0-13.3 10.7-24 24-24H336c13.3 0 24 10.7 24 24v72c0 13.3-10.7 24-24 24z"/></svg>
      </span>
    </div>
    <div class="jetto-content">
      <span class="jetto-label">KVKK Talepleri:</span>
      <span class="jetto-email">[email protected]</span>
    </div>
  </div>

  <!-- Hukuk -->
  <div class="jetto-box">
    <div class="jetto-icon-section">
      <span class="jetto-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M192 0H320v32H448V0H576V32h48c8.8 0 16 7.2 16 16V64H0V48C0 39.2 7.2 32 16 32h48V0H192V32zm96 96V512H128V96H288zM352 96H512V512H352V96zM128 352c0 17.7 14.3 32 32 32s32-14.3 32-32H128zm192 0H448c0 17.7 14.3 32 32 32s32-14.3 32-32H320z"/></svg>
      </span>
    </div>
    <div class="jetto-content">
      <span class="jetto-label">Hukuksal Sorunlar:</span>
      <span class="jetto-email">[email protected]</span>
    </div>
  </div>

  <!-- Diğer -->
  <div class="jetto-box">
    <div class="jetto-icon-section">
      <span class="jetto-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502.3 190.8L327.4 338.6c-14.2 12-35.6 12-49.8 0L9.7 190.8C3.8 186.4 0 179.8 0 172.6V72c0-26.5 21.5-48 48-48H464c26.5 0 48 21.5 48 48v100.6c0 7.2-3.8 13.8-9.7 18.2zM48 128h416V72H48v56zM0 212.2V440c0 26.5 21.5 48 48 48H464c26.5 0 48-21.5 48-48V212.2L346.6 349.7c-25.4 21.5-62.9 21.5-88.3 0L0 212.2z"/></svg>
      </span>
    </div>
    <div class="jetto-content">
      <span class="jetto-label">Ban ve Diğer Sorunlar:</span>
      <span class="jetto-email">[email protected]</span>
    </div>
  </div>
</div>

⚠️ Don’t forget to edit the email addresses to match your own site.

🎨 Step 2: Add Style Code to extra.less
Now, to style the structure we just added, open the extra.less template and paste the following CSS code at the top:

Less:

.jetto-contact-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 99%;
    margin: 0 auto 20px auto;
    padding: 20px 10px 0 10px;
    box-sizing: border-box;
    /*padding-top: 20px;
    border-top: 1px solid hsla(0,0%,100%,.15);*/
}

.jetto-box {
    display: flex;
    /*background-color: #262938;*/
    overflow: hidden;
    flex: 1 1 calc(25% - 12px);
    min-width: 200px;
    max-width: 100%;
    color: #fff;
    box-sizing: border-box;
}

.jetto-icon-section {
    /*background-color: #1e202a;*/
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    /*border-right: 1px solid #3a3a50;*/
    margin-right: 2px;
    border: @xf-borderSize solid @xf-borderColor;
}

.jetto-icon svg {
    width: 16px;
    height: 16px;
    fill: @xf-textColor;
}

.jetto-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    width: 100%;
    font-size: 14px;
    gap: 10px;
    flex-wrap: wrap;
    border: @xf-borderSize solid @xf-borderColor;
}

.jetto-label {
    color: @xf-textColor;
    white-space: nowrap;
}

.jetto-email {
    font-weight: bold;
    white-space: nowrap;
    word-break: break-word;
    color: @xf-textColor;
}

@media (max-width: 1500px) {
    .jetto-box {
        flex: 1 1 100%;
    }
    .jetto-content {
        font-size: 12.2px;
        padding: 10px;
        flex-direction: row;
        align-items: flex-start;
        gap: 4px;
    }
    .jetto-icon-section {
        padding: 10px;
        min-width: 45px;
    }
}

With these codes, the contact email addresses in the footer will be displayed neatly and stylishly.

Reactions: nerf

Theme editor

Page Setup Appearance

Color Pickers

Toggle color picker

Style variation

XenForo Footer Contact Email Integration Guide