How to add a logo to minima theme?

#1

Hi, I would like to add a logo to minima but as I see in github it is not clear how

There have been several attempts but I do not find the solution: https://github.com/jekyll/minima/issues?q=logo

Thanks a lot for your help.

#2

One way is to add CSS to main.scss that displays a logo next to the .site-title text. Example commit below for the site: https://alsprolog.com

#3

Thanks Chuckhoupt,

One question: my main.css is in _site/assets/main.css https://github.com/raroraroraro/prle/blob/gh-pages/_site/assets/main.css allthough points to: <link rel="stylesheet" href="/prle/assets/main.css">

which does no exist.

Should I change _site/assets/main.css?

Thanks

#4

The _site directory is where Jekyll caches the generated site when developing locally, so _site should not be put under version control. Github Pages generates the site from the Jekyll source, and will ignore _site.

To customize Minima’s CSS, you need to override its default SCSS by creating a copy of Minima’s assets/main.scss and customizing it with your own rules. Full documentation at:

https://github.com/jekyll/minima/tree/v2.5.1#Customization

#5

Thanks Chuckhoupt,

I have added the logo to the assets and the main.scss to the assets folder https://github.com/raroraroraro/prle/commit/2be405bb5bb42df44822e572fa8f5a7421c0dfcc

but still does not show up.

I made a mistake with the path and then change it to assets (instead of assets/images), but it does not work https://github.com/raroraroraro/prle/commit/f705574c03e720f5c778439480378be5d9a7befb

The network console of Chrome shows that is still calling the main.css, not the new main.scss

Thanks again

#6

The correct file is main.scss (note the S in .scss). Minima (and most Jekyll themes) use SCSS (Sassy CSS) to encode their CSS rules.

#7

Thanks again. It looks like I’m going to fall in all the posible mistakes.

Does it matter if it is a jpg (or need to be a png)? Becasue the space is made but I could not see the logo https://github.com/raroraroraro/prle/blob/2be405bb5bb42df44822e572fa8f5a7421c0dfcc/assets/images/LogoRaro.jpg (the same as the favicon on the browser’s page)

We are close!

#8

Looks like you just need to adjust the path. The image is at /assets/LogoRaro.jpg, not /LogoRaro.jpg.

#9

Note, you’ll need to scale the image to an appropriate size, around 32x32px.

#10

Thanks, yes it works, but the size is too big as you say

.site-title::before {
content: url("/assets/LogoRaro.jpg");
display: inline-block;
position: relative;
width: 32px;
top: 32px;

}
And if I reduce the image to 32x32px, it is not on its place.
What should I change?

Thanks a lot again

#11

Adjust width and top. A top of 5-10px should work, and width might be increased for better spacing.

#12

Thanks chuckhoupt,

It looks good with:

.site-title::before {
content: url("/assets/LogoRaro.jpg");
display: inline-block;
position: relative;
width: 5px;
top: 10px;

}

I understand that this should not be help about CSS, but now the image is eating part of the text. If you can help me with it, others might find it helpful too and fix the whole problem in one shot.

Note (for others non-programmers) that when the image is too big, one easy way to fix it is to reduce the size of the image to let’s say 32pxx32px as I did.

#13

The width is too small, it must be at least as wide as the logo (32px). Try: width: 35px; top: 5px;

#14

Congratulations. You nailed it! Thanks for your patience. I hope all this detail help others to fix it. I’m sure they know more than I do :wink:

Thank you very much!

1 Like