How do I add a search button in Kookaburra

Backlight 4, 5 & 6 Support
#1

How do I add a search button?
and fb button Kookaburra

#2

You can add a Search item to your navigation menu. Link it to /backlight/search/
In Settings, under Search, set the template to be your Kookaburra album template.

Not sure about buttons since Kookaburra does not use Font Awesome.

#3

The search button is easy since @Matthew already included the necessary infrastructure code:

<a href="backlight/search">
   <svg width="18" height="18"><use xlink:href="#search" /></svg>
</a>

Add this at the location where you want to have it appear.

For Facebook, it’s a bit more complicated. This is the code to create a facebook button:

<a href="https://facebook.com/danielleuphotography">
    <svg width="18" height="18"><use xlink:href="#facebook" /></svg>
</a>

Then you have to define the facebook symbol. This can be done using a bit of phplugins code. So this goes into your custom phplugins file:

// Add custom svg symbols
function symbols_bottom() {
	echo <<<HTML
       <symbol 
		id="facebook" 
		fill="blue"
		stroke-width= "0"
		viewBox="0 0 23.101 23.101"
	>
		<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
                C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
                c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
                h2.516V4.458z"/>
	</symbol>
HTML; // do not indent this line
			return false;
} // END /**/

Instead of using SVG, you can use images as well. There are plenty examples out there on the internet. Hope this helps!

2 Likes
#4

At some point, I will get native support for at least some of this into Kookaburra. But also, trying to make Kookaburra extensible – so that folks can do things like the above – is also important. Glad to see this sort of stuff being both possible and utilized. :smile:

1 Like