Responsive Logo

Dear all,

I'm using the Magazin template.
I'd like to include a logo a the banner_top position.
How can I add a png file there, that autoscales?

Best regards
Felix

Please insert the image and after that post your site url - I will instruct you how to make it responsive.

The URL is: http://joomla3.moerike-gymnasium.de/
It's about the main-logo at the top of the page.

Best regards
Felix

Actually the only problem is that this position is hidden on smaller screens... Please edit: /templates/gk_magazine/css/override.css and add at its end:

Code: Select all

#gkBannerTop {
display: block;
}


Remember to enable "CSS override" in template settings - advanced section.

Hi,
just did what you told me, but unfortunately without any success. The top Banner logo isn't re-scaling while changing the size of browser window.
Any other idea?

Best regards
Felix

I've added our logo as described in https://www.gavick.com/documentation/jo ... e-add-logo.
as a CSS logo.
Additionally I override some css:

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
  background-image: url("../../../images/Kopf_141127.png");
  width: 808px;
  height: 120px;
  margin-left:140px;
}

However, the image still not autoscale while reducing the horizontal size of the browser window.
Any idea how to achieve such a behavior?

Regards
Felix

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
background-size: 100%;
max-width: 808px;
width: auto;
float: none;
}


Please add above declaration to override.css

It's working but I'm still not happy with the result.
The Logo is not aligned to the mainbody-section when re-scaling the window.
It should appear always on top of the "mainbody"-section, that means with the same width.
Is there not module that displays pictures within a section?

Best regards
Felix

in override.css change:

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
background-image: url("../../../images/Kopf_141127.png");
background-size: 100%;
max-width: 808px;
width: auto;
float: none;
}


to:

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
background-image: url("../../../images/Kopf_141127.png");
background-size: 100%;
max-width: 808px;
width: auto;
float: none;
}


Thanks for the response, but I can't recognize the difference of the code. I looks identical for me.

However, the image "Kopf_141127.png" should appear at the module-position "banner-top" and it should re-scale automatically when increasing or decreasing the width of the window. I think it's not possible to assign a picture to a module-position within css, right?

Thanks
Felix

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
background-image: url("../../../images/Kopf_141127.png");
background-size: 100%;
max-width: 808px;
margin: 0px !imoprtant;
width: auto;
float: none;
}


I just tried your proposal but unfortunately it's not the expected result.
The resizing of the image works fine, but...

As you can see at the homepage, there's a login module at the "login"-position.
This login module should always appear at the same height as the banner, that means at the right side of it.
Currently it's below, although I used this css-code:

Code: Select all

margin-right: 0px;

In order to align the banner to the mainbody-section below of it, I used this css-code

Code: Select all

  margin-left: 15%;

This works fine until the width of the browser is reduced in such a way, that the "inset" bar disappears.
In such a case the margin-left value should be 0.
How can I achieve it?

Thanks for the support
Felix

Using media queries in override.css:
http://css-tricks.com/css-media-queries/

The media queries solved the problem. Very good advice. Thanks.
I wasn't able to place the login form at the right side of the main logo, so I had to remove it, although I'd preferred it at that position.
I'd appreciate it, if you've any advice to achieve this behavior.

Felix

Please add the module back and let me know I'll see what can be done.

I put the module back at the "login"-position.
As you can probably see, it's not at the same height as the csslogo.

Actually having logo same width like content and having login at the same height is just mathematically impossible.
Also your logo is quite big so if we get any other idea - should the login be at its bottom line, vertically middle or on top?

I'll try to explain the way it should look like...
The logo should always have the same width as the "mainbody_top"-position. This is currently not happening at the right side of the logo.The left side is ok.

The login-form should always appear on top of the "sidebar"-position and at the same height as the banner, that means at the left upper corner.
In the https://www.gavick.com/documentation/joomla-templates/joomla-templates-configuration/magazine-configuration-joomla - "Available Module Positions" you see the "banner-top" (That should be the position of the main banner) and next to it the "userarea". There should appear the login link.
Is this possible?

Best regards
Felix

I'm afraid it is not possible. You would need to recreate "#gkPageContent" basic structure in header, using empty divs to push content in right place. If you check "#gkInset", "#gkSidebar" and "#gkContentWrap" they all use % of width but adds also padding in pixels. This math cannot be reproduced with one element.
What comes to my mind is to completely move "#gkLogo" element from "#gkPageTop" section to beginning of "#gkContentWrap" and setting the logo to always 100% width. This will keep it as long as the content, same with "#gkUserArea" - moving it to top of "#gkSidebar" element.
But this is just a draft and a lot of changing in templates/gk_magazine/layouts/default.php. Also some styles will not work right a way and will need of redesign.

I was expecting this. Doesn't matter. The login-form will move to the inset-section...
Thank your very much for your good support.

Please let me know if you would have any additional questions regarding this topic.