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
#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 Block
#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 { }