inserting a square site logo

• 

  infinitevolition · Member · Jan 15, 2019 at 5:31 pm

  • Copy link
  • Add topic to favorites

  Hi. I have a square site logo that I would like to insert (under Customizing Site Identity), but the theme is forcing a cropped version:

  How can I force it to accept a square logo (say 513×513)?

  The blog I need help with is: (visible only to logged in users)

• 

  gemmacevans · Member · Jan 16, 2019 at 12:25 pm

  • Copy link

  Hi infinitevolition,

  The Nikau theme automatically crops the logo into a rectangle but I’ve written some CSS which should help you add a square image instead. Please paste the following code in to My Sites > Customise > Additional CSS:

  
  /* adds a square logo */
  .custom-logo-wrap a.custom-logo-link img { 
  	display:none;
  }
  
  #site-branding .custom-logo-wrap {
  	background-image: url("IMAGE-URL");
  	height: 200px;
  	background-size: 200px 200px;
  	background-repeat: no-repeat;
  	background-position: center;
  	
  }
  

  The 200px value can be changed to anything you like. IMAGE-URL will be the file URL of the square image you wish to use.

  For the logo placement to work, you’ll need to do a couple of things:

  1. Upload a square logo to the Media Library.
  2. Choose a site logo in My Sites > Customise > Site Identity. It won’t be cropped to square proportions but the CSS above will replace the image with a square version. This step is needed to display the container needed to hold the logo we have specified with CSS.

  If you have any questions or need help tweaking the CSS, you’re welcome to reply here or start a chat :)

• 

  infinitevolition · Member · Jan 16, 2019 at 4:03 pm

  • Copy link

  Fantastic! Thank you so much, greatly appreciated.