RentFetch CSS styling and theming

Overview

Rent Fetch provides CSS custom properties (variables) that control the appearance of property listings and UI elements. You can override these variables to match your site’s design across the board, rather than going through and styling each particular element.

Overriding Variables

Override variables in your theme’s stylesheet:

:root {
     --rentfetch-accent: #ff6b6b;
     --rentfetch-accent-active: #ff5252;
     --rentfetch-font-size-medium: 18px;
}

Or target specific contexts:

.custom-property-section {
     --rentfetch-accent: #2ecc71;
     --rentfetch-base: #fafafa;
}

Variable Groups

Base Colors

Neutral colors for backgrounds, borders, and text:

• –rentfetch-white: #ffffff
• –rentfetch-base: #f7f7f7 (lightest gray)
• –rentfetch-base-2: #eaeaea (light gray)
• –rentfetch-base-3: #d4d4d4 (medium gray)
• –rentfetch-default: #999999 (default gray)
• –rentfetch-dark: #000000

Accent Colors

Primary interactive elements:

• –rentfetch-accent: #086ddb (primary blue)
• –rentfetch-accent-active: #1f88fa (hover/active state)
• –rentfetch-accent-light: #f1f6fb (light blue background)

Specials/Promotions

Highlight special offers:

• –rentfetch-accent-specials-background: #ffebb1
• –rentfetch-accent-specials-star: #fbbc00

Opacity Overlays

Black with varying transparency:

• –rentfetch-black-5-percent through –rentfetch-black-90-percent
• –rentfetch-white-85-percent: rgba(255, 255, 255, 0.85)

Shadows

Depth and elevation effects:

• –rentfetch-box-shadow: Default shadow
• –rentfetch-box-shadow-hover: Elevated hover state
• –rentfetch-box-shadow-active: Focus ring

Status Colors

Feedback messages:

• –rentfetch-error: #ffe5e5 (red tint)
• –rentfetch-success: #e6f4e6 (green tint)
• –rentfetch-notice: #f8f8e9 (yellow tint)

Branding

Rent Fetch brand colors:

• –rentfetch-branding-contrast: #1f313b
• –rentfetch-branding-contrast-2: #283f4b
• –rentfetch-branding-accent: #eb6836
• –rentfetch-branding-base: #f0f7fc

Typography

Font sizes:

• –rentfetch-font-size-smallest: 13px
• –rentfetch-font-size-small: 15px
• –rentfetch-font-size-medium: 17px (default)
• –rentfetch-font-size-large: 22px
• –rentfetch-font-size-larger: 25px
• –rentfetch-font-size-largest: 30px

Usage Examples

Custom Accent Color Theme

:root {
     --rentfetch-accent: #9b59b6;
     --rentfetch-accent-active: #8e44ad;
     --rentfetch-accent-light: #f4ecf7;
}

Dark Mode Properties

body.dark-mode {
     --rentfetch-base: #1a1a1a;
     --rentfetch-base-2: #2d2d2d;
     --rentfetch-base-3: #404040;
     --rentfetch-white: #1a1a1a;
     --rentfetch-dark: #ffffff;
}

Larger Typography

.properties-grid {
     --rentfetch-font-size-small: 16px;
     --rentfetch-font-size-medium: 18px;
     --rentfetch-font-size-large: 24px;
}

Custom Card Styling

.property-card {
     background: var(--rentfetch-base);
     border: 1px solid var(--rentfetch-base-3);
     box-shadow: var(--rentfetch-box-shadow);
     color: var(--rentfetch-dark);
}

.property-card:hover {
     box-shadow: var(--rentfetch-box-shadow-hover);
}

.property-card:focus-within {
     box-shadow: var(--rentfetch-box-shadow-active);
}

Overlay with Opacity

.property-image-overlay {
     background: var(--rentfetch-black-50-percent);
     color: var(--rentfetch-white);
     padding: 1rem;
}

Status Notifications

.success-message {
     background: var(--rentfetch-success);
     color: var(--rentfetch-dark);
     font-size: var(--rentfetch-font-size-small);
}