Footer search in PHPlugins

Markus · 2018-05-24 21:42:54

Hi,
in my Okapi Site http://www.der-canonier.de/ I use the PHPlugins Footer search in the ttg_footer_top.

This works perfectly.

In Pangolin there is exactly the same section.
Has anything changed in the code in Pangolin? Or did I miss an attitude?

That's my Code I use in pangolin:

//FOOTER SEARCH FOR PHOTOGRAPHY
function ttg_footer_top( $style, $path ) {
echo '
<div id="search" class="collapse clearfix">
<form action="https://pangolin.der-canonier.de/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Fotosuche" class="footsearch" value=""/>
<button type="submit" class="footsearch">Fotos suchen</button>
</form>
</div> <!-- #search -->
';
return true;
}
//END

What's wrong?
Greetings, Markus

rod barbee · 2018-05-24 22:26:16

There's this in the pangolin css:

#search {
display: none;}

which hides anything with the ID of "search"
This is needed so that the search form doesn't appear at the top of the page along with the search icon in the top pallet.

You should be able to override this with some inline css

add inline styling to your form:

<div id="search"class=“collapse clearfix” style="display: block;">
.................rest of your code........

rod barbee · 2018-05-24 22:36:49

Note that your code will put the search form above your current "footer" - which is actually the page__bottom__pallet area.

if you want it "in" the footer, you'll need to disable the page__pallet__bottom area and add your own footer html
http://ttg-tips-and-tricks.barbeephoto. … -pangolin/

disable that in your page template > Footer > Bottom Pallet/Copyright: off

Markus · 2018-05-25 23:24:49

rod barbee wrote:

Note that your code will put the search form above your current "footer" - which is actually the page__bottom__pallet area.

According to your comments http://pangolin.barbeephoto.com/hook-locations-page/ the ttg_footer_bottom hook or the ttg_footer_top hook would be the right place for my search and corresponds to the one on http://www.der-canonier.de.
I can't find the page__bottom__pallet area in the PHPlugins.

rod barbee wrote:

There's this in the pangolin css:
#search {
display: none;}
which hides anything with the ID of "search"

Is this a standard css file, which is always included and stored somewhere in the backlight directory?

rod barbee wrote:

You should be able to override this with some inline css
add inline styling to your form:
<div id="search" class=“collapse clearfix” style="display: block;">
.................rest of your code........

I probably still have a bug in the code, because it doesn't work. The search field is not displayed

rod barbee · 2018-05-26 01:16:20

there must be something wrong in your code; I was able to get it to work:
http://pangolin.barbeephoto.com/

feel free to post your code so we can take a look

rod barbee · 2018-05-26 01:19:19

Markus wrote:

rod barbee wrote:
There's this in the pangolin css:
#search {
display: none;}
which hides anything with the ID of "search"
Is this a standard css file, which is always included and stored somewhere in the backlight directory?

the Backlight css is "assembled" from different sources within backlight. There is no one place. You wouldn't want to change that particular css anyway. If it's taken out you'd end up with a search form at the top of your page under the search icon.

rod barbee · 2018-05-26 01:22:30

Markus wrote:

I can't find the page__bottom__pallet area in the PHPlugins.

There is no hook for that area. that's just ID for the div that contains the bottom pallet.
If you wanted to replace that with your own custom footer, you'd disable that area in the template then use phplugins to replace the footer.

Daniel Leu · 2018-05-26 01:27:15

Better would be to use your own CSS class. This way, you can target this search block and not affect any other design elements:

function ttg_footer_top( $style, $path ) {
echo '
<div id="search_footer" class="collapse clearfix">
<form action="/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Fotosuche" class="footsearch_footer" value=""/>
<button type="submit" class="footsearch_footer">Fotos suchen</button>
</form>
</div> <!-- #search -->
';
return true;
}
//END

I just added '_footer' to all the classes and IDs. Now just add your custom CSS code (yeah, copy search specific Backlight CSS code, add _footer and modify it).

For the action, I wouldn't use an absolute path. So when you move this code to your main site, it continuous to work without any issues.

Markus · 2018-05-26 18:56:23

Daniel Leu wrote:

Better would be to use your own CSS class. This way, you can target this search block and not affect any other design elements:
I just added '_footer' to all the classes and IDs. Now just add your custom CSS code (yeah, copy search specific Backlight CSS code, add _footer and modify it).

That was the right solution and I'm beginning to understand the connection. Now I just have to adjust my CSS a little, but on the iPad it's not really possible.

Thanks Daniel.

Markus · 2018-05-26 19:00:29

rod barbee wrote:

the Backlight css is "assembled" from different sources within backlight. There is no one place. You wouldn't want to change that particular css anyway. If it's taken out you'd end up with a search form at the top of your page under the search icon.

Thanks for the explanation. I'm beginning to understand it and that's important to me too

rod barbee · 2018-05-26 21:41:42

It can help to look at the compiled Backlight stylesheet: http://community.theturninggate.net/vie … hp?id=7380

Markus · 2018-05-27 00:38:54

Ah, cool, thanks Rod! I‘ll have a look

Markus · 2019-01-06 22:33:38

Daniel Leu wrote:

Better would be to use your own CSS class. This way, you can target this search block and not affect any other design elements:
function ttg_footer_top( $style, $path ) {
echo '
<div id="search_footer" class="collapse clearfix">
<form action="/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Fotosuche" class="footsearch_footer" value=""/>
<button type="submit" class="footsearch_footer">Fotos suchen</button>
</form>
</div> 
';
return true;
}
//END
I just added '_footer' to all the classes and IDs. Now just add your custom CSS code (yeah, copy search specific Backlight CSS code, add _footer and modify it).
For the action, I wouldn't use an absolute path. So when you move this code to your main site, it continuous to work without any issues.

Hi Daniel,

the mail has been a bit longer, but my "search-footer" still works perfectly.
Is there actually a way to exclude this area from individual pages? Especially from https://backlight.der-canonier.de/backlight/search/?

Because that makes the search field superfluous.

Thank you very much for your tip

Many Greetings
Markus

Edit: I had forgotten this: this concerns Backlight 2 for me now, it works the same way as before in Backlight 1.

Last edited by Markus (2019-01-06 22:49:44)

rod barbee · 2019-01-07 00:29:31

If you take a look at the body tag in the source code of any page, you'll see a bunch of classes being applied, like "album-template-id-3"
When you create pages and templates you have the opportunity to add an Identifier. It's required for pages.
You can use these identifiers to target specific pages or templates with css.

It doesn't look like the Search page has a specific page identifier however. But you can use a specific album template for the search page. I suggest creating (or cloning) an new album template to be used for the search page. Name it "search-template" or something.

To hide the footer search from on the Search page, you'd add this to your custom css:

.album-template-identifier-search-template #search_footer form {
    display:none;
}

For specific pages, you can do the same thing. Look at the page's source code and look for "pages-template-identifier-your-id"
and add that selector to the rule:

.album-template-identifier-search-template #search_footer form,  .pages-template-identifier-your-id #search_footer form{
    display:none;
}

You can use any of the classes you see in the body tag, but some of them may not be specific to that particular page. So for those, use the .pages-template-identifier-... class or the .slug-... class or the .pages-template-id-... class.

The Search page has no page identifier or slug so that's why I suggest creating a unique album template for the search page.

Markus · 2019-01-07 01:18:58

Thanks a lot Rod, I'll have to have another look at this in peace.

Where can I choose the template for the search? Under Language I can determine the content. Unfortunately something is hidden

rod barbee · 2019-01-07 01:33:09

Markus wrote:

Thanks a lot Rod, I'll have to have another look at this in peace.
Where can I choose the template for the search? Under Language I can determine the content. Unfortunately something is hidden

It's in the main Settings, under Publisher

Community @ The Turning Gate

#1 2018-05-24 21:42:54

Footer search in PHPlugins

#2 2018-05-24 22:26:16

Re: Footer search in PHPlugins

#3 2018-05-24 22:36:49

Re: Footer search in PHPlugins

#4 2018-05-25 23:24:49

Re: Footer search in PHPlugins

#5 2018-05-26 01:16:20

Re: Footer search in PHPlugins

#6 2018-05-26 01:19:19

Re: Footer search in PHPlugins

#7 2018-05-26 01:22:30

Re: Footer search in PHPlugins

#8 2018-05-26 01:27:15

Re: Footer search in PHPlugins

#9 2018-05-26 18:56:23

Re: Footer search in PHPlugins

#10 2018-05-26 19:00:29

Re: Footer search in PHPlugins

#11 2018-05-26 21:41:42

Re: Footer search in PHPlugins

#12 2018-05-27 00:38:54

Re: Footer search in PHPlugins

#13 2019-01-06 22:33:38

Re: Footer search in PHPlugins

#14 2019-01-07 00:29:31

Re: Footer search in PHPlugins

#15 2019-01-07 01:18:58

Re: Footer search in PHPlugins

#16 2019-01-07 01:33:09

Re: Footer search in PHPlugins

Board footer