Modifying underlying visual styling of the default Bootstrap 3 framework will not affect the core functionality of the AuctionWorx software.

It is important to note that the Boostrap 3 framework, as implemented within AuctionWorx is responsive and the content will automatically shift and resize to fit the screen size of the users device. There is no requirement for a separate mobile application; your customers can use any device with an HTML 5 compatible web browser.

To make layout changes to the software content, the HTML code within the .cshtml files contained within the ‘Views’ folder can be modified.
See Example File Structure Diagram
Making changes to how the software functions requires more in depth code changes and requires comprehensive testing. This guide does NOT cover this scenario and we recommend reviewing the developer documentation available on our website here: www.rainworx.com/dev-docs

Benefits of applying a custom theme:

  • Enforce and grow your Brand to develop customer relationships
  • Differentiate your website from others utilizing the AuctionWorx software

Helpful Definitions

CSS (Cascading Style Sheets): A style sheet language used to define the visual formatting of a document written in a markup language (i.e. HTML, etc.)
Bootstrap: A collection of re-usable HTML and CSS design components and optional JavaScript extensions.
CMS: Content Management System - Used to create and modify digital/web content.
SignalR: SignalR is a software library for Microsoft ASP.NET allowing bi-directional communication between server and client (web browser) for real-time data updates.
Above/Below the Fold:“Above the fold” refers to web content that is visible above the border when a page first loads. “Below the fold” refers to the portion of the page that requires scrolling to see.
HEX code:Hexadecimal code is a system by which any specific color can be described accurately to a computer. A hexadecimal color value is a six-digit code preceded by a # sign.
Aspect Ratio:The ratio of the width to the height of an image or screen.
Thumbnail Image: A reduced-size version of an image.


Starting in version 3.1, design and layout options are starting to be added as standard settings within the admin control panel under Site Preferences > Display. Knowledge of HTML or CSS is not required to implement these modifications - they are managed similar to any other software settings.

All setting changes must be saved before they will take effect.


Heading Color

The color defined here will be the background color for the top of every page, encompassing the logo area, navigation bar/menu, and search bar.


You can customize the color by:

  1. Entering the 6 character HEX code (preceeded by by a hash "#" symbol).
  2. Or, selecting a predefined color from the pop-up color-picker.


Navigation Menu Style


The stardard navigation menu integrated into the previous version 3.1.

Single Row Menu

Free up vertical space so more page content loads above the fold.

The Single Row Menu site logo is limited to a maximum height of 150px.
Header/Menu Text Color

The navigation links should be clearly visible and have a high contrast ratio.


Dark Text for Light Backgrounds

Light Text for Dark Backgrounds

High Contrast

Low Contrast

Center Logo Position

This setting affects the logo position for the "Original" header menu style on all devices with a viewing area greater than 768px wide. For smaller devices (i.e. mobile) the logo is automatically centered.


ON - The logo image will be centered at the top of the page.

OFF - The logo image will be left aligned at the top of the page.

Gallery Aspect Ratio and Image Cropping

This setting defines the default display size for all listings/lots displayed in "gallery" views. To improve appearance, it is recommended that images of the same size and orientation are always used for the first/main image.


4x3 - Landscape

1x1 - Square

3x4 - Portrait

The diagrams below represent how images are resized in the gallery for each setting.

Homepage Content

With the recent changes in version 3.1 and the removal of the 'theme' options, the homepage can now be better utilized as a landing page.

Homepage CMS

AuctionWorx includes a built-in content management system that covers several pre-defined areas within the software, including the homepage. These content areas are accessible from the admin control panel under CMS > Content. View Documentation >

To style the homepage CMS area as though it were an expansion of the 'header' (with a matching background color), use the built-in CSS classes as follows:


<div class="hp-announce header-splash">
 <div class="container">
Homepage Content - Enterprise

There are three options for configuring the homepage (below the main heading / navigation).

Default - Show Featured Listings
Browse - All Listings
No Listings - Listings will not be shown on the homepage.

Homepage Content - Events

There are four options for configuring the homepage (below the main heading / navigation).

Default - List of Events
Browse - All Lots
No Events - Events will not be shown on the homepage.
Primary Auction Event - You pick which event appears on the homepage.

Optional Categories

Choose to show or hide the category/region menu area on the homepage.

This configuration option does not apply if the Homepage Content setting is "Browse".

Default CSS

AuctionWorx v3.5 uses the Bootstrap 3 CSS framework for most elements throughout the software/website. Go to the Bootstrap 3 website >

The Bootstrap standard color scheme for individual elements is utilized throughout AuctionWorx; but can be changed via CSS. See the Adding Custom CSS Code / CSS Examples section for more information.

Examples of the standard Bootstrap 3 color scheme:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

AuctionWorx Specific CSS

AuctionWorx includes some dedicated CSS selectors outside of the Bootstrap framework. When implementing your custom theme be sure not to overlook these custom CSS class selectors. The following selection of AuctionWorx classes may directly affect your custom theme:


These are not the only AuctionWorx specific classes/IDs. We recommend reviewing the full content of the AWE_Bootstrap3.css file that would be used as the starting point for your custom design.

If you experience any difficulties making CSS changes, please submit your question here: https://www.rainworx.com/Support/Ticket

Real-Time Notifications

AuctionWorx uses SignalR and JavaScript to update visible content - including bid pricing and countdown timers. There are dedicated CSS selectors used for the manipulation of this data:

Some of these classes are combined for specific effects. Example: <span class="awe-hidden awe-rt-ShowOnEnd">...</span>

This content between the <span> tags is hidden by default. If the auction lot closes while you are viewing it, the content of this span is triggered to appear using awe-rt-ShowOnEnd.

System Messaging
User Actions
Item Data
Display By Status
Very Important
Event Edition Specific
General System

If you are modifying the .cshtml files, removing these selectors will break the front-end real-time update functionality.

Adding Custom CSS Code

There are four options for implementing your custom CSS code.

  1. Edit the “header scripts” section within the admin control panel under “CMS > Content” and directly insert your CSS code. (The <style> tags must be used since content in this area will be inserted directly into the HTML document). Example:
    body {
        background-color: #999999;
  2. Upload your custom .css file to the /Content folder using an FTP client to transfer the file and edit the “header scripts” section within the admin control panel under “CMS > Content” to insert the following line (replacing the example file name with your custom file name):
    <link href="Content/example.css" rel="stylesheet" / >
  3. Upload your custom .css file to the /Content folder using an FTP client to transfer the file and edit /Views/Shared/_layout.cshtml to insert the following line before the closing </head> tag (replacing the example file name with your custom file name):
    <link href="Content/example.css" rel="stylesheet" / >
  4. Upload your custom .css file to the /Content folder using an FTP client to transfer the file and include it within the dynamic bundling within the MVC project (RainWorx.FrameWorx.MVC/App_Start/BundleConfig.css).

CSS Examples

These CSS examples utilize method #1 from above for implementation.

This example CSS code will affect the general website background color and the background color of the site footer.
Original AuctionWorx Default        Sample CSS Applied
body {
    background-color: #f5f5f5;  
footer {
    background-color: #222222;
This example CSS code will affect the color of the 'sale' badge.
Original AuctionWorx Default        Sample CSS Applied
.listing-badge:before {
    border-right-color: transparent;
.listing-badge:after {
    border-left-color: transparent;
    border-bottom-color: transparent;
Other Useful CSS Snippets

Remove rounded corners from buttons and other elements.

* {border-radius: 0 !important;}

Text link color. Replace the 6 character hex color codes with your required color codes.

a:active, a:focus, a:hover {color:#7F00FF;}

Responsive Design

It is important to remember that the software is built using a dynamic template that changes according to the size of the device viewing the website or the width of the web browser window. Because of the responsive design, a separate mobile website or mobile device application is not required.

When implementing a custom design, be sure to adequately test the responsiveness throughout the software; including:
  • Homepage
  • Listing Detail pages for each enabled listing type (Auction, Fixed Price, and/or Classified Ad)
  • My Account (Including Sales and Purchase invoices)

Responsive Example - Main Site Navigation

Full size view (≥1200px width): (Image below has been resized to fit within this display.)

Medium size view (≥992px width): (Image below has been resized to fit within this display.)

Small size view (≥768px width): (Image below may resize to fit your display.)

Extra small size view (<768px width)

Responsive Example - Site Footer

Full & Medium size view (≥992px width): (Image below has been resized to fit within this display.)


AuctionWorx utilizes a main layout file and individual content files. The master layout file contains both the header and footer content. All files (.cshtml) can be found within the /Views subfolder.

Example Homepage Content

Individual content pages will be referenced similar to the following examples:

Static: /Views/Home/HomePageFeaturedListings.cshtml


Dynamic: /Views/Shared/AuctionThumbnail.cshtml or /Views/Shared/FixedPriceThumbnail.cshtml or /Views/Shared/ClassifiedThumbnail.cshtml

@Html.Partial(listing.Type.Name + "Thumbnail", listing)

Email Templates

Email templates allow you to customize the formatting and text of pre-defined emails sent by the auction software platform.

Each email template is comprised of a subject and a body.
The subject line of an email is the single line of text people see when they receive your email.
The body of the email contains the text, HTML code, and dynamic email system tags ~ these tags write user, item, and sales data into the email.

Example Tags:

Your item [Detail.Listing.Title] has ended and has been sold to user [Detail.Payer.UserName].

You can edit your email templates within the admin control panel under CMS > Email Templates. Further documentation on email templates and build-in data tags can be found HERE.

Editing Email Templates

We do recommend modifying the email templates to best suit your business needs. This can be as simple as changing the terminology (text only changes) or as complex as re-styling the entire email structure.

To make significant changes to the email styling, knowledge of HTML code and CSS style declarations are required. If you are unfamiliar with HTML code, or have never customized raw HTML for an email, the following articles are a good educational starting point.

Email Header & Footer

By default, the "header" and "footer" are blank. Each email template is already configured to load this content.


The "header" and "footer" content can be independant of each other or used to "wrap" the body of the email.

Email Body Here

Images, like your logo, can be inserted into the email templates using HTML code. You must use the full URL when adding images to your email template, example:

Correct URL Format Incorrect Image Source



Never link to an image from a website you do not own.

More information on the HTML <img> tag is available HERE.

Preview and Test Your Changes
During the editing process, you have the option to "preview" your changes at any time. Sample data is pre-filled for system email data tags.
We recommend testing your emails to visualize the design rendering across different devices.

Third Party CSS Themes

There are third party CSS themes available online for the Bootstrap 3 framework; many are free. Some of these themes are CSS only and can be easily applied to AuctionWorx to change the general appearance of the software without editing the underlying code. [See Adding CSS Code above.]

These themes are not made specifically for AuctionWorx and may require additional CSS customization for seamless integration.

Free Pre-made Bootstrap 3 CSS Theme Sources:

  • Bootswatch.com
  • PrepBootstrap.com

Free Bootstrap 3 CSS Generators: (Be sure to download the CSS, not LESS, file.)

  • LavishBootstrap.com - Automatically generate a theme based on the color palette of a photo.
  • PaintStrap.com - Generate a theme based on premade COLOURlovers palettes.

The above websites are third party services and have no relationship with RainWorx Software. All content and intellectual property for these products remains with their respective publishers.

Some themes and templates that are available may include separate HTML files. These files are not directly compatible with AuctionWorx and would require editing the individual software files to incorporate these custom designs / layouts.