• Overview
• Default CSS
• AuctionWorx CSS
• Adding CSS Code
•    CSS Examples
• Responsive Design
• Layout
• 3rd Party CSS Themes

Overview

Applying a new CSS template to modify the underlying visual styling of the default Bootstrap 3 framework will not affect the core functionality of the AuctionWorx Enterprise 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 Enterprise 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.

Default CSS

AuctionWorx v3 currently includes the following built-in theme options.

• Default: A simple theme with two background color options: grey and neutral/tan.
•  
• Classic: A floating theme with optional background imagery. Two content background color options available: light and dark grey.
•  
• Minima: An ultralight / white theme with low contrast borders.
•  

The Bootstrap standard color scheme for individual elements is utilized throughout each of these themes; but can be changed via CSS.

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
.menu-list
.time
.price


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.

View Sample This example CSS code will affect the website background color and the color of the secondary navigation bar.

Original AuctionWorx Default		Sample CSS Applied

Close

<style>
body {
    background-color: #f5f5f5;  
}
.nav-secondary {
    background-color: #9E0508;
}
</style>

---

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

Original AuctionWorx Default		Sample CSS Applied

Close

<style>
.listing-badge:before {
    border-color:#1874CD;
    border-right-color: transparent;
}
.listing-badge:after {
    border-color:#0D4F8B;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
</style>

---

View Sample This example CSS code will apply or replace a background image/texture.

Original AuctionWorx Default		Sample CSS Applied

Close

<style>
body {
    background: url(Content/Images/Backgrounds/cork.png) repeat;
}
</style>

.logo img {margin: 0;}

.nav-primary.navbar.navbar-default {border-radius:0;}
footer .container {border-radius:0;}

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

---

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): (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

Example Listing Detail Page Content

Show Diagram

@Html.Partial("HomePageFeaturedListings")

@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 are easily applied to AuctionWorx to change the general design of the software. [See Adding CSS Code above.]

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 Adobe Kuler / Adobe Color CC or 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.

• Overview
• Default CSS
• AuctionWorx CSS
• Adding CSS Code
• Responsive Design
• 3rd Party CSS Themes

Overview

Applying a new CSS template to modify the underlying visual styling of the default Bootstrap 3 framework will not affect the core functionality of the AuctionWorx Enterprise 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 Enterprise 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.

Default CSS

AuctionWorx currently includes three built-in options.

• Default: This theme utilizes the standard Bootstrap 3 styling.
•  
• Basic Black: A version of the Default theme with a solid black background. The software content has been modified for better visibility on a black background.
•  
• Drop Shadow: A version of the Default theme with the content enveloped in a container with the drop-shadow design attribute.
•  
• AuctionWorx Default Theme

  AuctionWorx Basic Black Theme

  AuctionWorx Drop Shadow Theme

The Bootstrap standard color scheme for individual elements is utilized throughout each of these themes; but can be changed via CSS.

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:

.awe-logo
.awe-logo-small
.awe-search-row
.awe-footer
.awe-highlight
.awe-gallery-text


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.

The following CSS removes the rounded corners from design elements; including images, buttons, and navigation.
View Sample

Standard Button Style

Button Button Button Button Button Button

---

Modified Button Style

Button Button Button Button Button Button

Close

<style>
.alert, .btn, .form-control, .img-rounded, .label, .modal-content, .nav-pills > li > a,
.nav-tabs > li > a, .thumbnail, .pagination, .panel, .validation-summary-errors, .well,
.pagination > li:first-child > a, .pagination > li:first-child > span,
.pagination > li:last-child > a, .pagination > li:last-child > span,
.input-group .form-control:first-child, .input-group-addon:first-child, 
.input-group-btn:first-child > .btn, .input-group-btn:first-child > .dropdown-toggle, 
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, 
.input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child) {
    border-radius: 0px;
}
</style>

---

This example CSS code will affect the main navigation bar, the color of text links, and the color of the ‘primary’ button class.
View Sample

Original AuctionWorx Default		Sample CSS Applied

Close

<style>
.awe-search-row {
    border: 0;
}
.navbar, .navbar-collapse {
    border: 0;
    background-color: #26ada1;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
    .navbar-default .navbar-nav > li > a:hover {
        color: #fff;
        font-weight: bold;
    }
p.navbar-text {
    color: #fff !important;
}
.btn-primary {
    color: #ffffff;
    background-color: #427e86;
    border-color: #3a6e75;
}
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #ffffff;
        background-color: #35646b;
        border-color: #25474c;
    }
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-image: none;
    }
a {
    color: #26ada1;
    text-decoration: none;
}
    a:hover,
    a:focus {
        color: #186e67;
        text-decoration: underline;
    }
</style>

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<style>
html, body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Roboto Slab', serif;}
</style>
                        

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

---

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): (Minimized and Full/Open)

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 are easily applied to AuctionWorx to change the general design of the software. [See Adding CSS Code above.]

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 Adobe Kuler / Adobe Color CC or 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.