121 lines
2.8 KiB
CSS
121 lines
2.8 KiB
CSS
/*
|
|
This file is loaded after luna_core.css, so styles in this file will override
|
|
styles defined in it. Changes to this file will NOT be overwritten during
|
|
upgrades. To use this file, you must uncomment the line:
|
|
|
|
<link type="text/css" rel="stylesheet" href="<%static_url%>/<%t%>/<%theme%>.css" />
|
|
|
|
in include_common_head.html. To do this, remove <%-- and --%> lines
|
|
surrounding the above line.
|
|
|
|
Here's a quick tutorial on overriding styles. Say you want to change the
|
|
background colour of the body. Looking at luna_core.css, the colour is
|
|
defined in the rule:
|
|
|
|
body {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
color: #33332e;
|
|
background: #ffffff;
|
|
font: normal 11px tahoma, geneva, verdana, sans-serif;
|
|
}
|
|
|
|
To change the background colour of white (#ffffff) to gray (#dddddd), you would
|
|
add the following to this file:
|
|
|
|
body {
|
|
background: #dddddd;
|
|
}
|
|
|
|
If you also wanted to change the font as well as the background, then you could
|
|
use:
|
|
|
|
body {
|
|
background: #dddddd;
|
|
font: normal 12px times new roman;
|
|
}
|
|
|
|
Also note that every template's body id is assigned the template name (without
|
|
the .html extension). So if you want to change the h2 heading in the
|
|
category_list.html template, you can do this by:
|
|
|
|
#category_list h2 {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
To start you off, some sample overriding styles have been provided below. Note
|
|
that you will have to uncomment the rules for them to work.
|
|
*/
|
|
|
|
/* Logo size and image source */
|
|
/*
|
|
#logo {
|
|
width: 250px;
|
|
height: 80px;
|
|
background-image: url(images/logo.gif);
|
|
}
|
|
*/
|
|
/* If the height of your logo changes from the original, then you will probably
|
|
want to also change the vertical position of the login link */
|
|
/*
|
|
#loginbar a {
|
|
margin-top: 25px;
|
|
}
|
|
*/
|
|
|
|
/* Change width of document */
|
|
/*
|
|
#wrapper {
|
|
width: 750px;
|
|
}
|
|
*/
|
|
|
|
/* Don't want the shadows? */
|
|
/*
|
|
.shadowtop, .shadowbottom, .shadowleft, .shadowright {
|
|
background: none;
|
|
}
|
|
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
|
|
width: auto;
|
|
height: auto;
|
|
float: none;
|
|
background: none;
|
|
}
|
|
*/
|
|
|
|
/* Username highlighting (for guests, buddies, administrators, and moderators)
|
|
* can easily be changed. The defaults are shown below -- to change the display
|
|
* uncomment the section and change as desired: */
|
|
|
|
/* Administrators: */
|
|
/*
|
|
#content a.username.administrator {
|
|
color: #008000;
|
|
}
|
|
*/
|
|
/* Moderators of the forum currently being displayed: */
|
|
/*
|
|
#content a.username.moderator {
|
|
color: #008000;
|
|
}
|
|
*/
|
|
/* Users on your buddy list: */
|
|
/*
|
|
#content a.username.buddy {
|
|
color: #f07800;
|
|
}
|
|
*/
|
|
/* Guest posters: */
|
|
/*
|
|
#content a.username.anonymous {
|
|
color: #6060d0;
|
|
}
|
|
*/
|
|
/* Disabled user accounts (ONLY shows up for administrator-status users): */
|
|
/*
|
|
#content a.username.disabled {
|
|
text-decoration: line-through underline;
|
|
}
|
|
*/
|