Add affiliates....

Is there a way to add affiliates to the bottom of the index page of the forum?

That way, we can exchange affiliates with other people....

Yes, you can add those in Board Templates. You would need to do so using HTML. But this also allows you to cleanly recreate a box with a category title. I’ll share some code later today for a clean affiliates box.

This is just something quickly spin up.

Put this in Board Templates:

<div class="affiliate-panel panel">
  <div class="panel__title">
    Our Affiliates
  </div>
  <div class="affiliate-grid">
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 1">
    </a>
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 2">
    </a>
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 3">
    </a>
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 4">
    </a>
  </div>
  <div class="panel__footer">
  </div>
</div>

Put this in your theme CSS:

.affiliate-panel {
  max-width: 1300px;   

  width: 100%;
  margin: 0 auto;     

}

.affiliate-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px;
}

.affiliate-grid img {
  width: 88px;
  height: 31px;
  display: block;
}

.affiliate-grid a {
  display: inline-block;
  transition: transform 0.15s ease;
}

.affiliate-grid a:hover {
  transform: scale(1.05);
}

Cedric said:

This is just something quickly spin up.

Put this in Board Templates:

<div class="affiliate-panel panel">
  <div class="panel__title">
    Our Affiliates
  </div>
  <div class="affiliate-grid">
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 1">
    </a>
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 2">
    </a>
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 3">
    </a>
    <a href="#" target="_blank" rel="noopener">
      <img src="link" alt="Affiliate 4">
    </a>
  </div>
  <div class="panel__footer">
  </div>
</div>

Put this in your theme CSS:

.affiliate-panel {
  max-width: 1300px;   

  width: 100%;
  margin: 0 auto;     

}

.affiliate-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px;
}

.affiliate-grid img {
  width: 88px;
  height: 31px;
  display: block;
}

.affiliate-grid a {
  display: inline-block;
  transition: transform 0.15s ease;
}

.affiliate-grid a:hover {
  transform: scale(1.05);
}

Thank you! I've got this up on my forum.
@Cedric When using the theme "Navy Blue", it automatically switch's from light mode to dark mode whenever I move from one page to another on the forum now that I've added the affiliates code to my forum. Is that messing with the theme at all?

Cat_Lady said:

Thank you! I've got this up on my forum.
@Cedric When using the theme "Navy Blue", it automatically switch's from light mode to dark mode whenever I move from one page to another on the forum now that I've added the affiliates code to my forum. Is that messing with the theme at all?

Do you still have this issue? I just checked your forum, but that is not happening for me - both the affiliate box and the light/dark mode switch seem to work just fine.

I’m wondering the same as Mace. There is nothing in the code that could conflict. But do let us know if you have further issues.

@Mason @Cedric

Yes, it is still doing it.

Cat_Lady said:

@Mason @Cedric

Yes, it is still doing it.

That'd odd. Have you tried clearing your browser cache?

I just tried again in the browser that you are using specifically, but everything still seems to work just fine.