Boxshot 3D Packaging Mockup Software
Download Download Download
Download for Windows Download for Mac Download for Mac Dropdown arrow

Customizing Snapshot Buttons

By default Koru places snapshot buttons to the top left corner one under another and make them gray with rounded corners. This looks fine, but you may want to change their appearance to better match the scene or your branding colors. This can be easily done with export template and easily re-used later. This tutorial will show you how.

Creating a Template

When Koru exports a scene, it wraps it up in some HTML called “template”. Template decides whether the scene will be fullscreen or not, template customizes snapshot buttons and can do some other scene control. Finally, template may simply add your logotype to the caption of the page. Any time you need a custom HTML output in Koru, you make a template.

You can read more about templates here, but best of all you don’t really need to start from scratch. Koru comes with a couple of pre-defined templates that you can use to kick-start your own. Let’s clone one of the existing ones now.

Start Koru and click its File menu. In the drop-down list select Open Templates Library item. You will see a folder on your disk where Koru stores its templates. Find a folder called snapshot-buttons and make a clone of it. On Mac you need to right-click it and select Duplicate, on Windows you can simply copy and paste it. Rename the new folder to my-snapshot-buttons and enter that folder.

You will see three files inside:

Open _readme.txt with your text editor and modify its first line, so it contains just two words “My Snapshot Buttons”, then replace the rest of the file with a brief description of what this template is for. The end result should look like this:

My Snapshot Buttons
This template changes the default look of the snapshot buttons.

Save the file, then switch back to Koru and make a simple scene with some snapshots. Then try to export it to disk using the new template My Snapshot Buttons - you will see the buttons look different.

What happened is that the snapshot-buttons template folder we clone already has custom CSS styles for snapshot buttons. You cloned it, changed its description and exported the scene using that new template and Koru applied that style to the buttons.

So all you need is to make some modifications to the style to get the button looks the way you want. You will need some CSS knowledge for further reading. Find a good tutorial if you never used CSS styles in HTML before. Otherwise, read on.

Customizing CSS

Open the _template.html file in my-snapshot-buttons folder with your favorite HTML editor and locate the <style> block at the very top of it. These rules overrides the default look and feel of Koru elements and that’s what you need to change to make the buttons look different.

For buttons (.koru-button) you may also want to define custom styles for hover and pressed states:

Let’s have a closer look at the first block of our custom CSS:

.koru-ul {
	position: absolute;
	bottom: 8px;
	left: 8px;
	margin: 0px;
	padding: 5px 5px;
	background-color: rgba(0, 0, 0, 0.25);
	list-style: none;
	display: inline-block;
	z-index: 2;
}

The first three parameters (position, bottom and left) set the buttons block to the left bottom corner of the preview area. The next two (margin and padding) make sure it is right at the corner with 5 pixels padding. The next one (background-color) sets a semi-transparent black background for the buttons block. Then comes “list-style” that hides list bullets that browsers add to list items by default. Finally the “z-index” line makes sure that the buttons appear above the graphics and so always visible.

Using the absolute positioning is probably the best idea for the buttons block, as it easily lets you place the buttons anywhere in the scene. Internally, Koru adds the buttons block right inside the .koru-viewport <div>, which controls the preview area, so the buttons must be somewhere inside the preview. Of course you can move them away with CSS, but if you want them outside of the preview area, you’d probably better create them yourself instead.

Then comes the .koru-li rule:

.koru-li {
	margin: 2px 5px;
	display: inline-block;
}

It is quite simple and controls the area around the button. We set a small margin and tell browser to display it as “inline-block” - like an image which works best for button-like elements.

The most interesting part is the button itself:

.koru-button {
	padding: 5px 10px;
	background-color: rgba(255, 85, 255, 0.9);
	border: 2px solid white;
	border-radius: 0;
	color: white;
	font-weight: bold;
	cursor: pointer;
	outline: 0;
}

Koru creates buttons using <button> tag, so you may style them up as any other button. The code above sets a little padding around the text, configures background color and border, sets the text color and makes the font bold. Finally it sets the cursor to be a pointing finger and removes the outline that browser may add.

Google for “CSS button generator” and you will find a lot of online tools that help you make stylesheets for buttons with instant preview. Then simply copy the stylesheets lines to .koru-button rule and optionally to its “:hover” and “:active” states to completely style the button up.

That’s All!

You can change the buttons a lot with just CSS rules, but if that is not enough you may tell Koru that you don’t need the default buttons at all and create them yourself - you’re the boss :)