Changing logo size in radix blog

Publishing Your Results
1

I have created a blog using the new radix package. It uses a _site.yml file for general setup. One of the options for the navbar is logo. I have used my own .png file for the logo and it appears in the navbar when I generate the site. The issue is that the logo is too small. I would like to know how to manipulate the size in css. I noticed that the rmakdown website hardcodes the image size in css like so:

#rStudioHeader .rStudio .logo {
  display: inline-block;
  width: 70px;
  height: 25px;
  background-image:url(../images/logoRStudio.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  vertical-align: middle;
}

The above code was taken from: https://github.com/rstudio/rmarkdown/blob/gh-pages/css/rmarkdown.css. In the rmarkdown website the logo was not configured in the _site.yml file (this might be a new feature in radix, I'm not sure). I have changed the above code and am able to use it to brute force my image in the place of the logo, but several problems occur.

  1. If I include my image using css (i.e., background-image:url(../images/logoRStudio.png);) and take out the image call in my _site.yml file, then no logo appears in the navbar.
  2. If I again include my image using css and include the image call in _site.yml (i.e., logo: image.png), my logo appears twice... one small version (the original that I would like to manipulate) and the hardcoded version supplied through css. The hardcoded version responds to the size changes provided in the css.

My workaround is to do (2) and to include a transparent placeholder image in _site.yml (i.e., logo: placeholder.png). Essentially this puts a transparent image on top of the hard code css image. This is a bit hacky, and I am ok with that, but the logo does not appear on any of the blogposts generated in _posts.

Long story short, I would prefer to not include the image in the navbar by hardcoding it into the css. I would like to find the appropriate class and css call to manipulate the height/width of the logo when inserted using logo: image.png in the _site.yml file. Does anybody know how to do this?

2

For anybody looking to make this same adjustment, the following css did the trick for me.

.radix-site-header .logo img {
   display: inline-block;
   background-size: 100% auto;
   background-repeat: no-repeat;
   max-height: 41px;
   width: auto;
   margin-bottom: 5px;
   padding-right: 5px;
   vertical-align: bottom;
 }
2 Likes
3

Hi there! If your question's been answered (even by you!), would you mind choosing a solution? It helps other people see which questions still need help, or find solutions if they have similar problems. Here’s how to do it: