Styling your install with custom CSS

Tender allows you to customize the appearance with your own custom CSS. This allows you to use your own company colors, logos, and design elements in your Tender.

Getting Started

To apply custom styling to your Tender, you'll need to be familiar with CSS.

Body class names

Each page on tender has it's own unique class name. This class name defines the section and the specific page. This page (the article view in the FAQs section) will have a class that looks like this: <body class="page-faqs_show section-faqs"> You can see that there is a class page-faqs_show that allows you to target this specific page, or the section class section-faqs that allows you to target the whole section.

#logo a  { }

Super Header

#superheader { }
#superheader a {  }
#superheader a:hover { }
#superheader ul.gnav li { }
#header { }
#header #search { }

Admin Functions

#adminbar, .admin-functions { }
.admin-functions ul.actions li { }
.admin-functions ul.actions li a { }
.admin-functions ul.actions li a:hover { }
.admin-functions ul.actions li a em { }
.sticky_queue .toggle { }
.sticky-queue-box { }
#footer, .footerbox, #article-show div.sidebar ul.articles {  }
body.logged-in .footerbox { }
.footerbox table.listing td { }
.footerbox table.listing td a { }
.footerbox table.listing td a:hover { }
.footerbox table.listing { }
.footerbox h2 { }

Home page buttons

.bigbutton-newissue { }
div.three-bigbuttons { }
div.three-bigbuttons div h2 a { }
div.three-bigbuttons div h2 a:hover { }
.bigbuttons .last { }
.columns .column.bigbutton { }

Form buttons

.gbutton { }
.gbutton:focus { }
.gbutton:hover { }
.gbutton:active { }