Piwigo.org

Assmann · 2024-11-28 17:40:39

Bootstrap configuration layout Search Engine

Greetings,

Bootstrap Darkroom is my favorite theme ☺ I have only general question (I don't know if "themes section" is the right place):
Could Darkroom's Bootstrap theme change the way the search engine is displayed when the user presses the magnifying glass? Currently this drops down the list in the menu bar. On many new websites, I noticed that after pressing the search button, a popup appears in the middle of the screen. I believe this is more attractive to the user.
I don't know why I have to provide details about my instance if this applies to all versions of this theme and Piwigo.

I would appreciate any kind of help,
Asmāa ✌

Schneider-Fotografie · 2024-11-29 22:01:00

Hello Assmann

You can see it on my website. You just need to add the search form to the POPUP window. The whole thing is in the header.tpl.

best regards
Olaf

Code:

<html>

<title>
Test page CSS Popup
</title>

<style>
.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 120%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 200%;
  margin: 0 0 15px;
}
</style>

<body>

<font size=5>
<a href="#open-modal">Click here</a>
</font>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#modal-close" title="Close" class="modal-close">close &times;</a>
    <h1>Test page</h1>
    <div>This is a test page</div>
  </div>
</div>
</body>

</html>

Assmann · Yesterday 16:45:10

It really works!

Thank YOU Schneider-Fotografie, you're my Hero :*

I didn't expect such quick reply ¯\_(ツ)_/¯

Last edited by Assmann (Yesterday 16:46:26)

Schneider-Fotografie · Yesterday 19:18:11

Assmann wrote:
It really works!

Thank YOU Schneider-Fotografie, you're my Hero :*

I didn't expect such quick reply ¯\_(ツ)_/¯

Always my pleasure ( ͡~ ͜ʖ ͡°)

Olaf

Piwigo.org

Announcement

#1 2024-11-28 17:40:39

[resolved] [Theme] Bootstrap Darkroom - Modern Search Engine

#2 2024-11-29 22:01:00

Re: [resolved] [Theme] Bootstrap Darkroom - Modern Search Engine

Code:

#3 Yesterday 16:45:10

Re: [resolved] [Theme] Bootstrap Darkroom - Modern Search Engine

#4 Yesterday 19:18:11

Re: [resolved] [Theme] Bootstrap Darkroom - Modern Search Engine

Assmann wrote:

Board footer