Set Width and Height for logo in Protostar Template

[ishantdave]

This is probably most obvious thing but I could not find a simple answer.

Joomla Version: till 3.8.8

Problem:
How do I set width and/or height for custom logo in Protostar template ?
"
The following just allow to select a logo file. There is no option to select width and height.
Joomla Admin Menu -> Extensions -> Templates -> Protostar -> Advanced Tab -> Logo

The size of logo displayed on the front end will depend on your image size. If you have anything more than about 350x70 it looks too big and you can not have a good resolution logo within that size.

What I did to achieve what I want and it worked !
I edited the Protostar template index.php file. Specifically line containing $logo variable in which the link is crafted. I added the 'width' and 'height' attributes to it. And it worked !!! Now I could have any high resolution image as logo but it will be displayed in the constraint I added as 'width' and 'height' attributes. You could get a full resolution image by right clicking and opening the image in new tab in browser. However the 'height' was not making any effect.

The problem with the solution.
It worked. However at some places like failed url and some other pages the logo still appears without constraints. I don't know it will be the same if I update the Joomla version.

What I think/want.
In the "Joomla Admin Menu -> Extensions -> Templates -> Protostar -> Advanced Tab" there should be two settings to specify the height and width of the image along with the path. It seems an obvious solution but I don't know why has not been implemented.

Thanks

[sozzled]

This may help you: http://google.com/search?q=Set+Width+and+Heig ... r+Template

BTW, instead of editing the file template.css (if you want to make changes to the template) it is better to create a file named user.css and add your custom CSS there. If you modify the file template.css you will lose those changes when you update to the next version release of Joomla.

[ishantdave]

I have reported that you are trying to promote some website.

Regarding the reply please note that I have edited index.php time in the template and edited the php code to add width and height attributes. I have not edited the css file to have different look of my website.

This may help you: http://google.com/search?q=Set+Width+and+Heig ... r+Template

BTW, instead of editing the file template.css (if you want to make changes to the template) it is better to create a file named user.css and add your custom CSS there. If you modify the file template.css you will lose those changes when you update to the next version release of Joomla.

[sozzled]

I have reported that you are trying to promote some website.

Let me Google that for you is not "promoting some website". It is a well known resource to help people find answers to their problems.

Your questions about setting the image dimensions for a logo image in the Protostar template are very commonly-asked questions. Instead of answering each of these questions individually, there are commonly-used solutions to those questions. I suggest that you use the information I gave you earlier to find the solution that best fits your problem.

Two other comments:

1) You should never modify the index.php file of Protostar unless you want to paint yourself into a corner when the next version of Joomla is released (because you'll have to make those modifications again after you update your website); and

2) You can easily add your own CSS rules by creating a file called user.css, where you can add your own customisations, and those changes will not be affected when you update your website.

[ishantdave]

Finally I could do what I wanted. This was so obvious that nowhere it is mention on Google or at least I could not find it.
Now let me do what I think everyone should do. Post a solution that worked.

Refer the following page to create custom user.css
https://extensions.joomla.org/blog/item ... -template/

Add/Edit the user.css with the following text and save the file.

Code: Select all

.brand img{
  height: 70px;
}

Now upload and choose the high resolution logo of your choice for the Protostar template.

Now hard reload the browser by clicking Control+Reload. And that's it. Your high resolution logo scaled within proper size. And you can get the actual version by right clicking and opening the image in new tab/window !

(The only issue is with 404 or invalid url. Surprisingly the the css is not loaded for that page and your logo appear in actual size which is weird. Try using a fake url to see)