Ask Daniel's CODEX

Tahoe Call-to-Action fixes

[1] DANIEL:

I have a weird observation in a dnn skin. It is the Mandeeps Tahoe 2.1.2 and the call-to-action with borders style. (attached) When I use the code, the left and right borders are not visible until I try to screen capture them, or when I edit the module code - but as soon as I save the code, then the left and right borders are no longer visible as the top and bottom of are. The screen capture attached shows subtle border. Can you see a way to improve the css to remedy this?

[2] GROK:

The issue you're describing sounds like a classic CSS rendering subtlety in DNN skins, especially with light-colored borders on a near-matching background. Based on the provided CSS (from call-to-action.css) and the screenshot context, here's what's likely happening and how to fix it:

Root Cause

The .call-to-action.with-borders class defines:

- border-top and border-bottom: 1px solid #DFDFDF (RGB: 223, 223, 223—a medium-light gray). - border-left and border-right: 1px solid #ECECEC (RGB: 236, 236, 236—a very light gray).

The default background (.call-to-action.call-to-action-default) is #dee1e2 (RGB: 222, 225, 226), which is extremely close in lightness to #ECECEC (delta of ~10-14 in RGB channels). This causes the left/right borders to blend almost invisibly in most browsers/renderers due to anti-aliasing, subpixel rendering, or even slight color profile differences.
Top/bottom borders stand out more because #DFDFDF has better contrast against the background.
The "weird observation" (visible in edit mode/screen capture but not after save) is probably due to:

- Browser dev tools or DNN's edit overlay forcing a repaint/recalculation that temporarily makes subpixel borders "snap" into view. - Screen capture tools often apply slight sharpening or ignore anti-aliasing, revealing the borders. - Post-save, normal rendering + possible DNN caching/JS interference hides them again.

The subtle box-shadow (0.04 opacity) adds a faint drop but doesn't help the side borders much.

This design choice (differing border colors) might be intentional for a subtle "inset" effect in Tahoe's theme, but it fails against the #dee1e2 background.

Recommended Fix

Update the .with-borders class to unify all border colors to #DFDFDF (matching top/bottom) for consistent visibility. This keeps the aesthetic light but ensures reliability across browsers/devices. If you want more emphasis, bump to 2px or a slightly darker shade like #d0d0d0.

Add/override this in your skin's custom CSS (e.g., custom.css or directly in the skin's stylesheet—test in DNN's file manager or via a pane/module). Place it after the original .call-to-action.css rules to ensure it overrides.

``css .call-to-action.with-borders { border-top: 1px solid #DFDFDF !important; border-bottom: 1px solid #DFDFDF !important; border-left: 1px solid #DFDFDF !important; / Changed from #ECECEC / border-right: 1px solid #DFDFDF !important; / Changed from #ECECEC / box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04); } ``

Optional Enhancements

For more visibility (if subtle is still too faint): Use #d0d0d0 (RGB: 208, 208, 208) for all borders, or increase thickness:

``css .call-to-action.with-borders { border: 1px solid #d0d0d0 !important; / Shorthand for all sides / box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06); / Slightly stronger shadow / } ``

If using the LESS variables (from call-to-action.less.txt): Override @BSBorderColor globally in your LESS compilation to #DFDFDF (or darker). For example:

``less @BSBorderColor: #DFDFDF; ` Then recompile the LESS to CSS. This would apply to .th_bdr` and related classes too.

Tahoe-specific tweaks: If this is in a themed variant (e.g., .th_calltoaction_primary), add a targeted override:

``css .call-to-action.with-borders.th_calltoaction_primary, .call-to-action.with-borders.th_calltoaction_secondary { border-left: 1px solid #DFDFDF !important; border-right: 1px solid #DFDFDF !important; } ``

Responsive fix: Ensure it holds on mobile (where padding/width changes). The existing media query looks fine, but test at <768px.

Testing Steps

Apply the CSS override and clear DNN's cache (Host > Settings > Servers > Clear Cache) + browser cache.
View in incognito/private mode to avoid caching ghosts.
Test across browsers (Chrome/Firefox/Edge) and zoom levels—subpixel issues worsen at non-100% zoom.
Use dev tools: Inspect the element, toggle the border properties, and check computed styles for any overrides from Tahoe's JS or other modules.
Screen capture before/after to confirm.

This should make the borders consistently visible without altering the overall Tahoe look. If it's still flaky (e.g., JS interference), share the exact shortcode/HTML output or a live URL for deeper debugging.

Ask Daniel's CODEX