Design Library Card Templates

Use Member Manager > Library Cards > Card Templates to create and maintain reusable card designs. This page is only for template design. Generating cards from saved Member Lists is covered in Generate ID Cards.

What You Can Design

• Front-only or front-and-back card layouts.
• Member details such as name, Member ID, photo, expiry date, QR code, or barcode.
• Static text, member data fields, shapes, and static images.
• Library or organization logos, signatures, seals, and card backgrounds.
• Physical card size, corner shape, and print safety margin.

Card Templates

Templates are reusable card designs. A good template saves time because staff can generate many cards without redesigning each card.

Common template types include:

• Horizontal ID card.
• Vertical ID card.
• Badge or visitor card.
• Temporary card.
• Membership card.
• Barcode-only labels.

Libcodesk provides seven protected starter templates: Horizontal ID Card, Vertical ID Card, Badge / Visitor Card, Temporary Card, Membership Card, Barcode Only 5.33 x 1.58 CM, and Barcode Only 4.00 x 2.00 CM. The Type column shows these protected starters as Predefined and shows library-created templates as User Defined. You can copy and modify starter templates, but you cannot directly edit, delete, or export them, so those actions are not shown for predefined templates. User-defined templates can be edited, deleted, exported, or copied.

The ID, badge, temporary, and membership starters include organization logo, member photo, member name, labeled member type, labeled plan name, labeled expiry date, organization name, organization address placeholders, and a front-side barcode. Starter barcodes reserve their space for the bars, while the readable Member ID is placed as a separate text/data field above the barcode area. QR codes are kept on the back side for two-sided templates. Barcode-only templates keep the barcode clean and use separate readable text when manual lookup is needed.

Use Copy & Modify when you want to start from an existing design without changing the original. The designer opens with the selected template already loaded and saves your changes as a user-defined copy. Use Add New Template when you want a blank user-defined template.

Use Set Default on the template that staff should use most often. The selected default template shows a filled star and opens automatically in Library Cards, so staff can choose a member list and generate cards without reselecting the template each time.

The Card Templates page shows protected starter templates, user-defined templates, default selection, import, copy, and live preview in one place.

Templates are stored as portable template data. This keeps the same design usable in Libcodesk WebApp and the Standalone app, and it prepares the template library for future sharing and community template downloads.

Template changes made in either Libcodesk WebApp or the Standalone app are saved through the Library Cards template system. The same front-and-back designer controls, preview behavior, copy-and-modify workflow, and default-template rules are available on both surfaces.

Use Import Template to add a shared .libcard file to the template list. Use Export Template on a user-defined template when you want a backup copy or want to move a template to another Libcodesk installation. Export opens a normal save-file dialog with the template name already filled in and the .libcard extension selected, so staff choose the final file location instead of selecting a folder first. The .libcard file includes the template settings, card dimensions, front/back object definitions, and supported static image resources needed for portability. Protected default templates can be copied, but they are not exported directly.

For safety, Libcodesk validates imported .libcard files before saving them. Only supported template versions, known card elements, and PNG, JPEG, or WEBP image resources are accepted. Each static image resource must be 200 KB or smaller, and very large template packages are rejected so a shared template cannot slow down or destabilize the app. If a shared template is missing a static image resource, Libcodesk still imports the template and shows an image placeholder so staff can select a replacement image.

Card Designer

The Card Designer opens in a full-screen workspace so there is enough room for settings, the canvas, tools, and inspector controls. The top header contains Settings, Design, and Save so the tool panel, canvas, and inspector can use more vertical space. You can arrange static text, member data fields, member photos, organization logos, shapes, QR codes, barcodes, and static images on the card.

The designer has two tabs:

• Settings controls the physical card size and corner style. Choose a preset such as CR80, school card, visitor card, portrait card, or enter a custom width and height in cm, mm, or inch.
• Design controls the visual card layout for the front and back side.

Template settings define the reusable card itself: basic details, card size, corner shape, front/back layout, and print safety margin.

Card size and output size are different. The designer controls the physical size of the card itself. Printable batch output is generated later from the Generate Cards workflow as a PDF preview for download or printing.

In the Design tab, the Front/Back selector and zoom controls sit together above the canvas. Use zoom to inspect small details or zoom out to see the full card. The canvas shows vertical and horizontal scrolling when the card or zoom level is larger than the visible workspace, so wide or zoomed designs remain reachable without resizing the app window. Select an element and move it with the mouse, or use the arrow keys for precise keyboard movement. Hold Shift while pressing an arrow key to move the selected element faster.

Use Grid, Rulers, Safety, and Snap Grid when you need repeatable alignment. The grid, rulers, safe-margin line, and bleed-margin line are visual design aids and do not print on the card. Snap Grid uses physical millimeter steps, such as 0.5 mm, 1 mm, 2 mm, or 5 mm, so mouse moves, inspector edits, and arrow-key movement stay aligned to a predictable real-world spacing. Turn snapping Off when you need free positioning.

The design workspace keeps tools, front/back canvas, zoom, and the Elements list visible for faster card editing.

Smart alignment guides appear while moving an element with the mouse, arrow keys, or X/Y values in the inspector. Vertical guides help align left, center, and right edges. Horizontal guides help align top, center, and bottom edges. For multiline text blocks, use the top and bottom boundaries to align the full text area, not only the first line.

Elements And Inspector

Use Text for fixed wording that should print the same on every card. Use Data Field when the value should come from member records, such as Member ID, name, member type, expiry date, or custom fields configured in Member Types. Select the Data Field element and choose the field in the inspector.

Barcode and QR code elements also use a selectable data source, with Member ID selected by default. For the cleanest predefined layouts, keep the barcode area for the bars and add readable values as separate Text or Data Field elements. Text and Data Field elements support single-line or multiline rendering, font family, font size, normal/bold/italic style, left/center/right/justify alignment, padding, color, background color, opacity, rotation, position, and size controls.

The inspector has Elements and Properties views. Use Elements to select the card canvas or any element in the layer list and highlight it on the canvas. Use the small Properties action beside an element, or select an element directly on the canvas, when you want to edit that item. The top of the inspector always shows the selected object name and type, such as Member Name (Data Field) or Barcode, so staff can confirm exactly what they are editing.

Select the blank card canvas and open Properties when you need to change the card background color. When an element is selected, the inspector shows only element-level controls, such as position, size, data source, font, color, background color, border, opacity, and layer controls.

Static Text uses a multiline editor in the inspector. Enter each line exactly as it should appear on the card. Use the multiline option for Text and Data Field elements when longer wording should wrap inside the element box instead of being forced into one line. Padding uses the order Top, Right, Bottom, Left, such as 5,10,5,10, so text can sit neatly inside labels, badges, and bordered areas.

Borders are controlled by Border Width and Border Color. A border width of 0 means no border. Any value above 0 draws the border, so there is no separate border on/off switch to manage.

Member photo and organization logo placeholders use a square 1:1 area so uploaded profile images and logos stay predictable in the design.

Template Settings

Template Settings control only the reusable card definition:

• Basic: template name and optional description.
• Layout: front-only or front-and-back card design.
• Card Size: preset size, custom width, custom height, and unit such as px, mm, cm, or inch.
• Shape: square corners or rounded corners with a corner radius.
• Print Safety: safe margin so important text, photos, QR codes, and barcodes stay away from the card edge.

Generation settings control batch output behavior, such as selected lists and printable PDF generation. Keep these choices in the Generate Cards workflow so one template can be reused for different print runs.

Image Assets And Backgrounds

You can upload approved image files for:

• Card backgrounds.
• Library or institution logo.
• Signatures.
• Stamps or seals.
• Decorative images.

Supported image formats are PNG, JPG, JPEG, and WEBP. If an image is rejected, check that it is a real image file, not too large, and not saved in an unsupported format.

Use Static Image for a fixed design image such as a seal or signature. If the selected static image needs to be replaced, select it on the canvas and use the image change control in the inspector. Use Organization Logo when the design should use the library or organization logo dynamically.

The Organization Logo element uses the currently configured organization logo in the designer, live preview, print preview, and generated output. If no logo is configured, Libcodesk shows a placeholder so staff can still finish the design and add the logo later.

Barcode And QR Code Safety

Barcode and QR code previews render real scannable output from the selected data source, so librarians can check sizing and readability before generating cards. The Ideal, Min, and Max sample values are saved after fetching member data and reused until member data is fetched again.

Barcodes use high-contrast Code 128 output with quiet-zone spacing because it is widely supported by standard library and retail scanners. Keep barcode elements wide enough for the longest value that may be printed, not only the shorter values you see in one sample. Libcodesk shows a width warning when the barcode area is less than 14 px for each character in the barcode value. For example, if the longest Member ID is 15 characters, plan for about 15 x 14 px = 210 px of barcode width. If any Member ID or barcode data source is longer than that, calculate the width from the longest value and make the barcode area wider.

For the safest result, keep visible Member IDs and barcode values short and consistent. A Member ID format under 15 characters is easier to print and scan reliably than long text such as email addresses, names, or UUID-style values. Smaller values will remain safe when the barcode area is large enough for the longest value in the same data source.

The designer keeps barcode width scanner-safe and warns if barcode height drops below the required space. Use 25 px minimum height for barcode bars, and place readable values as separate text when the template needs them. Size and position fields can be shown in px, mm, cm, or inch; when the unit changes, existing positions, dimensions, padding, and border widths are converted so the physical design stays the same. The designer warns when the barcode width is below 14 px x total characters in the barcode data, or when barcode height is too low. Increase the barcode width or height, use a shorter field such as Member ID, or switch long values to QR code. Always generate a sample output and scan a printed sample card before printing a large batch.

If you ignore a barcode-size warning, the barcode may still look normal on screen but fail on real scanners after printing. Narrow barcodes can lose clean bar spacing, become blurred by printer scaling, or become too dense for lower-cost scanners. That can slow circulation work because staff may need to type Member IDs manually.

Use a small test output before large batches. Switch between Front, Back, Ideal, Min, and Max, then generate a small PDF, PNG, or printed test from the Generate Cards workflow. This lets staff check normal data, shortest values, and longest values before printing a full batch.

Use Page Layout before printing when paper, roll, rows, columns, gaps, margins, or start position need to change. Use Printer Settings in the Standalone app only when a physical printer needs repeatable correction such as duplex direction, offset, scale, rotation, DPI, density, or cutting guides. For the best results, use the Standalone app when generating ID cards.

Use the magnified preview when you need to inspect barcode text, spacing, image placement, and longer sample values before printing.

The barcode warning appears directly on the card preview when the selected barcode area is too small for reliable scanning.

Helpful Design Tips

• Keep the member photo large enough for desk staff to recognize the person quickly.
• Keep Member ID, barcode, or QR code clear and scan-safe.
• Leave space near the edge so printing and trimming do not cut important text.
• Use the same logo, colors, and wording across all cards for a professional look.
• Test one printed card before generating a large batch.

Do And Don't

Do:

• Use templates for repeated card batches.
• Check print preview before a large export.
• Use clear, high-quality logos and member photos.
• Keep QR and barcode areas clean and high contrast.
• Generate a small test batch before printing hundreds of cards.

Don't:

• Upload unsupported image types.
• Place important text too close to the card edge.
• Make barcodes or QR codes too small.
• Use very busy backgrounds behind important member details.
• Change the default template during a live card preparation workflow unless staff are expecting the change.

Troubleshooting

If A Barcode Does Not Scan

1. Check whether the scanner is working. Try scanning a few known-good printed barcodes, such as ISBN barcodes printed by publishers on books. If those do not scan either, test with another scanner or use the CodeAchi barcode scanner app from a mobile device when available.
2. Check the Library Cards preview in Maximum Length Data mode. If there is a barcode warning, increase the barcode width, shorten the Member ID format, or choose a shorter barcode data source. Use about 14 px per character as a planning rule for print-safe width, and size the barcode for the longest value stored in the database.
3. Check print size and print quality. Make sure the printer is using the same paper size, orientation, margins, and scale expected by Libcodesk. Printer-driver scaling can resize the card and make the barcode too dense. If in doubt, test another printer or save the output as PDF and compare the PDF size before printing.
4. Test Min, Ideal, and Max sample data. If none of them scan, create a support ticket and attach the saved PDF output from Libcodesk plus a scan or photo of the printed sample card. This helps support compare the digital barcode with the printed result.

Problem	What To Try
Image upload is rejected	Use PNG, JPG, JPEG, or WEBP and check that the file is a valid image.
QR or barcode is not scanning	Print a sample, scan both QR and barcode, then follow the barcode troubleshooting steps above.
Text is cut while printing	Use the preview and keep important text inside the safe area.
Card design feels too crowded	Increase card size where possible, remove non-essential text, or use the back side for instructions and secondary details.

FAQs

Can I design both the front and back of a card?

Yes. Use the front and back design areas when the library wants rules, instructions, branding, or contact details on the backside.

Which image formats can I upload?

Use PNG, JPG, JPEG, or WEBP. Other formats are not accepted for card assets.

Should I print a test card first?

Yes. A single printed sample helps confirm colors, margins, photo cropping, and barcode or QR scan quality before a large print run.