[Styles] The Style System

[Jimmie]

The Style System in THT is very complex but still very easy to use.
When you first look at the default/ theme, you will see a directory structure similar to this:

Version 0.0.0 (Private Dev Release)
/images
+-- bg.gif
+-- grad.gif
+-- logo.png
footer.tpl
header.tpl
style.css
/includes/tpl/ (Templates)

So, the images/ folder is used to store only 3 images.
bg.gif takes care of the main background.
grad.gif takes care of the main table-maintitle
logo.png takes care of the THT Logo.

footer/header.tpl's are self explanatory, so I think that its not needed to explain.
/includes/tpl/ contains templates, explained in another tutorial (coming soon)
style.css:
Probably the hardest thing and the only one that I really have to explain in detail.

Code:

body, body a {
    background:url(<IMG>bg.gif) repeat-x #F7F7F7;
    color:#333;
    font-family:"Lucida Grande", "Arial", Helvetica, sans-serif;
    font-size:11px;
}

Main Body Elements:
background: the background of the main THT page.
color: the color of the text. unless you are making a dark style, leave default.
font-family: the font family. Warning, this one is NOT the THT Default. Its a changed version, by me. Leave this alone unless you know how to mess up with it.
font-size: self explanatory, in pixels.

Code:

#wrapper {
    width:75%;
    margin:auto auto;
}

Main Wrapper. Not even I figured out what this is made for, since THT's main
content box does not match it. Probably used for the ACP.

Code:

#logo {
    width:327px;
    height:64px;
    background:url(<IMG>logo.png) no-repeat;
    margin-bottom:30px;
}

LOGO, the top one.
Using the background:, define the logo url. Leave <IMG> alone, PLEASE! Upload the logo in the /images directory of your theme.

Code:

#footer {
    clear:both;
    padding-top:10px;
    text-align:center;
}

This controls the copyright. Do not ever, ever try to hide the copyright using CSS. Jonny will eat you if you do.

Code:

#tooltip {
    background:#FDF7D5;
    border:1px solid #FADFA3;
    padding:5px;
    color:#804000;
    font-size:12px;
}

Controls the Tooltip shown when hovering the "I" images for help tooltips.

Code:

.gap {
    clear:both;
    height:10px;
}

Gap Between the logo and the main content.

Code:

.table {
    border:1px solid #CCC;
    background-color:#FFF;
    padding:2px;
}

The "tables", or if you want to call it Boxes, you can also call them boxes. These only controls their background color and the border.

Code:

.cat {
    background:url(<IMG>grad.gif) repeat-x top;
    padding:5px;
    margin:-1px;
    color:#FFF;
    font-family:"Arial", Helvetica, sans-serif;
    font-size:12px;
    text-align:left;
    font-weight:bold;
    border-bottom:1px solid #CCC;
}

The "cat", where the main title of the "table" or box is shown.

Code:

.cat a{
    vertical-align:middle;
    background:0;
}

If there are links in the maintitle of the box, what do you with them?

Code:

.text {
    color:#333;
    font-size:11px;
    font-family:"Arial", Helvetica, sans-serif;
    padding:2px;
    text-align:left;
}

Uhh...Text.

Code:

input, textarea, select {
    font-size:11px;
    color:#333;
}

Controls the input fields. Be careful, don't set widths or you will break them!

Code:

p {
    padding:0;
    margin:0;
}

The paragraphs. Jonny said "Don't need them. Don't like them." so I guess that I will give a final tip: "Don't use them."

Code:

form {
    padding:0;
    margin:0;
}

Nothing to change here, unless you want a border near all forms...

Code:

img, img a {
    border:0;
    vertical-align:middle;
}

Controls images. Leave the border alone, you will bug up Opera and Firefox 3, and then, Jimmie will eat you.

Code:

.errors {
    color:#F00;
}

The "errors", when you mistype an username, etc...

Code:

.sub {
    background: #F0F0F0;
    padding:3px;
    color:#333;
    font-family:"Arial", Helvetica, sans-serif;
    font-size:11px;
    text-align:left;
}

Sub-Boxes in Boxes. Figure out this by yourself.

This tutorial is made when the 171008 beta version was released. There shouldn't be much changes, but if you find some, drop me a PM and I will update it.

Special Thanks to Jonny, for making cP Creator THT

~Jimmie Lin,
Community Team

[Jonny]

Very informative thread there Jimmie. Nicely explained.

[Jimmie]

Updated the Tutorial

[sumit kumar]

Thanks for giving such important information.