The provided CSS code styles various UI components of a WordPress website to ensure a modern consistent & visually appealing design. Each section targets specific elements such as buttons images widgets & search functionality applying cohesive colors shadows & rounded corners for a polished appearance.
1. Read More Button
The .gb-button class is used to style call-to-action buttons with a vibrant gradient background, rounded edges, and smooth transitions. The gradient moves from blue to cyan and back, giving it a dynamic look. A soft shadow and a pill-shaped border-radius of 120px enhance its prominence on the page.
2. Archive Featured Image
Images within .gb-block-image are vertically aligned and styled with slightly rounded corners (12px) and a subtle box shadow. This helps maintain image consistency and adds depth to visual elements across the archive layout.
3. Post Featured Image
Post headers that use .page-header-image-single with full-size images (.attachment-full) receive a slightly larger border-radius (25px) and a shadow for a sleek, elevated effect. Common image classes like .size-auto, .size-full, etc., are restricted to a responsive width with auto height to ensure images scale correctly across devices.
4. Search Button
The .wp-block-search__button is styled with a blue background, white text, and rounded corners. The padding and font size are adjusted for readability and clickability, while the box-shadow adds a subtle 3D effect. !important flags are used here to enforce styles over potential theme conflicts.
5. Sidebar Widget Title
Widget titles styled with .widget-title use the same gradient as the Read More button for branding consistency. The text is white, centered, bold, and slightly larger for emphasis. Padding, rounded corners, and shadow effects ensure it stands out in the sidebar.
6. Recent Posts Widget with Thumbnails
Images inside recent post widgets are uniformly sized to 50x50px, floated to the left, and spaced appropriately for text wrapping. A 4px border-radius gives a slight rounding effect, contributing to a softer visual style.
7. Sidebar Widget Area
Widgets within the .widget-area class receive generous internal spacing (30px) to prevent content from appearing cramped and improve readability.
Credits : Image Was generated Using https://www.canva.com/dream-lab/
This CSS ensures a cohesive & user friendly interface by using gradients consistent shadows spacing & rounded edges. It maintains brand colors across elements enhances UX & adheres to modern design principles.
-Photoroom.png)
