Bounce Posted September 23, 2020 Posted September 23, 2020 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? amaozjy 1
Morrigan Posted September 30, 2020 Posted September 30, 2020 I'm sure this is something odd. Can you link me your site either here or PM?
Bounce Posted September 30, 2020 Author Posted September 30, 2020 (edited) https://www.fjrforum.com Edited September 30, 2020 by Bounce
RocketStang Posted September 30, 2020 Posted September 30, 2020 (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? 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, 2020 by RocketStang Malwarebytes Forums 1
Lucas James Posted October 4, 2020 Posted October 4, 2020 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. Bounce 1
Bounce Posted October 5, 2020 Author Posted October 5, 2020 And that would work for something like 300%? Right now, the GUI version throws a warning and won't let it go above 100%.
Bounce Posted October 6, 2020 Author Posted October 6, 2020 (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 October 6, 2020 by Bounce
CoffeeCake Posted October 6, 2020 Posted October 6, 2020 4 hours ago, Bounce said: 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.
Davyc Posted October 6, 2020 Posted October 6, 2020 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; } 🙂 Bounce 1
Kjell Iver Johansen Posted October 7, 2020 Posted October 7, 2020 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. Bounce 1
Bounce Posted October 8, 2020 Author Posted October 8, 2020 (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 October 8, 2020 by Bounce
RocketStang Posted October 8, 2020 Posted October 8, 2020 (edited) The codes should be placed in your CUSTOM.CSS file, not global or header... Edited October 8, 2020 by RocketStang Bounce 1
Bounce Posted October 8, 2020 Author Posted October 8, 2020 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. Disruption, My Sharona, Mercury5 and 1 other 4
My Sharona Posted October 9, 2020 Posted October 9, 2020 (edited) 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, 2020 by dhendrickson
RocketStang Posted October 9, 2020 Posted October 9, 2020 Custom banner image! I am using a banner that is 1920 px long and it works great!
My Sharona Posted October 9, 2020 Posted October 9, 2020 7 minutes ago, RocketStang said: Custom banner image! I am using a banner that is 1920 px long and it works great! It's not a code specific issue?
RocketStang Posted October 9, 2020 Posted October 9, 2020 15 minutes ago, dhendrickson said: 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. My Sharona 1
Kingsguard Posted October 16, 2020 Posted October 16, 2020 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!
Ehren Posted October 16, 2020 Posted October 16, 2020 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 🙂 My Sharona and Meddysong 1 1
Kingsguard Posted October 16, 2020 Posted October 16, 2020 @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 Posted October 16, 2020 Posted October 16, 2020 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.
Kingsguard Posted October 16, 2020 Posted October 16, 2020 @Ehren Well, the absolute positioning code was very helpful. So, thank you!
My Sharona Posted October 18, 2020 Posted October 18, 2020 (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 October 18, 2020 by dhendrickson
Ehren Posted October 18, 2020 Posted October 18, 2020 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. My Sharona 1
My Sharona Posted October 18, 2020 Posted October 18, 2020 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. Ehren 1
Recommended Posts