Styling the Jobs Search Template

This guide covers how to customize the appearance of the LimeStaff job search page using CSS. It documents the full HTML structure, every available CSS selector, the default CSS custom properties, and practical examples for common customizations.

Table of Contents

Template Override

LimeStaff templates can be overridden by copying them into your active theme under a limestaff/ directory. The relevant template files are:

Template file Purpose
job-search.php Main job listings page
job-search-filters.php Search form & filter controls
job-search-pagination.php Pagination navigation

Copy any of these to your-theme/limestaff/<filename>.php to customize the markup. For CSS-only changes no template override is needed.

For a more detailed guide on template overrides, please check: https://limestaff.co/doc/template-override-guide/

HTML Structure Reference

Below is a simplified outline of the HTML produced by the three templates. Use this to understand nesting and identify the correct selectors.

<section id="limestaff-job-search">
    <h3>Job Search</h3>

    <!-- job-search-filters.php -->
    <div class="job-search">
        <form action="…" method="post" id="limestaff-jobs-search">
            <div class="form-inner-row">
                <input type="text" name="job-search-keyword" class="job-search-keyword" />
                <input type="submit" class="button-border" value="Search Jobs" />
            </div>
            <div class="form-inner-row">
                <select name="job-search-category">…</select>
                <select name="job-search-type">…</select>
            </div>

            <!-- Location filters (conditional) -->
            <div class="filter-by-location-toggle-wrapper form-inner-row">
                <input type="checkbox" id="show-country-state" />
                <label for="show-country-state">Filter by location</label>
            </div>
            <div class="country-state-filters form-inner-row">
                <select name="job-search-country" id="job-search-country-filter">…</select>
                <select name="job-search-state" id="job-search-state-filter">…</select>
            </div>
            <input type="text" name="job-search-city" class="job-search-city" />

            <!-- Custom field filters (conditional) -->
            <span id="more-filters-button">Show Additional Filters</span>
            <div id="more-filters-container" class="form-inner-row">
                <select name="custom_…">…</select>
            </div>
        </form>
    </div>

    <!-- job-search.php — listings -->
    <div class="jobs-wrapper">
        <article class="job" id="job-{id}" data-job="{id}" data-source-job-id="{source_id}">
            <a href="…">
                <h4>Job Title</h4>
                <div class="job-meta">
                    <span class="location">…</span>
                    <span class="salary">…</span>
                    <span class="type">…</span>
                </div>
                <div class="job-excerpt">…</div>
            </a>
            <div class="job-apply">
                <a class="apply-btn button-border" href="…">Apply Now</a>
            </div>
        </article>
        <!-- …more articles… -->
    </div>

    <!-- job-search-pagination.php -->
    <nav class="jobs-pagination">
        <a class="prev">←</a>
        <a class="active">1</a>
        <a>2</a>
        <span class="break">…</span>
        <a>10</a>
        <a class="next">→</a>
    </nav>
</section>

CSS Custom Properties (Variables)

The default stylesheet defines the following custom properties on :root. Override these in your own CSS to change colors globally.

Variable Default Used For
--background-color #f9fafb Job card & pagination link bg
--background-hover-color #f5f5f5 Pagination active/hover bg
--input-placeholder-grey-color #626a6c Input placeholder text
--weblime-green-color #84cc16 Accent (meta tags, buttons)
--weblime-black-color #0f172a Text, borders, hover card bg
--weblime-lighter-black-color rgba(15, 23, 42, 0.8) Job excerpt text
--weblime-grey-color rgba(255, 255, 255, 0.8) (Available for custom use)

Example — override variables:

:root {
    --weblime-green-color: #3b82f6;   /* blue accent instead of green */
    --weblime-black-color: #1e293b;   /* slightly lighter dark */
    --background-color: #ffffff;       /* white card backgrounds */
}

Selector Reference

Wrapper & Heading

Selector Element
#limestaff-job-search Outer <section> wrapping everything
#limestaff-job-search h3 Page heading (“Job Search”)

Search / Filter Form

Selector Element
.job-search Form wrapper <div>
form#limestaff-jobs-search The <form> element
.job-search .form-inner-row Flex row inside the form
.job-search .job-search-keyword Keyword text input
.job-search input[type="submit"] “Search Jobs” submit button
.job-search select Any dropdown (category, type, country, state)
.job-search .filter-by-location-toggle-wrapper Location checkbox row
.job-search .country-state-filters Country/state dropdowns row
#job-search-country-filter Country dropdown
#job-search-state-filter State dropdown
.job-search .job-search-city City text input
#more-filters-button “Show/Hide Additional Filters” toggle text
#more-filters-container Custom fields filter row (hidden by default)
#more-filters-container.active Custom fields filter row when visible

Job Listings

Selector Element
.jobs-wrapper Container <div> for all job cards
.jobs-wrapper article.job Individual job card
.jobs-wrapper article a Clickable link wrapping title, meta, excerpt
.jobs-wrapper h4 Job title
.jobs-wrapper .job-meta Meta info container (location, salary, type)
.jobs-wrapper .job-meta span Individual meta tag
.jobs-wrapper .job-meta .location Location meta tag
.jobs-wrapper .job-meta .salary Salary meta tag
.jobs-wrapper .job-meta .type Job type meta tag
.jobs-wrapper .job-excerpt Job description excerpt
.jobs-wrapper .job-apply Apply button container
.jobs-wrapper .job-apply a.apply-btn “Apply Now” button

Hover states (default behavior):

Selector Effect
.jobs-wrapper article:hover Card bg changes to dark
.jobs-wrapper article:hover h4 Title turns white
.jobs-wrapper article:hover .job-excerpt Excerpt turns light white

Pagination

Selector Element
.jobs-pagination Pagination <nav> wrapper
.jobs-pagination a Page number link
.jobs-pagination a.active Current page link
.jobs-pagination a.prev Previous-page arrow link
.jobs-pagination a.next Next-page arrow link
.jobs-pagination .break Ellipsis separator (…)

Responsive Breakpoints

The default stylesheet uses a single breakpoint at 767px:

@media (max-width: 767px) {
    /* Job title and meta stack vertically */
    .jobs-wrapper h4,
    .jobs-wrapper .job-meta {
        flex-basis: 100%;
    }

    /* Keyword input and submit button widen */
    .job-search .job-search-keyword {
        width: 64%;
    }
    .job-search .form-inner-row input[type="submit"] {
        width: 34%;
    }
}

You can add additional breakpoints in your custom styles as needed.

Common Customization Examples

Change the Accent Color

Override the green accent used on meta tags and buttons:

:root {
    --weblime-green-color: #6366f1; /* indigo */
}

Change the Job Item Background

.jobs-wrapper article {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

Custom Hover State

Replace the dark-background hover with a subtle left-border highlight:

.jobs-wrapper article:hover {
    background-color: #f8fafc;
    border-left: 4px solid var(--weblime-green-color);
}

.jobs-wrapper article:hover h4 {
    color: var(--weblime-black-color); /* keep title dark */
}

.jobs-wrapper article:hover .job-excerpt {
    color: var(--weblime-lighter-black-color); /* keep excerpt dark */
}

Stack Meta Tags Vertically on All Screens

.jobs-wrapper h4,
.jobs-wrapper .job-meta {
    flex-basis: 100%;
}

.jobs-wrapper .job-meta {
    text-align: left;
    padding-left: 0;
}

Full-Width Search Button

.job-search .job-search-keyword {
    width: 100%;
}

.job-search .form-inner-row input[type="submit"] {
    width: 100%;
    margin-top: 5px;
}

Style the Apply Now Button

.jobs-wrapper .job-apply a.apply-btn {
    background-color: #0ea5e9;
    color: #ffffff;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Custom Pagination Colors

.jobs-pagination a {
    background-color: #e2e8f0;
    color: #334155;
}

.jobs-pagination a.active,
.jobs-pagination a:hover {
    background-color: var(--weblime-green-color);
    color: #ffffff;
}

Custom Font Family

Override the default system font stack:

#limestaff-job-search h3,
.jobs-wrapper h4,
.jobs-wrapper .job-meta,
.jobs-wrapper .job-excerpt,
.job-search input,
.job-search select,
.jobs-pagination a {
    font-family: "Inter", sans-serif;
}

Tips

  • Specificity: The plugin’s selectors are relatively low-specificity. Prefix your rules with #limestaff-job-search if you need to ensure your styles win without !important.
  • Enqueueing custom CSS: Add a custom stylesheet via your theme’s functions.php using wp_enqueue_style(), loaded after the plugin’s stylesheet so your overrides take effect.
  • Template overrides vs. CSS: Prefer CSS-only changes where possible. If you need to add or remove HTML elements, copy the template into your-theme/limestaff/ and edit the markup there.
  • Conditional elements: Some elements (location filters, custom field filters, apply button) are rendered conditionally based on widget/shortcode settings. Your CSS should be resilient to these elements being absent.
  • Dark mode: You can scope variable overrides to a media query for automatic dark mode support: 
    @media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1e293b;
        --weblime-black-color: #f1f5f9;
        --weblime-lighter-black-color: rgba(241, 245, 249, 0.8);
    }
}