TTG Tips and Tricks

You can make the Gallery Help button in your Backlight Client Response albums “stick” to the top of the gallery by adding it to the top-pallet widget container. This way, when your client scrolls down the page the Gallery Help button will always be available.
First of all, be sure to enable the Gallery Help in the Client Response add-on of your album template.

Moving the Gallery Help button will require the use of phplugins and custom css. So if you’ve not used these before, head on over to the TTG docs to learn about activating and using phplugins and custom css.

We’re going to use jQuery to insert the button code just before the Client Response button, the one that, when clicked, expands to show the filter and submit button. Here’s the phplugins function that contains the necessary script:

function scripts() {

echo '

<script>

$(\'li#widget-container > ul\').prepend(\'<li><button style="float:left;" class="crg-help-widget" data-fancybox="" data-src="#crg-help">Gallery Help</button></li>\');

</script>

';

I’ve added the class “crg-help-widget” just in case you want to target the button for styling.
To use this, open your phplugins file in a plain text editor and paste it in to the user area (the area that starts with // SET USER FUNCTIONS BELOW).
If you’re already using the scripts hook in your phplugins file, then just add the script itself, including the opening and closing <script> tags.

The script will add a Gallery Help button to the top-pallet of page. But it doesn’t remove the default button that appears above the gallery grid. So we’ll add some custom css to hide that. Just drop this into your custom css file:

.the__gallery button.crg-help {
	display:none;
}

Addendum:

Want to change the font in that Gallery Help button from the built in sans-serif? You can do that in custom css in two ways: changing the font for all buttons, or targeting the Gallery Help button specifically. You can use a font of your choosing or have the buttons use the base font set in Typography. Below, I’m changing it to the bese font. To use a different font just swap “inherit” for your font.

To change all buttons:

button {
	font-family: inherit;
}

To change just the Gallery Help button:

button.crg-help-widget {
	font-family: inherit;
}

Remember, unless you’ve added the font to your web page, your viewers will only see your font if they already have it on their computer. This works great for standard fonts, but if you’re using a special or purchased font, be sure to add it via your custom css file. Google fonts can be added in Backlight to become your base font. Here’s how to add fonts.