Jump to content

Banner Photo Now Too Small

Bounce

By Bounce
in Feedback

 Share

Recommended Posts

Bounce Rookie

Bounce

Posted
Posted
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?
 
 
 
 

2.jpg

Link to comment
Share on other sites
RocketStang Rising Star

RocketStang

Posted
Posted (edited)
On 9/23/2020 at 8:58 AM, Bounce said:
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?
 
 
 
 

2.jpg

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;
}

 

ScreenHunter_843 Sep. 30 10.30.jpg

Edited by RocketStang
Link to comment
Share on other sites
Bounce Rookie

Bounce

Posted
  • Author
Posted (edited)

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 by Bounce
Link to comment
Share on other sites
Davyc Mentor

Davyc

Posted
Posted

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.

image.thumb.png.af586766edcdda4946426cfb8d0ba896.png

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;
}

🙂

Link to comment
Share on other sites
Bounce Rookie

Bounce

Posted
  • Author
Posted (edited)
On 10/6/2020 at 1:01 PM, Paul E. said:

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 by Bounce
Link to comment
Share on other sites
Bounce Rookie

Bounce

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Kingsguard Apprentice

Kingsguard

Posted
Posted
On 10/9/2020 at 12:13 PM, RocketStang said:

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!

Link to comment
Share on other sites
Ehren Rising Star

Ehren

Posted
Posted

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%

 

 

27 minutes ago, Kingsguard said:

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 🙂

Link to comment
Share on other sites
Ehren Rising Star

Ehren

Posted
Posted
Just now, Kingsguard said:

@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.

Link to comment
Share on other sites
My Sharona Experienced

My Sharona

Posted
Posted (edited)
On 10/16/2020 at 12:43 AM, Ehren said:

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 by dhendrickson
Link to comment
Share on other sites
Ehren Rising Star

Ehren

Posted
Posted
32 minutes ago, dhendrickson said:

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.

Link to comment
Share on other sites
My Sharona Experienced

My Sharona

Posted
Posted
29 minutes ago, Ehren said:

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.

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...