Embed API & Customization
Liyamu uses a state-of-the-art Native HTML Injection API. We do not use clunky iframes. Your embedded stories automatically inherit your website's responsiveness, flow naturally with your DOM, and can be completely overhauled using standard CSS.
How it Works
The Custom Tag
You place a <liyamu> tag on your website. Our lightweight embed-widget.js script finds this tag, connects directly to our database, and injects clean, semantic HTML directly into your page.
Because the content lives natively in your website, you can style it by simply passing your own CSS file. You can pass absolute links like https://your-site.com/theme.css or relative paths like /css/custom.css safely.
CSS Class Reference
We prefix our classes with liyamu- to ensure they never conflict with your website's existing styles. Target these classes in your custom CSS file.
| Class Name | Target Element |
|---|---|
.liyamu-embed-container | The main outer box. Use this to change the background, outer border, padding, and overall font-family. |
.liyamu-blog-item | The wrapper for a single story. Useful for hover effects, background colors, and borders between multiple stories. |
.liyamu-author-pill | The flexbox containing the author's circular avatar and name. |
.liyamu-blog-title | The main heading of the story. |
.liyamu-blog-excerpt | The summary text paragraph. |
.liyamu-blog-meta | The date and read-time text elements. |
.liyamu-footer | The bottom flex row containing the Liyamu logo and read time. |
Full Restyle Templates
Below are examples showing how radically you can change the widget. Copy the CSS into your own stylesheet and link it in the embed generator. Note: Always use !important to ensure your styles override the defaults.
Template 1: The Dark Terminal
A retro hacker vibe. Changes the font to monospace, forces a pure black background, applies neon green borders, and squares off the avatar image.
.liyamu-embed-container {
background: #000000 !important;
border: 2px solid #00ff00 !important;
border-radius: 0px !important;
font-family: 'Roboto Mono', monospace !important;
color: #ffffff !important;
}
.liyamu-blog-item {
background: #000000 !important;
border-bottom: 1px dashed #00ff00 !important;
}
.liyamu-blog-title {
color: #00ff00 !important;
text-transform: uppercase !important;
font-size: 1.5rem !important;
}
.liyamu-blog-excerpt { color: #a1a1aa !important; }
.liyamu-blog-meta, .liyamu-author-pill, .liyamu-logo { color: #00ff00 !important; }
.liyamu-author-pill img { border-radius: 0px !important; border: 1px solid #00ff00 !important; }
.liyamu-footer { border-top: 1px dashed #00ff00 !important; }Template 2: Horizontal Grid Layout
Display multiple posts in a clean, side-by-side row. This example uses Flexbox to create a responsive grid, removes the outer border for a seamless look, and adds a modern card design.
/* --- Turn container into a flexbox row --- */
.liyamu-embed-container {
display: flex !important;
flex-direction: row !important;
gap: 24px !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
@media (max-width: 768px) {
.liyamu-embed-container { flex-direction: column !important; }
}
/* --- Style each blog item as a card --- */
.liyamu-blog-item {
flex: 1 !important; /* Makes cards equal width */
border: 1px solid #e4e4e7 !important;
background: #ffffff !important;
border-radius: 12px !important;
padding: 24px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
.liyamu-blog-title { font-size: 1.4rem !important; }
.liyamu-blog-excerpt { font-size: 0.95rem !important; }
.liyamu-footer { margin-top: auto !important; }Template 3: Brutalist Bold
Loud, bold, and heavily contrasted. This layout uses heavy borders, sharp drop shadows, hides user avatars, and adds a bright yellow hover effect for maximum impact.
.liyamu-embed-container {
background: #ffffff !important;
border: 4px solid #000000 !important;
border-radius: 0px !important;
padding: 0 !important;
box-shadow: 8px 8px 0 #000000 !important;
color: #000000 !important;
}
.liyamu-blog-item {
background: #ffffff !important;
border-bottom: 4px solid #000000 !important;
padding: 32px !important;
transition: background 0.2s;
}
.liyamu-blog-item:hover { background: #fef08a !important; }
.liyamu-blog-title {
font-size: 2.5rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
.liyamu-blog-meta, .liyamu-author-pill, .liyamu-logo {
font-weight: 700 !important;
text-transform: uppercase !important;
}
.liyamu-author-pill img { display: none !important; }
.liyamu-footer { border-top: 4px solid #000000 !important; }