• Overview
• Configuration
•    Homepage Content
• Default CSS
• AuctionWorx CSS
• Real-Time Notifications
• Adding CSS Code
•    CSS Examples
• Responsive Design
• Layout
• Email Templates
•    Editing Email Templates
• 3rd Party CSS Themes

Overview

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.

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.

Configuration

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.

Navigation Menu Style

Original

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.

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:

.hp-announce
.header-splash

Example:

<div class="hp-announce header-splash">
 <div class="container">
  <!-- YOUR CUSTOM HTML HERE -->
 </div>
</div>

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.

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:

.logo
.nav-secondary
.section-title
.galleryTitle
.galleryPrice
.galleryTime--active


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:

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:
   

   <style>
   body {
       background-color: #999999;
   }
   </style>
   

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

<style>
body {
    background-color: #f5f5f5;  
}
footer {
    background-color: #222222;
}
</style>

This example CSS code will affect the color of the 'sale' badge.

Original AuctionWorx Default		Sample CSS Applied

<style>
.listing-badge:before {
    border-color:#CC1100;
    border-right-color: transparent;
}
.listing-badge:after {
    border-color:#9D1309;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
</style>

* {border-radius: 0 !important;}

a{color:#551A8B;}
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.

Responsive Example - Main Site Navigation

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

Show All

---

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.)

Show All

---

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

---

Extra small size view (<768px width): (Minimized and Full/Open)

Layout

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

@Html.Partial("HomePageFeaturedListings")

@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].

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.

• HTML For Beginners The Easy Way: Start Learning HTML & CSS Today
• How to Code HTML Emails for Any Device
• How to Code HTML Email Newsletters

Email Header & Footer

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

Example:

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

	Email Body Here

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 1 2 3

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.

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.