Solved Templates

How to increase Gazette template height and maintain equal spacing above and below the logo

Asked by Sean Carney 3 years ago Last activity 3 years ago

I am using the Gazette template and have tried to increase the height of the logo because our logo is two lines and an image. So, it needs to be somewhat taller.

The problem is when I increase the height from 26 (quickstart setting) to 110 then the row becomes uneven with too much space above the image no space below the image. I am wondering what I can do to create enough height so that there will be an equal spacing above and below the logo and the search field:

Default Gazette logo with height increased to 110 pixels:
https://drive.google.com/file/d/1rFdgxUkUeaCHZ7QWSVN1gPWc5CedrDgg/view?usp=share_link

ShalomAventure Logo at 26 (default) pixels height:
https://drive.google.com/file/d/1LpWazLL8lr0Ii9EPiEsQyadwWhSUmY3F/view?usp=share_link

ShalomAdventure logo increased to 110 Pixels:
https://drive.google.com/file/d/1GrTLymo99OWSz89kiGpvpuCNDgPnzlwv/view?usp=share_link

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
3 years ago

You should set the header height and logo height same

Try this one

.logo-image {
    height: 100px !important;
}


#sp-header{
    height: 100px !important;
}

10 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Did you try the CSS? It seems like this when I set the height by using custom CSS

https://prnt.sc/tXL0Wb4wyNAF

Is this ok for you?

-Regards.

Sean Carney Asked this
3 years ago · edited

If that has the height increased by usinig CSS then I would say it worked perfectly. But, from what I see it looks like the quickstart.

Can you give me the css that you suggest that I use and tell me where you put it?

I have selected our logo for the logo space and set the height to 110 pixels. If you can give me CSS to make the logo and the search field center alight vertically, I will be grateful.

Currently there is too much space above the image and the search box and not enough space below the image and the search box.

Mehtaz Afsana Borsha Staff
3 years ago

Use this custom CSS


#sp-header{
    height: 110px !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Sean Carney Asked this
3 years ago

Thank you very much.

Sean Carney Asked this
3 years ago

That definately worked. I am wondering if there is any simple css to reduce the whitespace slightly both above and below the logo and search field?

Sean Carney Asked this
3 years ago

I accepted the answer because it worked but because I had a second related question after seeing how it worked, I rejected the answer. But, it was not because I was not happy with what you provided. I was concerned that I might not receive the answer to the second quesion if this was marked and solved. Sorry for the inconvenience.

Sean Carney Asked this
3 years ago

Thank you for your answer. It almost works and I had already tried a variety of heights. In order to have it appear close to balanced with the space above and below being the same height, I need to use the 110px. If I reduce the number to 90px then the white space below the logo and search field is reduced but the space above is not affected. So, it is not balanced or even. That is what I was hoping to achieve.

height to 110
https://drive.google.com/file/d/1tiRXMf9KqVsIw9F3ULWiMo_tcRR41jvj/view?usp=share_link

height to 90
https://drive.google.com/file/d/1yl8smxL_k4ykcnolsgPJroWGtioFvznt/view?usp=share_link

So, it seems that I may need a bit of another css code to reduce or increase the space above the logo and image.

Sean Carney Asked this
3 years ago

Thank you very much.

Sean

Log in to reply.