Home 9 Reference 9 Styling Test Article

Styling Test Article

This article demonstrates the custom CSS styling options available for LiteWork help content. It includes floating shortcut boxes, callout boxes, and other design elements.

Floating Shortcut Box

⌨ī¸ Quick Keys

Save Cmd+S
New Cmd+N
Add Item Cmd+I
Settings Cmd+,

This paragraph demonstrates text flowing around a floating shortcut box. The box should appear on the right side of the content area, with this text wrapping around it naturally. This creates a visually appealing layout where keyboard shortcuts are easily accessible without interrupting the main content flow.

When there’s enough content, the text continues to wrap around the floating element. This second paragraph should also flow around the box if it’s still visible in the viewport. The floating box provides quick reference information while keeping the main narrative intact.

Once the text extends below the floating element, it returns to full width. This creates a natural reading experience where supplementary information (like shortcuts) is presented alongside the relevant content without breaking the flow.

Callout Boxes

Callout boxes help highlight important information. There are three types:

💡 Tip: This is a tip callout. Use it for helpful hints and best practices that make the user’s experience better. Tips are encouraging and positive.

⚠ī¸ Warning: This is a warning callout. Use it for important cautions that could prevent data loss or unexpected behavior. Warnings should be taken seriously but aren’t critical errors.

ℹī¸ Note: This is a note callout. Use it for additional context or information that’s useful but not essential. Notes provide background information or clarify details.

Combined Example

🔄 Sync Shortcuts

Post to Xero Cmd+Shift+X
Update in Xero Cmd+U
Sync Dashboard Cmd+Shift+S

When working with Xero integration, you’ll frequently use the sync shortcuts shown in the box. These keyboard commands let you quickly push documents to Xero without navigating through menus.

💡 Tip: Before posting an invoice to Xero, always double-check the contact and line item details. Once posted, some fields become read-only in Xero.

The sync process is designed to be seamless. LiteWork automatically detects changes and shows you the sync status for each document. You can sync individual documents or use bulk operations for efficiency.

Standard HTML Tables

Standard HTML tables render with the theme’s default styling:

Feature Free Plan Pro Plan
Invoices per month 10 Unlimited
Xero Integration — ✓
Auto-Sync — ✓
Priority Support — ✓

Code Blocks

Inline code like Cmd+S uses the standard code styling. For longer code examples:

{
  "invoice_number": "INV-001",
  "contact": "Acme Corp",
  "total": 1500.00,
  "status": "draft"
}

ℹī¸ Note: This is a test article for verifying CSS styles. It should be deleted after testing is complete.

Related Articles