Styling
The style of a Topincs store can be customized to satisfy
corporate identity requirements. This is achieved by creating a
HTML and CSS file in STORE_DIR/style and by setting
some configuration parameters to activate the customization.
Customizing the page header
Admin reference
The file STORE_DIR/style/header.html may hold a
custom header which will be drawn if the store configuration
parameter custom.header has the value
true. To get started one can copy the content of
the file TOPINCS_HOME/php/page/default_header.html.
If you want to use a logo in the page header, put the image file
yourlogo.png into STORE_DIR/style and
use it like this:
<img src="*/yourlogo.png" />CSS customization
Admin reference
The general style of some or all pages of a Topincs store can be
altered by introducing new CSS rules in the file
STORE_DIR/style/custom.css. These only take effect,
if the store configuration parameter custom.css is
set to true.
CSS can be used to create a completely different look for a
Topincs store, but it can be used as well to hide certain
interface elements by setting display to
none. The following example CSS creates a
completely different look for a Topincs store:
/* In general, change the background color and the font. */
body {
background-color: white;
font-family: Georgia, serif;
font-size: 0.9em;
}
/* Make header background white also. */
#header {
background-color: white;
}
/* Change the background-color of the left header box. */
#header .left-1 a {
background-color: #8f3b3f;
border: solid 1px #8f3b3f;
}
/* Change the background-color of the right header box. */
#header .left-2 a {
background-color: #d0d0d0;
border: solid 1px #d0d0d0;
}
/* Do not display the search form in the header. */
#header .search-form {
display: none;
}
/* Mark the bottom of the content because of white background. */
#content {
border-bottom: solid 1px black;
}
/* But not on the start page. */
#start-page #content {
border-bottom: none;
}
/* Black for components on the start page because of white background. */
#start-page #components {
border-top: solid 1px black;
}
#start-page #components a {
color: black;
}