Fuel Price Widget Configuration

Add a live fuel prices widget to your website.

Configure your widget below. The embed code will be generated automatically.

Configuration

Town Name:

Type at least 3 characters and select a town from the dropdown

Distance (miles):

Max Stations:

Widget Title (optional):

Leave empty to use default format. Use {fuel} and {town} as placeholders.

Icon/Badge URL (optional):

URL to an icon image to display in the top right of the widget header.

Only show island stations

Embed Code

Copy and paste this code into your website's HTML where you want the widget to appear.

Customisation Guide

You can customize the widget's appearance by adding CSS to your page. Target the following classes and IDs:

Main Container

#fcf-widget-container - Main widget container
.fcf-widget - Widget wrapper

Header

.fcf-widget-header - Header section (dark background)
.fcf-widget-header h3 - Title
.fcf-widget-header a - "View all prices" link
.fcf-widget-header-icon - Icon/badge image (top right)

Controls

.fcf-widget-controls - Button container
.fcf-widget-btn - E10/Diesel buttons (customizable: border-radius, padding, colors, etc.)
.fcf-widget-btn.active - Active button state
.fcf-widget-btn:hover - Button hover state

Station List

.fcf-widget-stations - Station list container
.fcf-widget-station - Individual station item
.fcf-widget-station-name - Station name container
.fcf-widget-station-name a - Station name link
.fcf-widget-station-address - Station address
.fcf-widget-station-distance - Distance text
.fcf-widget-station-price - Price display

Other

.fcf-widget-last-updated - "Last updated" text
.fcf-widget-empty - "No results found" message

CSS Variables

The widget uses CSS variables for easy theming. Override these in your CSS:

--fcf-primary-color - Header background (default: #2c3e50)
--fcf-link-color - Link color (default: #3498db)
--fcf-button-active - Active button color (default: #3498db)
--fcf-price-color - Price color (default: #27ae60)
--fcf-text-color - Text color (default: #2c3e50)
--fcf-text-muted - Muted text color (default: #7f8c8d)
--fcf-border-color - Border color (default: #e0e0e0)
--fcf-bg-light - Light background (default: #f8f9fa)

Example CSS

/* Customize colors */
#fcf-widget-container {
    --fcf-primary-color: #0066cc;
    --fcf-price-color: #ff6600;
}

/* Style station items */
.fcf-widget-station {
    border-left: 3px solid #0066cc;
    padding-left: 12px;
}

/* Customize header */
.fcf-widget-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Customize buttons (border-radius, padding, etc.) */
.fcf-widget-btn {
    border-radius: 8px; /* Change button corner radius */
    padding: 10px 20px; /* Adjust button padding */
}

.fcf-widget-btn.active {
    border-radius: 8px; /* Match active state radius */
}