Overview Downloads Manual About

Chapter 03-Customization

Last modified on August 14 2014 19:35:47 UTC by teo

Styling Guide:
The most important thing to know for customizing your tCMS install is knowing what DOM elements to work with in your CSS or JS. Below are the major elements, so that you don't have to go trekking all over with the inspector to find them. Toggle their display with CSS or JS to have these appear or dissappear according to your layout preference.

Relevant Files:
index.js - Implements responsive design menuification. Some of this could be done with CSS @media (max-width: x) selectors, but not all of it, so I made the call to do all of this kind of thing in JS for simplicity. This should also be more compatible with older browsers.
css/screen.css - All the default visual styling for tCMS goes here. You'll probably be dealing with this the most.
css/print.css - The way printed tCMS pages look goes here.
css/structure.css - Enable/Disable the major container elements here - get headers, footers, sidebars, heck, even a holy grail layout if you wanted.
css/compat/* - Compatibility hacks for IE
css/avatars.css - User Icons can be set here. Starts with a default one for user "Nobody", which is who posts in the linklog when you have posted without using HTTP server auth. This is structured this way due to planned functionality down the line.

Important DOM Elements (by ID):
#topkek: The header bar at the top. Contains four divs, one of which will always be hidden: #lefttitle, #midtitle, #righttitle and #menubutton. #rightttitle transforms into #menubutton when below a certain width (set to 900px by default) and has its content dumped into #littlemenu, which is a responsive design feature that menuifies righttitle. #midtitle is disabled by default. The html content of #topkek is statically included in special/
#kontainer: Main content pane. Has three divs, #leftbar, #kontent and #rightbar. The HTML inside all these elements are imported via PHP includes. #kontent is set dynamically. #leftbar and #rightbar are static includes found in special/ and special/ respectively. #leftbar and #rightbar are disabled by default.
#footbar: A footer. Empty and disabled by default. The content of #footbar, much like #leftbar and #rightbar, is found in special/

Important DOM Classes:
.coolbutton: A customized view for buttons you want to grab attention with.