If you would like to change the size of your SharePoint site logo, you are able to do this in the Theme Builder:
Before | After |
TABLE OF CONTENTS
- Before we begin
- Option 1. Change the Logo Width with ShortPoint Theme Builder
- Option 2. Applying Custom CSS to Change the Size of the Logo
Before we begin
- Changing the size of the logo is possible to a certain limit with the standard Theme Builder functionality. We will start with showing you how to do that, and if you need to exceed those limits, you will need to use some CSS magic. Please read the article further to discover both options and use what's best for you.
- This article is for classic pages. If you want the same solution for Modern Pages, please check this one out: How to Increase the Logo Size in Modern Pages
Option 1. Change the Logo Width with ShortPoint Theme Builder
STEP 1. Open the Theme Builder
Please click the cog wheel on the top of your site and choose Site Contents.
From the Site Contents go to ShortPoint Dashboard > Theme Builder and click Customize my site.
STEP 2. Find the Logo Width Settings
Go to the Header in the Theme Builder menu:
Then select Logo:
STEP 3. Change the logo width
Customize the Logo Width and press Publish button:
Done!
There is a limit on how much you can change the logo width in Theme Builder at the moment.
If you would like to have more flexibility on it, you can do this with adding a Custom CSS code.
Option 2. Applying Custom CSS to Change the Size of the Logo
Important: Your custom image which you would like to use as a logo, should be large, otherwise it will not be possible to enlarge it more than its actual size.
STEP 1. ShortPoint Theme Builder
Please click the cog wheel on the top of your site and choose Site Contents.
From the Site Contents go to ShortPoint Dashboard > Theme Builder and click Customize my site.
STEP 2. Open the Custom CSS Utility
Navigate to the Utilities > Custom CSS and put this code in the required field:
#DeltaSiteLogo img { max-width: 120px; } .ms-siteicon-img { max-width: 150px; max-height: 150px; }
Note: You are welcome to change the values in pixels to fit your needs.
Press Apply, and it will resize your logo according to your customization:
STEP 3. Publish your changes
Finally, press the Publish button:
That's it.
Note: If your Logo goes over Title or Menu like on the last screen, please in the Theme Builder go to the Header > Site Title and change the Margin Left. For the Menu, in the Theme Builder, go to Menus > Paddings & Margins and change the Menu Margin.
Related articles: