Format Picture Sidebar: Dynamic Sliders, Rounded Corners & Color Sync
Fine-tuning photo frames and graphic styling should feel fluid and effortless. Through OpenPublisher v5.16.8 and v5.16.9, the Format Picture Sidebar received a series of elegant visual and ergonomic upgrades: a continuous 0px to 100px rounded corners slider with a live numeric badge, dynamic teal progress fills on range sliders, smooth cross-fading selection transitions, and universal font color synchronization across both the ribbon and floating toolbars.
Figure 1: The upgraded Format Picture sidebar displaying dynamic gradient progress fills on sliders and seamless selection transitions.
1. The Continuous Rounded Corners Slider (v5.16.9)
While right-clicking an image has long offered stepped radius presets (such as 8px, 16px, 24px, or 32px), precision layouts often call for custom corner curves (such as a subtle 12px card curve or an expressive 48px capsule curve).
- Continuous 0px to 100px Range: Located prominently inside the Format Picture sidebar under the Borders & Corners group, the new slider lets you drag to any exact pixel radius.
- Live Numeric Readout Badge: A dedicated badge beside the slider shows the current pixel value in real time as you drag.
- Bi-Directional Canvas Sync: Adjusting the slider updates the image's canvas
clip-pathandborder-radiusinstantly on every frame. If you later apply a preset from the right-click context menu, the sidebar slider automatically repositions its thumb to match. - Full Print & PDF Export Parity: Custom corner radii are serialized into page history snapshots, ensuring your rounded photos print cleanly at 300 DPI without pixelated edges.
Figure 2: Real-time image corner radius slider adjustment with synchronized font color indicator bars across ribbon and floating toolbars.
2. Dynamic Slider Progress Bar Fill Effect (v5.16.8)
Standard browser range sliders typically show a plain gray track behind the slider thumb. Version 5.16.8 introduced dynamic progress fills across all OpenPublisher range sliders:
- Real-Time Track Filling: As you drag any slider (whether adjusting corner radius, shadow blur, border width, or opacity), the track from 0% up to the active thumb position fills with a vibrant teal gradient (
var(--ui-theme-dark)/#007670). - Theme Adaptive: The fill dynamically inherits your active UI theme color or dark mode settings, maintaining consistent visual aesthetics across all 700+ themes.
- Smooth Selection Transitions: When clicking between different photos or deselecting to an empty canvas, the sidebar cross-fades smoothly without abrupt flickering, visual jumping, or layout recalculation lag.
3. Universal Font Color Indicator Synchronization (v5.16.8 & v5.16.9)
When formatting typography, you frequently switch between the main ribbon toolbar at the top of the screen and the floating action toolbar that hovers right beside your selected text.
In earlier releases, changing font color via the CSS Color Studio, quick swatches, or 1-click designer themes did not always update the visual colored bar underneath the "A" icon on both toolbars simultaneously.
Versions 5.16.8 and 5.16.9 unified font color synchronization across the entire application:
- Bi-Directional Bar Mirroring: The color indicator bar on the Text Box Tools ribbon (
#ctx-text-color-bar-text) and the Floating Toolbar color bar (#float-text-color-bar) are now unified. Changing a color from either location immediately updates both bars. - Caret & Selection Awareness: When clicking into a text box or placing your text caret inside words with different colors, both toolbars instantly update their indicator bars to match the exact font color at the caret position.
- Designer Theme & Quick-Swatch Parity: Applying whole-page palettes or 1-click designer themes instantly propagates active font colors to all toolbar indicators without requiring a canvas refresh.