# Adding logos in footer section

**URL:** <https://meta.discourse.org/t/adding-logos-in-footer-section/267365>\
**Category:** Development\
**Created:** [June 6, 2023, 8:00am UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365 "2023-06-06T08:00:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 6, 2023, 8:00am UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/1 "2023-06-06T08:00:57Z")

</div>

Hi,  
I would like to add the logos of the universities supporting the forum I manage: [https://fspm.discourse.group](https://fspm.discourse.group)

As you can see at the bootom, I manage to add them however I would like to:

- add a link to each logo
- spacing them
- keeping the original proportion of Gottingen logo that for some reasons was modfied

I wrote this in footer:

```plaintext
<div class="custom-footer-image">
    <img src="upload://3lfj0glW4Qjc2cMHAC7dBVglghP.png" alt="Footer Image">
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</div>

```

and this in CSS

```plaintext
.custom-footer-image {
    display: flex;
    justify-content: center;
    
    img {
        max-width: 30%;
    }
}

```

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [June 6, 2023, 12:11pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/2 "2023-06-06T12:11:56Z")

</div>

Try this CSS:

```plaintext
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 1rem;
    
    img {
        max-width: 30%;
        height: 100%;
    }
}

```

You can add a link doing so: `<a href="https://..."><img... /></a>`

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 6, 2023, 3:38pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/3 "2023-06-06T15:38:58Z")

</div>

The CSS trick works, thanks!  
The link I still cannot manage

i tried the follwing in footer but it doesn’t work.. (i am testing on the third logo)

```plaintext
<div class="custom-footer-image">
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    
    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>

```

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 6, 2023, 3:41pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/4 "2023-06-06T15:41:41Z")

</div>

hmmm maybe try `https://` instead of `http://` ? but that looks like it should work 🤔

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [June 6, 2023, 3:47pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/5 "2023-06-06T15:47:10Z")

</div>

It’s correct, but you might need to adjust the CSS as well:

```css
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 1rem;
    
    a {
        max-width: 30%;
        height: 100%;
    }
}

```

Make sure to use `https` as stated Lilly and change the two first links:

```html
<div class="custom-footer-image">
    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

```

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 6, 2023, 5:09pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/6 "2023-06-06T17:09:16Z")

</div>

I inserted the following and now even the logos are gone:

```plaintext
<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

```

```plaintext
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center; 
    gap: 1rem;
    
    a {
        max-width: 30%;
        height: 100%;
    }
}

```

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 6, 2023, 5:20pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/7 "2023-06-06T17:20:28Z")

</div>

why do you have the spaces and backslashes in the ends of your html image tags?

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 6, 2023, 6:23pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/8 "2023-06-06T18:23:40Z")

</div>

Do you mean at the end of every row where the logos are called? I don’t really know - I just copy pasted some code from others

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [June 6, 2023, 6:37pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/9 "2023-06-06T18:37:45Z")

</div>

Your HTML is correct.

```html
<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

```

Try with this CSS instead:

```plaintext
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
    gap: 2rem;

    a {
        width: max(20vw, 220px);
        
        img {
            width: 100%;
        }
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/1/501f31bc372657d7b777a09bcdb38791f5deb1b6.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/1/e/8/1e8f2751710a0aa685b3bcfdc1aaab1bfcb872b6.png)

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 6, 2023, 7:05pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/10 "2023-06-06T19:05:25Z")

</div>

this code worked for me and i just tested it.

```scss
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center; 
    gap: 2rem;
    
    img {
        max-width: 20%;
        height: 100%;
    }
}

```

```html
<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

```

but you’ll need to figure out the image sizing part.

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [June 6, 2023, 7:22pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/11 "2023-06-06T19:22:00Z")

</div>

I’m unsure if it’s because you’re using a different theme, but the image css doesn’t look good to me. 🤔

> **what I see**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/d/3/4/d3404f3400a73657fc100668579266e8a093482e.png)

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 6, 2023, 7:26pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/12 "2023-06-06T19:26:51Z")

</div>

TBH, not a lot of it looks good to me 😁

there has to be a better way to do this… 🤔

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 6, 2023, 7:36pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/13 "2023-06-06T19:36:16Z")

</div>

curious as to why you went this route instead of just placing the html in the footer section of a theme?

i put this in the `Footer` section of a blank theme and it worked fine.

EDIT CSS/HTML Footer:

```html
    <center><a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width=300>
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width=300>
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width=300>
    </a></center>

```

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 7, 2023, 7:04am UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/14 "2023-06-07T07:04:15Z")

</div>

Sorry but nothing is working for me… I believe that your solutions works, so I guess I am doing something wrong.  
I am literally copying paste the codes in the component section either on the footer (html code) or the CSS section. And it worked fine for the basic solution without links…

I also tryied to modify the theme footer section with the advise of @Lilly but it also doesn’t work for me…

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 7, 2023, 2:33pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/15 "2023-06-07T14:33:09Z")

</div>

is your forum the link in your profile? i want to have a look.

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 7, 2023, 3:03pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/16 "2023-06-07T15:03:37Z")

</div>

yes it is!

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 7, 2023, 3:50pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/17 "2023-06-07T15:50:09Z")

</div>

ok i had a look and i was able to make links work in dev tools. but when i applied the code it changes the image dimensions for some reason. but if you use the code i gave you in my last post and put it in your footer code it should work. i would remove that css code, including the div class. once you have removed the CSS stuff, just copy and paste the code i gave you in the footer section of the EDIT CSS/HTML section.

go to your theme component (or preferably create a new one like i did):

 ![IMG_3470](https://global.discourse-cdn.com/meta/original/4X/3/9/1/391c71cf77f33a52d666d5d372a59ce6a6219734.jpeg)

paste this exact code in the css and footer tabs sections like this:

CSS tab:

```scss
.footer_align {
    display: flex;
    justify-content: center;
}

```

Footer tab:

```html
<div class="footer_align">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width="300">
    </a>  
    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width="300">
    </a>  
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width="300">
    </a>
</div>

```

 ![IMG_3477](https://global.discourse-cdn.com/meta/original/4X/b/c/8/bc8421a4bfd3579beef82b0bbb2320092718d1c5.jpeg)

 ![IMG_3479](https://global.discourse-cdn.com/meta/original/4X/1/7/2/1728a80796e2ddeb6b2e4418f921ef99a18ba374.jpeg)

this was the result on my forum. i independently verified that each image links to the proper URL as well:

 ![IMG_3468](https://global.discourse-cdn.com/meta/original/4X/2/8/2/282729acc50a604cf8dd1bd1070a1f830e553d74.jpeg)

if you want to make them smaller, just edit the width=“300” for each image to something smaller. if you want to space them, you can use the html non-breaking space `&nbsp;` in between the linked images html code.

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [June 7, 2023, 4:03pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/18 "2023-06-07T16:03:46Z")

</div>

> [@Lilly](#):
>
> `<center>`

I’d suggest avoiding [deprecated HTML tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) and replacing it with a `<div>` with a `text-align: center;` property. 🙂

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [June 7, 2023, 4:31pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/19 "2023-06-07T16:31:37Z")

</div>

yea was just trying to make it as easy as possible without any css just to get it to work on his site. i agree though and updated my post. thanks. 🙂

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [June 7, 2023, 4:53pm UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/20 "2023-06-07T16:53:21Z")

</div>

ok I tried but I think there is an issue with scaling to the right size.  
The immages appear just at a specific size - that is too small. if I try bigger sizes the images disappear

 ![Screenshot 2023-06-07 at 18.50.31](https://global.discourse-cdn.com/meta/original/4X/d/e/8/de873f39adf4c0b7dfecbe934e7673b00f769a2c.png)  
 ![Screenshot 2023-06-07 at 18.50.37](https://global.discourse-cdn.com/meta/original/4X/2/0/4/20411819ea77562292f6e8d711c5c9d1e3ee6586.png)

 ![Screenshot 2023-06-07 at 18.50.56](https://global.discourse-cdn.com/meta/original/4X/2/3/2/23211303c521c613a548c42bd2bf997c5b826fef.jpeg)

[Next page](https://meta.discourse.org/t/adding-logos-in-footer-section/267365.md?page=2)