Customizing your channel - OmniCon by Receipt Roller Inc

Four layers — theme, widgets, layout templates, and channel CSS — that together turn a stock OmniCon channel into something that looks like your own site. When to reach for which, and what not to do.

OmniCon gives you four ways to make a channel look like your site rather than a stock OmniCon channel. They stack, from "click a preset" to "write CSS." Most channels never need the bottom of the stack.

This guide doubles as a follow-along: each section has a Try it block with concrete steps and what you should see if everything's working. Open your channel dashboard in one tab and the public channel page in another, then walk through it top to bottom.

The four layers

Channel theme — colors, fonts, header layout, logo, footer text, social links.
Widgets — drop reusable blocks (recent posts, author card, tag cloud, custom HTML, image, social) into named slots on the public templates.
Layout template — picked per article and per page; controls the structural shape (Default, Wide, Landing, Minimal).
Channel assets — custom CSS and JavaScript that load on every public page in the channel. The escape hatch.

Roughly: theme handles "how does it look," widgets handle "what shows up around the content," layout templates handle "where does the content sit on the page," and channel assets are there for the rare moment when none of the above gets you exactly what you want.

1. Theme — colors, fonts, header, footer

From the dashboard left rail, click Theme (the palette icon, between Navigation and Widgets). The page has a row of named presets at the top — Default, Editorial, Magazine, Documentation, Minimal Blog. Click one and the rest of the form fills with that preset's values. From there, edit any individual field and save.

What the theme controls:

Palette — five colors (primary, accent, surface, text, muted). They drive links, button colors, the page background, body text color, and secondary chrome.
Fonts — heading and body, picked from a curated list of Google Fonts families. Loaded automatically; you don't need to add a <link> tag.
Header — three layouts (left, centered, hero), an optional logo URL, and a tagline.
Footer — free text, copyright line, and social links (Bootstrap Icons names like twitter-x, linkedin, github).

Try it.

Click Editorial in the preset row, then Save theme.
Open the public channel page in a new tab. The headings should now be in Playfair Display, the body in Source Serif 4, and the page background a soft cream.
Back in the dashboard, change the Primary color to something obvious (e.g. green), save, and refresh the public page. Links and the primary button should pick up the new color.
Set Header layout to Centered, add a tagline, save. The public page should re-render with the channel title centered above the nav, with the tagline beneath it.
Add a Logo URL (any image), save, refresh. Logo should appear above the title in centered/hero layout, or to the left of it in left layout.
Add a footer copyright line and 2 social links (icon = github + URL, icon = linkedin + URL). Save, refresh. The public page should now show a footer with the icons and the copyright.

The theme is the right answer for at least 80% of "make this look like ours" requests. Reach for it first.

2. Widgets — what shows up around your content

From the dashboard left rail, click Widgets (the grid icon). Each card is a named slot:

Sidebar — top — above the built-in sidebar cards on the Default and Wide templates.
Sidebar — bottom — below the built-in sidebar cards on the same templates.
Footer extra — above the theme footer on every template.

Inside each slot, click Add widget to drop in one of:

Recent posts — list of the channel's most recent articles. Optional folder filter.
Author card — highlight one author or all of them.
Tag cloud — top tags sized roughly proportional to frequency.
Custom HTML — anything you can paste, including embeds, newsletter signup forms, and ad code.
Image — image with optional link and caption.
Social links — re-renders the social links you set up in Theme, but in the sidebar instead of the footer.

Widgets read from the same data as the rest of the public page (your articles, authors, tags, theme social links), so they don't need separate configuration — Recent Posts just works once you have articles.

Try it.

In Sidebar — top, click Add widget → Recent posts. Set count = 5. Save.
Open the public channel page (an article that uses the Default template, or the channel home if it's a listing). The sidebar should now have a "Recent posts" block at the very top, above the channel-info card.
Back in the editor, in the same Sidebar — top slot, click Add widget → Tag cloud. Save and refresh — both widgets should render in order.
Click the down-arrow on the first widget. Save, refresh — the order on the public page should match.
In Sidebar — bottom, add a Custom HTML widget with something obvious like <div>Hello from a widget</div>. Save, refresh. The text should appear below the existing sidebar cards.
In Footer extra, add an Image widget with a URL, link, and caption. Save, refresh. The image should appear inside the footer, above the theme footer's social row.
Remove the Custom HTML widget (trash icon). Save, refresh. It should be gone.

3. Layout template — where the content sits

Each article and each page can pick a layout template from a dropdown in its admin form. Four choices:

Default — full chrome: sidebar, byline, comments, related articles. The right pick for blog posts.
Wide — full-width article, no sidebar. Good for long-form posts where the writing should breathe.
Landing — hero image with overlay and centered title; uses page blocks if present. Good for marketing pages.
Minimal — title and body only, max-width 720px. Good for documentation, policy pages, "About" — anywhere the content speaks for itself.

Articles default to Default, pages default to Minimal. You almost never need to change articles; you sometimes need to flip a page from Minimal to Landing when it's the channel's home.

Try it.

Open any article in the editor. The Layout dropdown sits just below Main Image.
Switch it to Wide and save. View the public article — the sidebar should be gone, the body fills a wider column.
Switch it to Landing, save, view. The article's main image should now be a hero with the title centered over it.
Switch it back to Default, save, view. The sidebar (and your widgets) should return.
Open a static page (one with Is article off). Its layout dropdown sits in the same spot. Switch from Minimal to Landing and confirm it picks up the hero look.

4. Channel assets — custom CSS and JavaScript

From the dashboard left rail, click Assets. Anything you put in head assets loads in <head>; anything in body end loads just before </body>. CSS, JavaScript, and full HTML snippets are all accepted.

This is the right tool when:

You're adding analytics, conversion tracking, or any third-party script (Google Analytics goes in body-end).
You need a CSS rule the theme doesn't expose — for example, hiding a specific element on a specific page.
You're embedding a third-party widget that needs its own snippet (chat, support widgets, scheduling).

It is not the right tool for:

Changing the brand color. Use Theme. If you write CSS that overrides the theme's primary color, you'll fight every theme update going forward.
Changing the header font. Use Theme. Same reason.
Adding a "recent posts" list to the sidebar. Use Widgets. Custom HTML can't pull live data from your channel.
Swapping the page layout. Use the Layout dropdown on the article. Layouts pick which Razor template renders; CSS can't move content between templates.

Rule of thumb: if there's a control in the dashboard that does what you want, use it. Custom CSS should be the last 5%, not the first.

Try it.

In Assets → head, add a CSS asset with body .alert { border: 2px dashed var(--brand-accent); }. Save.
Visit any public page that renders a Bootstrap alert (e.g. after submitting a form with a TempData success message). The alerts should pick up the dashed border in your accent color — and if you change the accent in Theme later, the dash color follows automatically.
Remove the asset when you're done so you're not left fighting future theme tweaks.

Theme variables (for the rare CSS you do write)

The theme exposes its palette and fonts as CSS custom properties on :root. When you do write CSS in channel assets, prefer these over hard-coded values so your overrides keep working when the theme changes:

--brand-primary — links, primary buttons
--brand-accent — hover states, secondary highlights
--brand-surface — page background
--brand-text — body text
--brand-muted — secondary text, borders
--brand-font-heading — heading font stack
--brand-font-body — body font stack

So instead of:

.my-callout { background: #1a73e8; color: white; }

Write:

.my-callout { background: var(--brand-primary); color: var(--brand-surface); }

Now when you switch the theme preset, your callout follows.

End-to-end walkthrough

Want to see the whole stack land in one go? Pick a test channel and do this in order. Each step builds on the last, and each one has a visible payoff on the public page.

Theme: Magazine preset. Theme → click Magazine → Save. Public page picks up high-contrast colors and Montserrat headings.
Theme: hero header + tagline. Header layout = Hero, tagline = "A test of the customization stack," save. Public page now has a big centered title block.
Widgets: recent posts in sidebar-top. Widgets → Sidebar — top → Add Recent posts (count 5) → Save. Open any Default-layout article — Recent posts shows above the channel info card.
Widgets: tag cloud + author card stacked. Same slot, add Tag cloud and Author card. Reorder so Recent posts stays first. Refresh — three widgets stacked at the top of the sidebar.
Widgets: custom HTML in footer-extra. Footer extra → Add Custom HTML with a paragraph and a link. Refresh — appears in the footer above the social row.
Layout: flip a page to Landing. Pick a static page, set Layout = Landing, ensure it has a Main Image. Refresh — page renders as a hero.
Custom CSS: theme variable accent. Assets → head, add .widget-title { color: var(--brand-accent); }. Refresh — your widget titles now pick up the accent color, and you can verify they change automatically when you switch theme presets.

If every step looks right, the customization stack is healthy end-to-end.

What to reach for — quick reference

I want to…	Use
Change the brand color	Theme
Pick a serif heading font	Theme
Add a logo	Theme
Add social-link icons in the footer	Theme
Show "recent posts" in the sidebar	Widgets
Embed a newsletter signup in the footer	Widgets (Custom HTML)
Make a long article full-width	Layout = Wide on that article
Make a marketing page hero-style	Layout = Landing on that page
Add Google Analytics	Channel Assets (body end)
Hide one specific element on one page	Channel Assets (CSS, scoped)
Match the rest of my brand identity	Theme + custom domain

If the dashboard doesn't have a control for what you want and CSS doesn't feel right either, that's worth a feature request — those gaps are how the customization layers grow.