Announcement

  •  » Themes
  •  » [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

#436 2019-11-06 01:42:44

MarcRJacobs
Member
Bavaro, Dominican Republic
2013-05-27
36

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Thank you, but that option is already off. You don't happen to have any other idea??? I hope ???

Offline

 

#437 2019-11-07 09:27:30

homdax
Member
Sweden
2015-02-02
294

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Trying to do some about these page links, the function is nice, but green.

Tried a.page-link {background-color: #othercolour; }

but it only takes background obviously then tried


a.page-link {color: #othercolour; } but still wrong

Can someone explain how these are linked to CSS and what to alter to get them to be different shades of yellow? The arrows and numbers also need to change colour to... maybe black, probably not blue since it might look greenish.

Offline

 

#438 2019-11-14 13:22:25

dakitt
Member
2019-11-14
1

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

I have a (rather small) problem.

Theme default and quick search in Navbar is enabled (latest version).

When I use a small browser window or mobile device then the input form for search turns to white background. When you type your search query the text is also white = not visible. I fixed this myself by turning off the corresponding style attribute 'color inherit'. This worked.

But in wide/normal browser window the search box is dark grey. Standard input is "Suchen" in a lighter grey. That's readable. But when you start typing your search query is again a little darker grey and you can hardly read it on top of the background. I could not find the style sheet which defines that text input color.

Can you help me?

update: It seems that the theme was optimized for dark templates :-) When I switch to 'darkroom' everything looks fine. Btw: the little slick arrows (prev, next) are also not visible with white background.

Last edited by dakitt (2019-11-14 15:16:49)

Offline

 

#439 2019-12-04 15:47:04

R.S
Member
2018-05-22
14

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Hello. I hve the same problem. Quicksearch  showing only white area with no text inside. How to fix this CSS?
Best Regards Robert

Last edited by R.S (2019-12-04 15:47:24)

Offline

 

#440 2019-12-24 09:07:22

Katryne
Member
2016-12-03
365

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Hello Teekay !
I am preparing on a test site the upgrade of our Piwigo.
I will now install Pixigo 2.10+ with Bootstrap to get at last a responsive theme, but trying to keep the oldish look that fits the ... spirit of our local history society.
Here is the old site :https://photos.revestou.fr/
Here is my test site : https://gabandjo.legtux.org/piwigo/

Still much work to be done for the new look.

I meet 2 issues that I cannot solve :

1/ for non connected visitors, the browsing arrows above the photo on picture page do not work, with or without photo swipe. Look here : https://gabandjo.legtux.org/piwigo/pict … 3-gunnison

They are working when connected.

On my other site, also a customised BootStrap Darkroom, the browsing arrows wore working, but with a theme 2.2.0, while the site where they do not work is with BS Darkroom 2.4.4. It is the only difference that I can see.

2/ the order of items that I modify in Admin menu Manager are not ... modified in the upper menu bar.

Can you help, please ?

Last edited by Katryne (2019-12-24 09:08:27)


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

Offline

 

#441 2019-12-24 11:31:22

kleiner_Hobbit
Member
Berlin
2017-08-22
67

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Katryne wrote:

Hello Teekay !
1/ for non connected visitors, the browsing arrows above the photo on picture page do not work, with or without photo swipe. Look here : https://gabandjo.legtux.org/piwigo/pict … 3-gunnison

I´m not logged in and the arrows are working for me :-)

Offline

 

#442 2019-12-26 00:11:12

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

This is my first forum post. This is a tip in case it's useful. I wanted to search Bootstrap Darkroom for the words: top links. It seems that I can only search all posts in Themes, not just Bootstrap Darkroom? The workaround I found is to ask Duck Duck Go (my search engine) to only search pages that start with the URL of Bootstrap Darkroom posts; that's https://piwigo.org/forum/post.php?id=26624 for the first page, https://piwigo.org/forum/viewtopic.php?id=26624&p=2 for the second page, and so on for each succeeding page. So I typed this search to Duck Duck Go (without the &p=n):

top links site:piwigo.org/forum/viewtopic.php?id=26624

It returned results from pages 1, 30, 24, 9, and 25.

Offline

 

#443 2019-12-26 00:36:39

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

I've just installed Piwigo yesterday, so this answer may be somewhere obvious. I'm using Firefox and Chrome browsers on an old Windows XP laptop for testing because it has a small screen size... I'm also using the Firefox browser on an Android 10 phone. From the Windows Firefox browser, I ran http://jerrypeek.com/gallery/piwigo-netinstall.php yesterday, set some options and etc, and decided I wanted a new theme. I went to Admin -> Configuration - > Themes and added Bootstrap Darkroom and made it the default. (I'm running Piwigo on a 1&1 IONOS shared hosting package; they use Apache, MySQL 5.7 and PHP 7.3. If you want more info, go to http://jerrypeek.com/phpinfo.php .)

I found that the black area covering the top half of the browser window is called the jumbotron. Under the settings I added Custom CSS to make it cover a bit less of the window:

Code:

.jumbotron {
  height: 100px;
}

I don't think that CSS change caused the following problem? I found that the links at the top right corner of the gallery (Albums, Discover, and Login) don't work. (They did work before I changed themes.) Neither do the Photo Sizes and Slideshow icons. All of those add a # to the end of the URL in my browser's address bar; that's all. But the breadcrumb navigation links (Home / Top album / Sub album / name) do work.

I've found that I can log in as admin by going to http://jerrypeek.com/gallery/admin.php , so I'm not completely stuck. Any advice? Thanks!

Offline

 

#444 2019-12-27 04:11:11

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

I wrote:

I found that the links at the top right corner of the gallery (Albums, Discover, and Login) don't work. (They did work before I changed themes.) Neither do the Photo Sizes and Slideshow icons. All of those add a # to the end of the URL in my browser's address bar; that's all. But the breadcrumb navigation links (Home / Top album / Sub album / name) do work.

Changing the PHP version from 7.3 to 7.2 seems to have fixed it. (1&1 IONOS lets me choose the version... handy.) This is on http://jerrypeek.com/gallery/ .

Offline

 

#445 2019-12-27 04:45:51

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

I'm ready to start making a few formatting changes in my new Piwigo installation. I'm traveling and don't have time to study all of the CSS in Bootstrap Darkroom, so I'm hoping someone can tell me how to fix the biggest problem: The black area at the top of the window takes almost half of the space. (Please see the attached screen shot.) I'd like to shrink it a lot so there's more room for the photos. I've already done two things:

1) Gone to admin -> Configuration -> Themes -> Bootstrap Darkroom -> Configuration -> Custom CSS and added this code to make the jumbotron shorter:

Code:

.jumbotron {
  height: 100px;
}

2) In admin -> Configuration -> Options -> Page banner, added CSS styling to remove all of the space I can above and below the banner:

Code:

<p style="padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">&nbsp;&nbsp;&nbsp;Welcome to my ....</p>

How can I shrink the black area to just a small amount of black above and below the banner? Thanks!

PS: I'm using an HTML <img> tag in the Gallery title to put a logo there. I know this isn't good coding; I'll need to fix it.

Piwigo version: 2.10.1
MySQL version: 5.7
PHP version: 7.2
Gallery: http://jerrypeek.com/gallery/ (soon, https://).

Offline

 

#446 2019-12-27 17:45:22

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

I've made some progress working around the problems in my previous post that starts "I'm ready to start making a few formatting changes in my new Piwigo installation...". But my second fix, below, is still not right. I'll attach screen shots of the gallery on my laptop browser (with a window 1024x576 pixels) and my phone (with a window 1080x2220 pixels; I shrank it to 486x1000 for posting).

1) I had made a mistake in the relative path to the Site Logo image. Now it's working. I  removed the hack I used of putting an HTML <img> tag in the Site title.

2) I reduced the space above the Page banner by adding a negative padding and margin:

Code:

<p style="padding-top: -50px; margin-top: -50px; padding-bottom: -50px; margin-bottom: -50px;">&nbsp;&nbsp;&nbsp;Welcome to my...

That's an ugly hack. It doesn't reduce the space underneath the banner. On my laptop browser, the space above the banner is now good, but the top line of the banner isn't visible on my mobile phone anymore.

I tried taking a fresh look at the CSS for the banner/jumbotron this morning, but I still don't see why there's so much blank space. Thanks again for any advice... I'd love to get this fixed before I'm home, two weeks from now, where I can really tear this apart and experiment.

Last edited by Piwigo4Me (2019-12-27 17:47:26)

Offline

 

#447 2019-12-27 23:48:43

kleiner_Hobbit
Member
Berlin
2017-08-22
67

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Piwigo4Me wrote:

2) I reduced the space above the Page banner by adding a negative padding and margin:

Code:

<p style="padding-top: -50px; margin-top: -50px; padding-bottom: -50px; margin-bottom: -50px;">&nbsp;&nbsp;&nbsp;Welcome to my...

That's an ugly hack. It doesn't reduce the space underneath the banner. On my laptop browser, the space above the banner is now good, but the top line of the banner isn't visible on my mobile phone anymore.

I use the Bootstrap Darkroom-Theme and have deactivated the banner.
And I use an Logo instead of text (see screenshot)

With the Plugin "Local Files Editor" I made some CSS changes to
local/css/bootstrap_darkroom-rules.css

Code:

#theCategoryPage h4.title {
    line-height: 1.0rem;
}
.h4, h4 {
    font-size: 1rem;
}

.h5, h5 {
    font-size: 1rem;
}


body {
    margin-top: 15px;
    font-size: 16px;
}


.container-fluid {
  width: 96%
}


#content-description {
  padding-bottom: 15px !important;
}
#content-description p:last-of-type {
  margin-bottom: 0px;
}


.navbar-brand {
    font-size: 1rem;
    line-height: 1rem;
}
  
.navbar-nav {
    font-size: 1rem;
    line-height: 1rem;
}

Maybe some of the code will solve your problem. I´m not a programmer and the code is generated by trial and error ;-)

Last edited by kleiner_Hobbit (2019-12-27 23:55:50)

Offline

 

#448 2019-12-28 03:05:27

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Thank you, kleiner_Hobbit. Although that code didn't help my situation, it helped me realize that I could use the "View Source" command in my browser to see the HTML code that makes the header. The !important in your CSS code reminded me that I might need to use that in my CSS. The View Source showed that the header is made this way:

Code:

<div class="jumbotron mb-0">
  <div class="container">
    <div id="theHeader"><p ...header code here...</p></div>
 </div>
</div>

So I tried CSS to see if I could change the space under the header, using the CSS selector #theHeader:

Code:

#theHeader {
  margin-bottom: -2rem !important;
  padding-bottom: -2rem !important;
}

It didn't work, but I think I'm closer to a solution. Thanks again for taking the time to post your reply!

Offline

 

#449 2019-12-28 03:30:35

Piwigo4Me
Member
2019-12-25
12

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

This is a followup to my post 20 minutes ago. I got it! This is still a hack, but at least it's working. I looked at a list of CSS selectors, https://www.w3schools.com/cssref/css_selectors.asp . Using the names of the classes I found in the View Source listing, I added this CSS code that selects elements with both the class jumbotron and the class mb-0:

Code:

.jumbotron.mb-0 {
  margin-bottom: -4rem !important;
  padding-bottom: -4rem !important;
  color: rgb(255,0,0);
}

I added the color to be sure I was selecting the right element. The screen shot below shows the result. This still needs a lot of cleanup, but the site is patched for now. If anyone has a better answer, please post it... I hate leaving ugly hacks like this in the forum where people might get wrong ideas from it.

Last edited by Piwigo4Me (2019-12-28 03:32:26)

Offline

 

#450 2020-01-28 07:14:24

MarcinL
Member
2020-01-26
2

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

I apologize if this question was answered already, but I struggle to get the answers from search.

How do I control exif data displayed in full screen mode?
I want to get rid of 'Maker', but really have no idea where to look.
For normal picture view, local/config/config.inc.php works, but how do I control fullscreen view?

Offline

 
  •  » Themes
  •  » [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Board footer

Powered by FluxBB

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