With a previous v4.5.x change in recent weeks, the Customization/Theme settings added a new limit to the size of the Logo Image to 100% of the banner. That forces all our themes to reduce the size of the photo to unusable. Is there a way to make the photo larger (increasing the limiter above 100%) or increase the banner size by 4 so that 100% becomes usable again?

 

 

 

 

I'm sure this is something odd. Can you link me your site either here or PM?

https://www.fjrforum.com

 

Edited September 30, 20204 yr by Bounce

 

With a previous v4.5.x change in recent weeks, the Customization/Theme settings added a new limit to the size of the Logo Image to 100% of the banner. That forces all our themes to reduce the size of the photo to unusable. Is there a way to make the photo larger (increasing the limiter above 100%) or increase the banner size by 4 so that 100% becomes usable again?

 

 

 

 

I use this code in my custom css for a larger logo...maybe it will help you?

/* Adjust header height. */
#elSiteTitle, #elLogo {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 250px !important;
}

 

Edited September 30, 20204 yr by RocketStang

Add this to your theme's custom.css file:

/* Header Logo in IPS 4.5 */
#elSiteTitle, #elLogo { height: 80% !important; }

Adjust the height % as per your requirement.

And that would work for something like 300%? Right now, the GUI version throws a warning and won't let it go above 100%.

Rocketstang's attached photo is certainly going the right direction. I'm unsure that LJ's will allow going above 100% but have tried it too.

I have tried both code fragments (individually) and they either had no effect or it showed the code on the displayed screen (depending on placement of the code fragment).

Can someone please brush me up on my ancient CSS and point out the exact placement for the code fragment? Thanks.

I'm looking to make the banner image 800px tall.

Edited October 6, 20204 yr by Bounce

 

Can someone please brush me up on my ancient CSS and point out the exact placement for the code fragment? Thanks.

Insert it into custom.css in your theme's CSS resources.

Your current header image is 800px wide by 275px high and with a bit of fiddling with the CSS you can get it to show full size, but then you would need to adjust the @media CSS code to mitigate the responsiveness. It's not difficult, just fiddly.

That's how it would look.  You'd have to take a look at the @media commands to get the responsiveness going in the right direction for smaller screens. This is the code for full screen, add it to your custom CSS file.  If it doesn't work add !important before the semi-colon on each command, just in case something else is overriding.

#ipsLayout_header header > .ipsLayout_container {
    height: 275px;
}

#elSiteTitle, #elLogo {
    height: 275px;
}

🙂

I have the same issue as TS. I have tested all the code suggestions here, but none of them seems to work. 

I think it is the size of the Header bar that causes this, but I might be wrong. 

 

Insert it into custom.css in your theme's CSS resources.

I did and the first suggestions and they either had no effect or the code showed up (clear text) in the rendered page (depending on where it was placed). I haven't tried the one from Dave yet though. Maybe I've been editing the wrong template? Global? Header?

Maybe I'm approaching this the wrong way and the KIJ approach is better? Where are the settings to increase the height of the header bar so that 100% of that is no longer restricting?

Edited October 8, 20204 yr by Bounce

The codes should be placed in your CUSTOM.CSS file, not global or header...

Edited October 8, 20204 yr by RocketStang

Derp! Said everywhere someone has helped and I simply overlooked the proper tab. Off to try again.

 

Worked! Thanks for everyone for your patience. Putting the code:

 

/**
 * This file is for your custom CSS.
 * This file is not modified or overwritten during upgrades
 */
#ipsLayout_header header > .ipsLayout_container {
    height: 275px !important;
}

#elSiteTitle, #elLogo {
    height: 275px !important;
}

 

in the proper place (edit html/css; CUSTOM css) made the difference.

Is there a way to have the banner cover the entire width of the page? It seems that the,  'Create+ |  Notifications | Avatar/Account Actions' container is preventing it from displaying behind that.

Edited October 9, 20204 yr by dhendrickson

Custom banner image!  I am using a banner that is 1920 px long and it works great! 

 

Custom banner image!  I am using a banner that is 1920 px long and it works great! 

It's not a code specific issue?

 

It's not a code specific issue?

Actually, a forum logo will be affected by the header icons...the background can be custom designed to flow under the header icons.  I am not sure if there is a code tweak that could allow the forum logo to float under the header icons.

 

Actually, a forum logo will be affected by the header icons...the background can be custom designed to flow under the header icons.  I am not sure if there is a code tweak that could allow the forum logo to float under the header icons.

Before updating, the header icons (Create, Notifs, User, etc.) floated above my large banner image.

I had the same problem of a tiny banner image after updating. Adding to Custom CSS makes the image larger now, BUT it's putting the row of header icons to the right edge of the image -- instead of on top of, or even underneath -- and it looks really dumb.

Is there a way to simply have a full-width or contained large image, with the header icons beneath it? Or on top?

Thanks!

For future reference, the height of the banner can be controlled by one css variable in 4.5, so you don't need media queries or multiple css selectors.

For example, this will increase the header height to 300px:

:root{
  --header--height: 300px;
}

Or if you only want to edit the height of the mobile header, simply use:

:root{
  --responsive-header--height: 100px;
}

From there, you'd then use the "Logo height" setting to control the height of the logo. So if you've set your header to 300px and want your logo to be 150px in height, you'd change the setting to 50%

 

 

 

Is there a way to simply have a full-width or contained large image, with the header icons beneath it? Or on top?

The old user links were positioned using absolute positioning. If you want to replicate this in 4.5, add this to custom.css

#elUserNav{ position: absolute; }
[dir='ltr'] #elUserNav{ right: 0; }
[dir='rtl'] #elUserNav{ left: 0; }

That should work, but let me know if it doesn't 🙂

@Ehren Thanks for your reply! I'm trying it now... but another problem is that now the User Nav collapses to the "hamburger" menu too soon. I mean, the page isn't even that narrow, and it's already collapsing. And I've no idea where to edit that. Can you advise? Thanks in advance!

 

@Ehren Thanks for your reply! I'm trying it now... but another problem is that now the User Nav collapses to the "hamburger" menu too soon. I mean, the page isn't even that narrow, and it's already collapsing. And I've no idea where to edit that. Can you advise? Thanks in advance!

The breaking point for the responsive theme starts at 979px and is hard-coded throughout dozens of css files. Version 4.x was written years ago with the assumption that anything less than 980px was likely a tablet/mobile device, so the mobile layout should be shown. That assumption of course isn't entirely correct these days since there are a bunch of different screen sizes and devices, so I imagine the next major version of Invision Community will address this with a simple setting.

In the mean time, it's unfortunately quite difficult to change this break point, so I don't have a simple copy/paste solution for you I'm afraid.

@Ehren Well, the absolute positioning code was very helpful. So, thank you!

 

For future reference, the height of the banner can be controlled by one css variable in 4.5, so you don't need media queries or multiple css selectors.

For example, this will increase the header height to 300px:

:root{
  --header--height: 300px;
}

Or if you only want to edit the height of the mobile header, simply use:

:root{
  --responsive-header--height: 100px;
}

From there, you'd then use the "Logo height" setting to control the height of the logo. So if you've set your header to 300px and want your logo to be 150px in height, you'd change the setting to 50%

 

 

The old user links were positioned using absolute positioning. If you want to replicate this in 4.5, add this to custom.css

#elUserNav{ position: absolute; }
[dir='ltr'] #elUserNav{ right: 0; }
[dir='rtl'] #elUserNav{ left: 0; }

That should work, but let me know if it doesn't 🙂

Thank you. This works like a charm. You rock!

Question: The above allows for a full width, 'Site Logo Image' with the header user control panel icons floating on top of the 'image' How would one get that container to move, either up or down? Or, alternatively... wrap it in a bubble of sorts so the icons and text don't get lost in the header image?

 

TYIA

 

 

Edited October 18, 20204 yr by dhendrickson

 

Or, alternatively... wrap it in a bubble of sorts so the icons and text don't get lost in the header image?

Something like this will do the job..

#elUserNav{
	position: absolute;
	background: rgba(0,0,0,.6);
	border-radius: 4px;
	color: #fff;
	padding: 2px 10px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
[dir='ltr'] #elUserNav{ right: 0; }
[dir='rtl'] #elUserNav{ left: 0; }

 

If you need help beyond that, it would be best to ask future questions in the Theme Assistance forum, since this forum is technically for Feedback and suggestions.

 

Something like this will do the job..

#elUserNav{
	position: absolute;
	background: rgba(0,0,0,.6);
	border-radius: 4px;
	color: #fff;
	padding: 2px 10px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
[dir='ltr'] #elUserNav{ right: 0; }
[dir='rtl'] #elUserNav{ left: 0; }

 

If you need help beyond that, it would be best to ask future questions in the Theme Assistance forum, since this forum is technically for Feedback and suggestions.

I was right, you definitely rock!

 

Apologies for the out of venue assistance.