How to make the logo larger?

Support Themes & Styling
1

I’m using a default install with the Quark theme.

I’d like to make the logo (a .jpg file) at the top of the screen larger.

I’ve tried editing grav/user/themes/quark/scss/theme/_header.scss. Here, I found the .logo height parameter set to 43px. I changed it to 100px, but it doesn’t make any difference.

I also found grav/user/themes/quark/scss/theme/_variables.scss, which has $header-height-large and $header-height-small variables. I increased those as well, but again to no effect.

When testing, I’m testing on a separate VM where the browsers are configured to auto clear all cache, etc. when I quit them. So I don’t think this is a caching problem.

I just don’t know what else to alter. How do I change the logo size? These seem like they’d be the relevant settings.

Thanks for your help!

2

@tedodc, You’ve got two options to change the logo or any other styling:

  1. Using scss
    scss files first need to be compiled into css and the css will probably need further processing (prefixing, minify, etc). The css will then be used by the browser.
    To compile scss, you will need to install npm and run $ npm install from the shell inside your own/child theme. Then run $ npm run dev or $ npm run build.
    This is the preferred way when making many changes and the only way when variables need to be changed.
  2. Using plain css
    Add css to /user/themes/<childtheme>/css/custom.css. This is the easiest way when making small changes.

For whichever option you choose, it should be performed in an inheriting/child theme and not in Quark itself. Any change made to Quark will be lost when a new version arrives.

1 Like