Templates - Overriding
Overriding colors
To override the colors of the first-letter icons on the Surnames page, you should create the overrides in mytngstyle.css for the following style classes added in TNG 7.0 in genstyle.css and potentially overriden in templatestyle.css for the specific template.
.snlink {
background-color:#e0e0ff; /*same as "databack" background color - was #e0e0f7*/
}
a.snlink:hover, .snlinkact {
background-color:#000099; /*same as "fieldnameback" background color - was 333366 */
color:#fff;
}
If you are overriding the TNG colors for databack and fieldnameback, you will also need to create overrides in mytngstyle.css for the following new style classes added in TNG 7.0 in genstyle.css and potentially overriden in templatestyle.css for the specific template.
.LB_window {
background: #e0e0ff; /*same as "databack" background color - was #e0e0f7 */
border: 2px solid #000099; /*same as "fieldnameback" background color - was #333366*/
}
.LB_closeAjaxWindow{
background-color:#000099; /*same as "fieldnameback" background color - was #333366 */
}
See Template 4 Overrides for a Mod Manager config file that overrides the color scheme used by Template 4.
See also Color Schemer Online for a web site that allows you to pick colors. You can also use the TNG scripts for selecting colors.
Template 8 Example
To address a few of the aesthetic comments, I thought I'd post a few quick fixes. For those of you who don't care for the highlighting of the Latest News section, you can easily
- remove that section entirely and use the same formatting as the rest of the page or
- remove the formatting in your mytngstyle.css. To do so, you would want to add the following
lines:
.latest_news {
border: 0;
padding-top: 0px;
background-color: transparent;
}
For those of you that would rather not have the border on the left, that can be removed by adding the following lines to your mytngstyle.css:
.mainborder {
width: 0px;
background: #211a16;
}
.templatebody {
background: #211a16;
}
Aaaahhh... the beauty of cascading style sheets.Provided by Bret Rumsey on the TNG user2 list on 28 Jan 2009
Overriding Rounded Corners
| TNG version: | ≥ 9.0 |
TNG V9 added rounded corners in several locations, including the small photos and thumbnails. If you want to keep the rounded corners on the small photo next to a person's name but want to remove them from thumbnail displays on the individual page and within the browse media lists, then you will need to override the styles as shown below:
/* remove rounded corners for thumbnails, but allow for small image */
.thumb {
-moz-box-shadow: 1px 1px 1px 0px #777;
-webkit-box-shadow: 1px 1px 1px 0px #777;
box-shadow: 1px 1px 1px 0px #777;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: none;
}
.smallimg {
-moz-box-shadow: 1px 1px 1px 0px #777;
-webkit-box-shadow: 1px 1px 1px 0px #777;
box-shadow: 1px 1px 1px 0px #777;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Note that rounded corners do not display in IE 8 in the first place. The above overrides may not work for all other browsers. They appear to display the small photos with rounded corners and thumbnails without any rounded corners in SeaMonkey 2.7.1, Google Chrome and Safari for Windows 5.0.3 but not in FireFox 3.6.27. They appear to have no effect in IE 9.
