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.

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.


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.

 

NEW v3.1
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.

Options

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.

Example:

For white or light heading background colors you may want to change the font color for better visibility. You can copy/paste from this CSS example to change the font color >

NEW v3.1
Center Logo Position

This setting affects the logo position as displayed on all devices with a viewing area greater than 768px wide. For smaller devices (i.e. mobile) the logo is automatically centered.

Options

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.


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

NEW v3.1 Example:
<div class="hp-announce header-splash">
 <div class="container">
  <!-- YOUR CUSTOM HTML HERE -->
 </div>
</div>
Homepage Content

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

Options

Default - Show Featured Listings

Browse - All Listings

No Listings - Listings will not be shown 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.1 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:

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

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.


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:

System Messaging
.awe-rt-SystemMessage
.awe-rt-ListingActionMessage
.awe-rt-ListingClosedMessage
.awe-alert-signalr
.awe-refresh-alert
.awe-rt-RefreshAlert
 
User Actions
.awe-delete-listing-link
.awe-end-early-link
.awe-category-back-link
Item Data
.awe-rt-CurrentPrice
.awe-rt-Quantity
.awe-rt-endingDTTM
.awe-rt-startingDTTM
.Bidding_Local_Price
.NumberPart
.awe-rt-BuyBox
.awe-rt-AcceptedListingActionCount
Display By Status
.awe-rt-Active
.awe-rt-Done
.awe-rt-Ended
.awe-rt-ColoredStatus
.awe-rt-hideable
.awe-rt-Hide
.awe-rt-Status
.awe-rt-ShowStatus
.awe-rt-ShowStatusActive
.awe-rt-ShowStatusPreview
v3.1 R2
.awe-rt-ShowOnStart
.awe-rt-HideOnStart
.awe-rt-ShowOnEnd
.awe-rt-HideOnEnd
Event Edition Specific
.awe-rt-eventtimelabel
.awe-rt-eventbidstatuslabel
.awe-rt-eventtimecountdown
.awe-rt-PublishCompletedMessage
.awe-rt-PublishIndicator
.awe-rt-ValidationIndicator
.awe-rt-ValidationCompletedMessage

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:
    <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 change the heading / menu text colors from white to a transparent dark grey.
Original AuctionWorx Default        Sample CSS Applied
 
<style>
.nav > li > a:hover, .nav > li > a:focus {background-color: rgba(0,0,0,.1);}
.navbar-default .navbar-text {color: rgba(0,0,0,.5);}
.navbar-default {border-bottom: 1px solid rgba(0,0,0,.2);}
.navbar-default .navbar-nav > li:hover{background-color: rgba(0,0,0,.1)}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: rgba(0,0,0,.5);}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {background-color: rgba(0,0,0,.1); color: rgba(0,0,0,.5);}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {color: rgba(0,0,0,.5);}
.navbar-default .navbar-brand:hover{background-color: rgba(0,0,0,.1)}
.navbar-default .navbar-toggle {color: rgba(0,0,0,.5);}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color: rgba(0,0,0,.1);}
.navbar-default .navbar-toggle .icon-bar {background-color: rgba(0,0,0,.5);}
.navbar-right .navbar-nav > li > a:hover {background-color: rgba(0,0,0,.1);}
.nav-secondary .nav-pills > li > a {color: rgba(0,0,0,.5); border-radius: 0;}
.nav-secondary .form-control{background-color: rgba(0,0,0,.1);color: rgba(0,0,0,.75);}
.nav-secondary .form-control::placeholder{color: rgba(0,0,0,.75);}
.nav-secondary form .btn, .nav-secondary form .btn:focus, .nav-secondary form .btn:active {background-color: rgba(0,0,0,.1);color: rgba(0,0,0,.75);}
.nav-secondary form .btn:hover{background-color: rgba(0,0,0,.35)}
@media (max-width: 767px)
{
.navbar-default .navbar-nav .open .dropdown-menu > li > a {color: rgba(0,0,0,.5);}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color: rgba(0,0,0,.5);}
.navbar-default .navbar-nav .open .dropdown-menu > li:hover{background-color: rgba(0,0,0,.1)}
}
</style>
This example CSS code will remove the outline and background color of the left hand category and region menus.
Original AuctionWorx Default        Sample CSS Applied
 
<style>
.categories * {
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.categories .panel-heading {
    background-color: transparent;
    font-weight: 700;
}
</style>
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: #000000;  
}
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>
This example CSS code will change the color of the Bootstrap "panel" headings for the categories, regions, and "my account" menu.
Original AuctionWorx Default        Sample CSS Applied
 
<style>
.categories .panel-default {
    border-color: #337ab7;
}
.categories .panel-default > .panel-heading {
    background-color:#337ab7; 
    border-color: #337ab7;
    color: #ffffff;
}
</style>
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{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.

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


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

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

Static: /Views/Home/HomePageFeaturedListings.cshtml


@Html.Partial("HomePageFeaturedListings")

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


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


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.