How to change the logo size of InStyle Joomla template.

Hello,
How to change the size of the logo on the top and header?

Thanks.

Could you please post an url to your site?
How would you like to modify the logo size?

I want to increase the width is roughly the size 230px x 54px

Salam,
http://www.otoone.com

I've tried changing the size (override.css), there is a problem on mobile display version, the size has not changed, it seems size is locked.

Salam,

Halo.... Moderator?

1. Please don't bump your questions (do not reply in your own thread) as it makes you wait longer.
2. There is an override of default settings in media-query specific stylesheet files, and it uses !important, so to force your own setting, use !important at end of the declaration.

OK, sorry. I think my question forgotten,
I will try again to fix it. hopefully be successful.

Thank you for your help.
greeting

Please let me know if you will have any other questions according this topic.

Yes. already tried. I changed the code on //small.table.css//
and display the logo on the desktop and the mobile version is good.

--------------------------------------------------
#gkLogoSmall.cssLogo {
height: 35px!important;
width: 160px!important;
margin: 10px 50px 2px 5px;
}
--------------------------------------------------
Is there any problem about this change?

Salam,

It's better to copy this code to override.css and use media-queries. If you ever plan to update the temaplate - if only override.css is used then it will be the only file you will need to copy in after update. If you will modify template core files, you will have more work to do.

HI,
How to write the code from the "small.table.css" on "override.css".

The code "small.table.css"
--------------
#gkHeader #gkLogo {
top: 4px;
}
#gkLogo,
# gkLogo.cssLogo,
#gkLogoSmall,
# gkLogoSmall.cssLogo {
height: 50px! important;
width: 200px! important;
margin: 10px 0px 2px 5px;
}
-------------------
Best regards

You need to check in template source code at which screen size this template is loaded. Currently your site is unavailable so I will use our demo to explain:
http://demo.gavick.com/joomla25/john/

Code: Select all

<link rel="stylesheet" href="http://demo.gavick.com/joomla25/john/templates/gk_john_s/css/small.desktop.css" media="(max-width: 1400px)">
<link rel="stylesheet" href="http://demo.gavick.com/joomla25/john/templates/gk_john_s/css/tablet.css" media="(max-width: 1040px)">
<link rel="stylesheet" href="http://demo.gavick.com/joomla25/john/templates/gk_john_s/css/small.tablet.css" media="(max-width: 820px)">
<link rel="stylesheet" href="http://demo.gavick.com/joomla25/john/templates/gk_john_s/css/mobile.css" media="(max-width: 600px)">


As you can see small.tablet is loaded till 820px screen width.
So to push your settings over you need to create media-query in override.css:

Code: Select all

@media (max-width: 820px){
#gkHeader #gkLogo {
top: 4px;
}
#gkLogo,
# gkLogo.cssLogo,
#gkLogoSmall,
# gkLogoSmall.cssLogo {
height: 50px! important;
width: 200px! important;
margin: 10px 0px 2px 5px;
}
}


Also - you don't need to copy whole declaration, just settings that you override, so if in:

Code: Select all

#gkLogo,
# gkLogo.cssLogo,
#gkLogoSmall,
# gkLogoSmall.cssLogo {
height: 50px! important;
width: 200px! important;
margin: 10px 0px 2px 5px;
}


You would like to change only height, then please use just:

Code: Select all

#gkLogo,
# gkLogo.cssLogo,
#gkLogoSmall,
# gkLogoSmall.cssLogo {
height: 50px! important;
}