Logo Options Updated

This commit is contained in:
2026-03-09 11:26:49 -04:00
parent 7fae76132a
commit 82b1f22c58
7 changed files with 38 additions and 31 deletions

View File

@@ -18,8 +18,8 @@ const DESCRIPTIONS = {
json_ld_enabled: "Add JSON-LD structured data (Organization + WebSite schema) for search engines.",
// ── Branding: Logo ──
logo_dark_url: "Logo image URL for dark mode. Shown in navbar and footer. Leave blank to show site name as text.",
logo_light_url: "Logo image URL for light mode. If not set, the dark logo is used for both themes.",
logo_dark_url: "Logo image URL for dark mode. Shown in navbar and footer. Leave blank to use the Discourse site logo.",
logo_light_url: "Logo image URL for light mode. Leave blank to use the dark logo for both themes.",
logo_height: "Logo height in pixels (1680). Applies to both navbar and footer logos.",
logo_use_accent_color: "Tint the logo to match the accent color. Works best with monochrome SVG or PNG logos.",
footer_logo_url: "Override logo for the footer only. If not set, the navbar logo is reused.",
@@ -45,12 +45,12 @@ const DESCRIPTIONS = {
// ── Preloader ──
preloader_enabled: "Show a loading overlay with logo and progress counter while the page loads.",
preloader_logo_url: "Custom logo for the preloader. Leave blank to use the site logo.",
preloader_logo_dark_url: "Logo image for the preloader in dark mode. Leave blank to use the site logo.",
preloader_logo_light_url: "Logo image for the preloader in light mode. Leave blank to use the dark preloader logo.",
preloader_bg_dark: "Preloader background for dark mode.",
preloader_bg_light: "Preloader background for light mode.",
preloader_text_color_dark: "Percentage text color for dark mode.",
preloader_text_color_light: "Percentage text color for light mode.",
preloader_logo_color: "Logo color. Works with single-color SVG logos on transparent background.",
preloader_bar_color: "Progress bar color. Leave blank for accent color.",
preloader_min_duration: "Minimum display time (ms). Prevents a flash on fast connections.",
@@ -278,10 +278,10 @@ const TABS = [
"scroll_animation", "staggered_reveal_enabled", "dynamic_background_enabled",
"mouse_parallax_enabled", "scroll_progress_enabled",
"google_font_name", "title_font_name", "icon_library",
"preloader_enabled", "preloader_logo_url",
"preloader_enabled", "preloader_logo_dark_url", "preloader_logo_light_url",
"preloader_bg_dark", "preloader_bg_light",
"preloader_text_color_dark", "preloader_text_color_light",
"preloader_logo_color", "preloader_bar_color", "preloader_min_duration"
"preloader_bar_color", "preloader_min_duration"
])
},
{
@@ -449,7 +449,8 @@ const IMAGE_UPLOAD_SETTINGS = {
android_app_badge_image_url: { label: "Upload Badge", multi: false },
app_cta_image_url: { label: "Upload Image", multi: false },
splits_background_image_url: { label: "Upload Image", multi: false },
preloader_logo_url: { label: "Upload Logo", multi: false },
preloader_logo_dark_url: { label: "Upload Logo (Dark)", multi: false },
preloader_logo_light_url: { label: "Upload Logo (Light)", multi: false },
};
let currentTab = "settings";

View File

@@ -2159,15 +2159,21 @@ html, .cl-body {
}
.cl-preloader__logo {
width: 120px;
height: 60px;
background: var(--cl-preloader-logo-color, var(--cl-preloader-text, #ffffff));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
max-width: 120px;
max-height: 60px;
object-fit: contain;
}
/* Dark/light logo visibility */
.cl-preloader__logo--light { display: none; }
.cl-preloader__logo--dark { display: block; }
[data-theme="light"] .cl-preloader__logo--dark { display: none; }
[data-theme="light"] .cl-preloader__logo--light { display: block; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .cl-preloader__logo--dark { display: none; }
:root:not([data-theme="dark"]) .cl-preloader__logo--light { display: block; }
}
.cl-preloader__counter {

View File

@@ -16,8 +16,8 @@ en:
json_ld_enabled: "Add JSON-LD structured data (Organization + WebSite schema) for search engines."
# ── Branding: Logo ──
logo_dark_url: "━━ BRANDING ━━ — Logo image URL for dark mode. Displayed in the navbar and footer. Leave blank to show the site name as text."
logo_light_url: "Logo image URL for light mode. If not set, the dark logo is used for both themes."
logo_dark_url: "━━ BRANDING ━━ — Logo image URL for dark mode. Displayed in the navbar and footer. Leave blank to use the Discourse site logo, or show the site name as text if no site logo is set."
logo_light_url: "Logo image URL for light mode. Leave blank to use the dark logo for both themes."
logo_height: "Logo height in pixels (1680). Applies to both the navbar and footer logos."
logo_use_accent_color: "Tint the logo to match the accent color. Works best with monochrome SVG or PNG logos."
footer_logo_url: "Override logo specifically for the footer. If not set, the navbar logo is reused."
@@ -39,12 +39,12 @@ en:
# ── Preloader ──
preloader_enabled: "━━ PRELOADER ━━ — Show a full-screen loading overlay with logo and progress counter while the page loads."
preloader_logo_url: "Custom logo image for the preloader. Leave blank to use the site logo."
preloader_logo_dark_url: "Logo image for the preloader in dark mode. Leave blank to use the site logo."
preloader_logo_light_url: "Logo image for the preloader in light mode. Leave blank to use the dark mode preloader logo."
preloader_bg_dark: "Preloader background color for dark mode. Leave blank for default (matches site background)."
preloader_bg_light: "Preloader background color for light mode."
preloader_text_color_dark: "Percentage counter text color for dark mode."
preloader_text_color_light: "Percentage counter text color for light mode."
preloader_logo_color: "Logo color override. Works with single-color SVG logos. Leave blank for white (dark mode) or inherits text color."
preloader_bar_color: "Progress bar color. Leave blank to use the accent color."
preloader_min_duration: "Minimum time (ms) the preloader is shown, even if loading finishes sooner. Prevents a flash on fast connections. Default: 800."

View File

@@ -128,7 +128,10 @@ plugins:
preloader_enabled:
default: false
type: bool
preloader_logo_url:
preloader_logo_dark_url:
default: ""
type: string
preloader_logo_light_url:
default: ""
type: string
preloader_bg_dark:
@@ -143,9 +146,6 @@ plugins:
preloader_text_color_light:
default: ""
type: color
preloader_logo_color:
default: ""
type: color
preloader_bar_color:
default: ""
type: color

View File

@@ -151,14 +151,17 @@ module CommunityLanding
# ── PRELOADER ──
def render_preloader
logo = (@s.preloader_logo_url.presence rescue nil) || logo_dark_url
logo_dark = (@s.preloader_logo_dark_url.presence rescue nil) || logo_dark_url
logo_light = (@s.preloader_logo_light_url.presence rescue nil) || logo_dark
min_ms = (@s.preloader_min_duration rescue 800).to_i.clamp(0, 5000)
html = +""
html << "<div id=\"cl-preloader\" class=\"cl-preloader\">\n"
html << " <div class=\"cl-preloader__content\">\n"
if logo
html << " <div class=\"cl-preloader__logo\" style=\"-webkit-mask-image: url('#{e(logo)}'); mask-image: url('#{e(logo)}');\"></div>\n"
if logo_dark
html << " <img class=\"cl-preloader__logo cl-preloader__logo--dark\" src=\"#{e(logo_dark)}\" alt=\"\">\n"
html << " <img class=\"cl-preloader__logo cl-preloader__logo--light\" src=\"#{e(logo_light)}\" alt=\"\">\n"
end
html << " <div class=\"cl-preloader__counter\" id=\"cl-preloader-pct\">0%</div>\n"
html << " <div class=\"cl-preloader__bar\"><div class=\"cl-preloader__bar-fill\" id=\"cl-preloader-bar\"></div></div>\n"

View File

@@ -72,7 +72,6 @@ module CommunityLanding
preloader_text_dark = safe_hex(:preloader_text_color_dark)
preloader_text_light = safe_hex(:preloader_text_color_light)
preloader_bar = safe_hex(:preloader_bar_color)
preloader_logo = safe_hex(:preloader_logo_color)
orb_color = safe_hex(:orb_color)
orb_opacity = [[@s.orb_opacity.to_i, 0].max, 100].min rescue 50
@@ -113,7 +112,6 @@ module CommunityLanding
dark_extras << "\n --cl-preloader-bg: #{preloader_bg_dark};" if preloader_bg_dark
dark_extras << "\n --cl-preloader-text: #{preloader_text_dark};" if preloader_text_dark
dark_extras << "\n --cl-preloader-bar: #{preloader_bar};" if preloader_bar
dark_extras << "\n --cl-preloader-logo-color: #{preloader_logo};" if preloader_logo
light_extras = +""
light_extras << "\n --cl-navbar-signin-color: #{navbar_signin_light || navbar_signin_dark};" if navbar_signin_light || navbar_signin_dark
@@ -130,7 +128,6 @@ module CommunityLanding
light_extras << "\n --cl-preloader-bg: #{preloader_bg_light || preloader_bg_dark};" if preloader_bg_light || preloader_bg_dark
light_extras << "\n --cl-preloader-text: #{preloader_text_light || preloader_text_dark};" if preloader_text_light || preloader_text_dark
light_extras << "\n --cl-preloader-bar: #{preloader_bar};" if preloader_bar
light_extras << "\n --cl-preloader-logo-color: #{preloader_logo};" if preloader_logo
"<style>
:root, [data-theme=\"dark\"] {

View File

@@ -88,7 +88,7 @@ after_initialize do
about_background_image_url ios_app_badge_image_url
android_app_badge_image_url app_cta_image_url
splits_background_image_url hero_video_upload
preloader_logo_url
preloader_logo_dark_url preloader_logo_light_url
].freeze
# POST /community-landing/admin/pin-upload