Announcement

  •  » Themes
  •  » Please help customizing Bootstrap Darkroom theme a bit

#1 2022-04-19 22:35:55

rajdude
Member
2021-05-18
71

Please help customizing Bootstrap Darkroom theme a bit

Hi everyone,
First, yeah, I do understand I am probably asking for too much here. but I also know that these things are probably defined by CSS and can/should be easily modifiable, right?

So I have a request for people more knowledgeable than me: can someone please help me accomplish these small changes to Bootstrap darkroom theme:

1.    More white space at the sides

Is it possible to have some padding at the sides of the page? I would like to have some white space and not have photos all the way to the left and right of the page. For example, like this:
This is what I want:

https://i.imgur.com/2mmLZKx.png

This is what I do NOT want:

https://i.imgur.com/4dVdRp3.png

2.    My own logo properly sized, at the top left instead of plain text.

Using config page, I know I can put a custom image as a logo, but it gets either too small or too large. Is there a way to define:
a.  its size and
b. top-bottom padding?

For example: This is what it looks like currently:

https://i.imgur.com/7j0Ulwz.png


I am trying to do two things, specifically:
a.    remove the extra black space (which got introduced after I added the logo) and
b.    make the logo a little bigger

3.    Banner image with slogan inside it, which disappears if one scrolls down

Something like how Flickr does it. See here:

https://i.imgur.com/dBkAe3g.png

4.    Modify font size of text in menu bars
These fonts are just too tiny or too big for my personal taste. Can I change their size?

https://i.imgur.com/v5ZISyd.png


Thank you very much in advance :-)



Piwigo URL: https://rajdude.com/photos/index.php?/category/3


Environment

    Piwigo 12.2.0 Check for upgrade
    Operating system: Linux
    PHP: 7.3.33 (Show info) [2022-04-19 16:28:29]
    MySQL: 5.5.5-10.3.23-MariaDB-cll-lve [2022-04-19 16:28:29]
    Graphics Library: ImageMagick 7.1.0-20
    Cache size 33.46 Mo   calculated 1 month ago Refresh

Activated plugin list 10

    Additional Pages
    Advanced Menu Manager
    Batch Downloader
    Extended Description
    FCK Editor
    gdThumb
    Grum Plugins Classes.3
    Header Manager
    LocalFiles Editor
    VideoJS

Offline

 

#2 2022-04-20 06:01:34

Katryne
Member
2016-12-03
172

Re: Please help customizing Bootstrap Darkroom theme a bit

Hello !
More white space at the sides : have you tried to disable "Full width layout" in the theme settings ?


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Offline

 

#3 2022-04-20 14:01:39

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

Thanks Katryne,
Yes I just tried unchecking it.Now it has HUGE white spaces to the left and right.
I mean that white space is too large.

I guess I need to learn how to edit CSS and maybe make a child theme to my personal liking. But I have no knowledge with CSS and child themes:-(

I wonder if there is some documentation out there on how to do that.



Katryne wrote:

Hello !
More white space at the sides : have you tried to disable "Full width layout" in the theme settings ?

Offline

 

#4 2022-04-20 14:19:53

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

I found some self-help type information!

Posting it here just in case someone else needs this info:
https://piwigo.org/doc/doku.php?id=user … q:css_code
https://github.com/tkuther/piwigo-boots … kroom/wiki

Offline

 

#5 2022-04-20 14:36:30

Katryne
Member
2016-12-03
172

Re: Please help customizing Bootstrap Darkroom theme a bit

You may try adding this in bootstrap Darkroom Custom CSS settings (bottom of Bootstrap settings)

Code:

div.container-fluid {max-width:90%;}

And adapt the percentage to your wishes.


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Offline

 

#6 2022-04-20 14:51:48

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

THANK YOU! THANK YOU! THANK YOU! Katryne :-)
That code worked perfectly. I just had to drop it 80% and it now looks perfect!

Now looking for solutions to my other issues.

Katryne wrote:

You may try adding this in bootstrap Darkroom Custom CSS settings (bottom of Bootstrap settings)

Code:

div.container-fluid {max-width:90%;}

And adapt the percentage to your wishes.

Offline

 

#7 2022-04-20 14:59:02

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

How do we find out which CSS tags are available to be modified, like what we did above?

Offline

 

#8 2022-04-20 15:05:08

Katryne
Member
2016-12-03
172

Re: Please help customizing Bootstrap Darkroom theme a bit

I use webdeveloper extension with Firefox or Seamonkey. Also, with Firefox, the inspector can be used to know which code is in use for such or such part of the web page : click right /inspect. (I am not sure of the correct command, my environement is in French)


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Offline

 

#9 2022-04-20 16:42:36

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

Oh! Oh!  OH! Now I am getting REALLY excited! :-)
Thanks to your tips and the documentation here, which is REALLY old and irrelevant. I am talking about this one https://piwigo.org/doc/doku.php?id=user … q:css_code  (I could not find anything called firebug) , but I figured some stuff out!


For my #4 wish list, this works:

.navbar {font-size:1rem;}

Offline

 

#10 2022-04-20 17:14:51

Katryne
Member
2016-12-03
172

Re: Please help customizing Bootstrap Darkroom theme a bit

I am precisely working on a new Piwigo with customisation of Bootstrap Darkroom and I asked too for help on the French forum : https://fr.piwigo.org/forum/viewtopic.p … 23#p234923


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Offline

 

#11 2022-04-21 17:40:07

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

ok I think I am done :-) in a happy space now.
Check it out:
https://rajdude.com/photos/
Simple and a little bit muted, just the way I like it today. Will probably change it in the future


Ok for future reference, and also for helping customizing crusaders in the future...here is what added in the CSS box on the theme's config page:

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: 0rem 2rem;
background-color: #B6B6B6;
}


Description of what does what:

Changes the white space on the sides:
div.container-fluid {max-width:80%;}

Changes size of fonts in navigation bar
.navbar {font-size:.9rem;}

Changes the lower navigation bar, aka breadcrumbs bar?
.navbar-brand {font-size:.9rem;}

Changes my custom logo's width in the top nav bar
.img-fluid {max-width:22%;}

Reduces excessive padding in navbar
.navbar {padding: 0rem 1rem;}


Changes to Jumbotron:


Reduces excessive padding around my second logo
padding: 0rem 2rem;

Changes background color of my second logo inside the jumbotron bar
background-color: #B6B6B6;

BTW, the second logo is coming from "configuration >> options" page. I just put a simple HTML reference to my image, like this

<img src="https://rajdude.com/photos/custom/PhotosbyRajLogo2.png"  alt="Photos by Raj" width="512" height="93">

and deleted everything else there.

Works for me :-)
I hope this helps someone in the future.


PS: You can probably customize anything in the theme, if you can figure out the CSS tag behind that particular thing. This is a good starting point for finding out that thing in CSS, however it is old and has info which is not valid anymore.
https://piwigo.org/doc/doku.php?id=user … q:css_code

BTW I tried to find and install Firebug, but could not find it anymore. The simple right click and inspect feature in Figrfox worked fine in Firefox (for me). I also installed webdeveloper extension in Firefox , but could not figure out how to use it.

Offline

 

#12 2022-04-21 18:09:07

Katryne
Member
2016-12-03
172

Re: Please help customizing Bootstrap Darkroom theme a bit

Raj ! the owl is my totem ! I had a website once about them, but I kind of lost it. Maybe be I will make an other one some day. Or at least an album in a Piwigo.

About your site : Happy you found at last nearly all you wanted. The big work is ahead now, you will just have to fill it up. Personnally, I am not able to do substantive work until I like the form. Mark, on your home page, the top of the big photo is cut on my screen. Is it normal ?

I am still working on my customisation of the Darkroom theme. For this project, I have 3 different websites, Genealogy, blog and album. I started with the genealogy site and tried to make the template of the other sites alike. I had help from persons all over the world for the style research ! Because I keep asking questions when I cannot do what I want.

Here is the genealogy : https://clan.chauvigne.info/
The blog : https://chauvigne.info/
And the Piwigo (not yet finished) : https://album.chauvigne.info/

As for the webdeveloper extension, it was much easier to use in the old release. That's why I maintain a SeaMonkey browser with the old version. New releases of Firefox deleted nearly all the very useful extensions.


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Offline

 

#13 2022-04-21 18:18:40

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

Katryne wrote:

Raj ! the owl is my totem ! I had a website once about them, but I kind of lost it. Maybe be I will make an other one some day. Or at least an album in a Piwigo.

Yeah, those owls are from our neighborhood. The family lays eggs every year in a tree. You gotta see the photogs who come there with HUGE lenses. Some of them sit there all day long to take that elusive shot. My photos look crappy against theirs, LoL

Katryne wrote:

About your site : Happy you found at last nearly all you wanted. The big work is ahead now, you will just have to fill it up. Personnally, I am not able to do substantive work until I like the form. Mark, on your home page, the top of the big photo is cut on my screen. Is it normal ?

No that is not normal, I had started a thread about it, but either no one responded or there was not any resolution :-( Here :
https://piwigo.org/forum/viewtopic.php?id=31927

There is some plugin which is doing that slideshow and it does not resize correctly :-( This COI (center of interest) inside Piwigo is no good. IMHO there should be a way to disable it. Started a thread about COI also, no response in that one also. Here:
https://piwigo.org/forum/viewtopic.php?id=32026


I think the user base of Piwigo is either too small or not english speaking, that is why I sometimes do not get any answers here in this forum.

Good luck with your customizations!

Offline

 

#14 2022-04-22 02:29:18

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

Uh I'm back

Just found out that my piwigo looks nasty on a cellphone

I guess the biggest offender is that second logo I added to the jumbitron. Since there's a size specified, it becomes too big for a cellphone screen.

I think I'll have to find a way to specify a screen percentage instead

So the research starts again!

Offline

 

#15 2022-04-22 17:44:48

rajdude
Member
2021-05-18
71

Re: Please help customizing Bootstrap Darkroom theme a bit

so yeah, I gotta make that second logo image, which is specified in the Jumbotron - "Responsive".
Reading up this article:
https://www.bitdegree.org/learn/responsive-image

Offline

 
  •  » Themes
  •  » Please help customizing Bootstrap Darkroom theme a bit

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2022 · Contact