Piwigo.org

rajdude · 2022-04-24 19:12:59

Still struggling with having a responsive logo image inside Piwigo's Jumbotron

Any tips will be HIGHLY appreciated :-)

PS: I have tried this:
https://stackoverflow.com/questions/220 … ound-image

But simply specifying a jumbotron image in theme's settings custom CSS does not bring an image to the Jumbotron. Only if the basic settings page has some content specified, THEN Jumbotron shows up.

What gives?

rajdude · 2022-04-24 23:11:47

I made a tiny bit of progress by adding this code to the page banner box

<!DOCTYPE html>
<html lang="en">
<style>
.jumbotron {
background-image: url("https://rajdude.com/photos/custom/PhotosbyRajLogo2.png");
background-size: 25%;
background-repeat: no-repeat;
position: relative;
background-color: #B6B6B6;
}
</style>
</html>

It is sort-of responsive, but not fully. The logo image (which has the words "Photos by Raj") does resize as the viewport becomes smaller (like on cellphones)......but the gray background and padding on the left side remains static.

Any idea what I should do?

Katryne · 2022-04-25 05:46:56

The only time when I managed to get a responsive background image, I had this as css :

Code:

background: url(./images/xxx.jpg) no-repeat top;background-attachment:fixed;height: 100%overflow-scrolling:touch-enabled;

But it was for the whole page, not a part of it.

Besides, have you tried to enter your css customisation either in the dedicated area of Bootstrap Darkroom settings or in the css tab of Local File Editor ? This is the usual way for css modifications, instead of forking original files. Your modification risk to be erased with next update of the theme.

rajdude · 2022-04-25 05:47:09

Well, I have spent hours on trying to get, what I think is the Jumbotron size to become responsive.
I guess it is time to give up for tonight.

Would it be possible for someone to PLEASE HELP me out?

There has got to be a CSS setting which is specifying 100 px height for the Jumbotron!
I just have not found it yet :-(

rajdude · 2022-04-25 05:49:29

Katryne wrote:
The only time when I managed to get a responsive background image, I had this as css :
Code:
background: url(./images/xxx.jpg) no-repeat top;background-attachment:fixed;height: 100%overflow-scrolling:touch-enabled;
But it was for the whole page, not a part of it.

Besides, have you tried to enter your css customisation either in the dedicated area of Bootstrap Darkroom settings or in the css tab of Local File Editor ? This is the usual way for css modifications, instead of forking original files. Your modification risk to be erased with next update of the theme.

OK let me try out your code now

PS: Yeah, I am entering my custom CSS code in the "Custom CSS" area of the theme settings (at the bottom).

rajdude · 2022-04-25 05:55:58

Well, if I paste your code into the page banner page (where I am putting the include for my logo's png file, the logo totally disappears :-( I just reverted it back

Maybe I am doing something wrong :-(

For reference:
1. This code is in the Basic settings page > page banner>>

<!DOCTYPE html>
<html lang="en">
<style>
.jumbotron-fluid{
background-image: url("https://rajdude.com/photos/custom/PhotosbyRajLogo2.png");
background-size: 30%;
background-repeat: no-repeat;
position: relative;
background-color: #B6B6B6;
</style>

<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
</div>
</div>
</html>

2. This code is in the CSS of the theme:

div.container-fluid {max-width:80%;}
.navbar {font-size:.9rem;}
.navbar-brand {font-size:.9rem;}
.img-fluid {max-width:22%;}
.navbar {padding: 0rem 1rem;}
.jumbotron {
padding-top: 1%;
padding-bottom: 1%;
}
*/

Any chance you can please check and let me know what I am doing wrong?
I gotta go to bed now, gotta go to work early tomorrow morning.

Good night! and thanks for looking into this!

https://rajdude.com/photos/index.php?/category/4

Last edited by rajdude (2022-04-25 05:56:45)

rajdude · 2022-04-25 17:23:26

ok I am at it again. Already spent a couple of hours researching on the internet and testing code on Piwigo.
Basically, nothing works. and I am REALLY frustrated.

I really hope someone more knowledgeable can help me here.
Otherwise it may be time for me to just disable the jumbotron and live without it.

Right now here is the situation:

In "Custom CSS: I have this:

.jumbotron{
background-image: url("https://rajdude.com/photos/custom/PhotosbyRajLogo2.png") no-repeat;
background-color: #B6B6B6;
}

In "Page banner"
I have nothing.

Interestingly, all I get is a large gray bar where the jumbotron is. No image inside it.
Seems to me the page banner needs the image specified, only then the logo image shows up.

Can someone please enlighten me how this jumbotron in Bootstrap darkroom actually works?

rajdude · 2022-04-26 16:38:39

Yeah, I managed to find a way to solve most of my problems myself :-)

However, I still have not found a way to position my logo to the left of the page, properly padded to align with the images, so I just let it float in the middle of the jumbotron.

Does anyone know how to do that, padding? But I am not sure if padding is responsive.

BTW, for future reference, here is what I did to accomplish my particular "look", which I am happy to say is fully responsive:

Piwigo admin > Configuration > Options > Page banner

nothing (leave it totally blank)
This interferes with the custom CSS in the next step

Piwigo admin > Configuration > Themes > Bootstrap Darkroom Configuration > Custom CSS

div.container-fluid {max-width:80%;}
.navbar {font-size:.9rem;}
.navbar-brand {font-size:.9rem;}
.img-fluid {max-width:22%;}
.navbar {padding: 0rem 1rem;}

.jumbotron{
background-image: url("https://rajdude.com/photos/custom/PhotosbyRajLogo2.png");
background-repeat: no-repeat;
background-color: #B6B6B6;
background-size: 30%;
background-position: center;
padding-top: 3%;
padding-bottom: 3%;
}

rajdude · 2024-09-21 22:51:13

Hello !
A couple of years have passed and my website still does not have a responsive banner :-(

I am not that CSS savvy. Can someone please advise me on what I should add to this code to make the banner (background-image) become smaller on cellphone screens?

This is the code I currently have in Bootstrap darkroom >> Settings >> Custom CSS

div.container-fluid {max-width:80%;}
.navbar {font-size:.9rem;}
.navbar-brand {font-size:.9rem;}
.img-fluid {max-width:22%;}
.navbar {padding: 0rem 1rem;}

.jumbotron{
background-image: url("https://rajdude.com/photos/custom/PhotosbyRajLogo2.png");
background-repeat: no-repeat;
background-color: #B6B6B6;
background-size: 10%;
background-position: center;
padding-top: 3%;
padding-bottom: 3%;
}

rajdude · 2024-09-21 23:19:29

YAHOO! I figured it out!

The culprit was a plugin which I had installed at some point in the past and had forgotten about it....Header Manager. The moment I disabled it, my logo-header image became responsive!

Last thing: I found that 35% is the sweet spot for this value in the custom CSS:

background-size: 35%;

Check it out on my website
https://rajdude.com/photos/

Last edited by rajdude (2024-09-21 23:21:22)

Piwigo.org

Announcement

#16 2022-04-24 19:12:59

Re: Please help customizing Bootstrap Darkroom theme a bit

#17 2022-04-24 23:11:47

Re: Please help customizing Bootstrap Darkroom theme a bit

#18 2022-04-25 05:46:56

Re: Please help customizing Bootstrap Darkroom theme a bit

Code:

#19 2022-04-25 05:47:09

Re: Please help customizing Bootstrap Darkroom theme a bit

#20 2022-04-25 05:49:29

Re: Please help customizing Bootstrap Darkroom theme a bit

Katryne wrote:

Code:

#21 2022-04-25 05:55:58

Re: Please help customizing Bootstrap Darkroom theme a bit

#22 2022-04-25 17:23:26

Re: Please help customizing Bootstrap Darkroom theme a bit

#23 2022-04-26 16:38:39

Re: Please help customizing Bootstrap Darkroom theme a bit

#24 2024-09-21 22:51:13

Re: Please help customizing Bootstrap Darkroom theme a bit

#25 2024-09-21 23:19:29

Re: Please help customizing Bootstrap Darkroom theme a bit

Board footer