Best way to increase the logo size?

martingr71

saguaros I'm sorry but I'm working in localhost until I have the site ready to be visible. Could you tell me where can I try by myself to modify the logo size? Thanks

saguaros

martingr71
For the style customization like this, you can use Google chrome or Firefox inspect element. What I usually do is hover on any HTML element (i.e. button, tag, text, …) you want and right click on it and then click on inspect element, it will show you which CSS/LESS class it is using and which CSS/LESS file and the path to this element on the right side. then you can go to the file and replace it with new CSS/LESS you change.

In this case: http://prntscr.com/jrv9mq

You right click on the logo, you will see the class of logo and customize style for it. Then add that custom CSS into the file: root/templates/ja_focus/css/custom.css (Create this file if it doesn't exist)

Hope this helps.

paulus1031

Without seeing the site it is a bit tricky to make suggestions
e.g. in particular white space in an image etc

Are you able to come back to us when you upload the site?

Cheers
Paul

martingr71

saguaros Thanks for the tip! I'll try it.

An embarrassing question: what kind of files are CSS / LESS? Normally Joomla simply worked on css files ...

Regards!

aman204

martingr71 what kind of files are CSS / LESS? Normally Joomla simply worked on css files ...

You may wish to check out these guides here and here elaborating on the same 🙂

martingr71

aman204 Thanks! So, LESS files are always supported by a .css file, is that it?

And thats why I have to add a custom CSS into the file: root/templates/ja_focus/css/custom.css, so that the new instructions in the LESS file, are supported by the new code in the custom.css file?

Thanks in advance

aman204

martingr71 And thats why I have to add a custom CSS into the file: root/templates/ja_focus/css/custom.css, so that the new instructions in the LESS file, are supported by the new code in the custom.css file?

You may wished to also refer to this documentation excerpt. Yes, LESS files being dynamic preprocessor style sheet language files needs to be compiled to CSS in order to run on client or server side

Documentation on using custom.css file and its characteristics are given here

martingr71

May I change the size of the logo only with some modifications in the custom.css file? like suggested in the topic https://member.joomlart.com/forums/d/2847-latest-article-module-grid-layout-css/11?

pavit

Hi martingr71

Custom.css file is not overrided by template updates , so you can use it to add any css modification you like to apply to your website -

Logo included.

Regards

martingr71

pavit Thanks! Can you help me with the logo size? As I said above:

I would like to do two things with the logo layout:

For normal logo layout: To be able to increase the size of the logo horizontally and vertically in several pixels.

For small logo in mobile devices: The same or (as a possibility) even decrease the margins to gain space (there is two much white for my taste).

Unfortunately, I can't pass you my online site details for now. I'm working in localhost.

pavit

Hi martingr71

Are you using an image or text ?

martingr71

pavit Image

pavit

Hi martingr71

You can add to custom.css

.logo a {
min-height:yourpxvalue;
min-width:yourpxvalue;
}

For small logo you can use

.logo-control .logo-img-sm {
min-height:yourpxvalue;
min-width:yourpxvalue;
}

This is done without looking at your website - knowing before dimensions of your logo image and logo image small could be of better help

Regards

martingr71

pavit Many Thanks!

As I can see, in this css code you are referring to the minimum values.

Is it not necessary to delimit the maximum values?

I tell this to you because what I want is precisely to increase the dimensions of the normal logo a bit, and reduce only the margins of the small logo (and in the case of the small logo I want to keep the size as it is in the template)

martingr71

pavit saguaros I really appreciate your help, but the thing is that Pavit gave me that approach:

16 hours ago
Hi martingr71

You can add to custom.css

.logo a {
min-height:yourpxvalue;
min-width:yourpxvalue;
}
For small logo you can use

.logo-control .logo-img-sm {
min-height:yourpxvalue;
min-width:yourpxvalue;
}

And from my perspective its quite accurate for my needs. At least in the first attempt. Then I can upload the site and maybe you could give me your thoughts. I only need a better approach given the presets Pavit gave to me... couldn't it be possible?

Thanks in advance

martingr71

pavit

I understand what do you mean, and my intention is to do it so when the site is ready to upload, meanwhile I'm trying to get the best version of it. That's why, referring to your previous post I wrote to you before this:

As I can see, in this css code you are referring to the minimum values

.logo a {
min-height:yourpxvalue;
min-width:yourpxvalue;
}
For small logo you can use

.logo-control .logo-img-sm {
min-height:yourpxvalue;
min-width:yourpxvalue;
}.

Is it not necessary to delimit the maximum values?

Maybe adding one or two more lines of code I can do that, just to prove if it works...

Regards

paulus1031

Hi There

As Pavit said above - it will help if you can add the dimensions of your logo image

Thanks
Paul

martingr71

paulus1031 The point is that the logo maximum have a size in the template. All the logo dimensions are relative, as all design. My logo size is in fact adaptable. All I want to do is to be able to change the values to see if its ok and the design fits. Maybe I'm not explaining as well as I should... Sorry for that

paulus1031

Are you making the site live any time soon?

Cheers
Paul

martingr71

paulus1031 I hope so. But it will help if I could try with the logo layout before...

Couldn't you give me the .css parameters to modify the custom.css file to change the logo size as I said above?

All I need is

To increase the dimensions of the normal logo a bit.
Reduce only the margins of the small logo (in the case of the small logo, I want to keep the size as it is in the template).

saguaros

martingr71

It's hard to give suggestion without seeing your site closely, try to put your site online asap and share us the link.

Regards

pavit

martingr71 couldn't it be possible?

If you upload your website in a public host then everything will be possible -

Regards