How and Where to Do the Change in Customizable Templates
Images
Decorate Images and Header Images can be changed at the following area <div id="*****"><img href=".... /></div>, where *** is:
- img_left_top: set the image with width="27px" height="134px" (For bothe Home and sub page)
- img_top_header_sub: set the image with width="647px" height="63px"
- img_right_large: set the image with width="100px" height="550px" (For Home page can be change to fit the quick link height)
- img_top_right: set the image with width="" height="63px"
- img_top_header: set the image with width="647px" height="75px"
- img_news: set the image with width="110px" height="86px"
see
Using New Templates for detail (the menu or text images are been replaces by text). You can use your own images according to the requirement described above or contact Public Interfaces Committee (
see
detail).
Font Color
The following text color are defined in style sheet by default or by color scheme (yul_01.css etc.), you can change any one of them in your own style sheet.
- #content, #content p, #content a, div a {color: #369;} content text color for home page is set to blue for all color scheme
- #footer {color: #8eba60;} the default footer color, appear in /, the link color is set through color scheme
- The following text color are set throught color scheme style sheet yul_01.css, .....
- #qlink a {color: #663;} for palette01home home page's quick link link color
- #qlink h2 {color: #39c;} for home page quick link title color
- #content h2 {color: #996;} home page content title color which were image for previous template
- #footer a {color: #996; } Footer link color
- #top_strip_mainlink a {color: #663;} main link color on the top, which used to be images
- #top_strip_mainlink a.active {color: #369;} define the current active page color on the main link
- #sublink {color: #663;} text color for top submenu area
- #sublink a {color: #663;} text color in top submenu area when it is a link
- #sublink a.active {color: #369;} text color in top submenu area when it is an active link (mostly is the current paage)
Font Size
Font size in body is an related one, home page has more controlled fonts for the following areas, web developer might want to add more font style for their sub page:
- #copyright { font-size: 0.9em;} copy announce in footer area has smaller font
- #footer, #footer a {
font-size: 10px;} set footer menu with fix font size
- home page #content has sub title set as h2 { font-size: 1em; } same as text content
- home page #qlink h2 { font-size: 1em; } title set size same as content, but with samller link menu #qlink p { font-size: 0.9em;}
- sub page #top_strip_mainlink { font-size: 11px; } fix size to fit the menu link area
- sub page sublink a { font-size: 0.9em;} smaller font in sub menu
Background Color
The following areas has background color according to their color scheme:
- body background, #img_left_top for left column
- home page #top_strip for top horizontal decorate strip
- home page #qlink for the left quick link area
- sub page #top_strip_mainlink for main menu
Layout
Most layout are controlled by <div> tag with id, can't be changed. But you might want to change some of the followings:
- #img_left_top { height: 134px;}, the default image height. Background color
using leftcolumn*.gif image, same as body background image . In order
to change to your own color, you need create a background image with
width 27px, add this to yourstyle.css:
body, #img_left_top {
background: url(/your_department/Templates/leftcolumn.gif) repeat-y left top
scroll;
}
or add the color at yourstyle.css and change height for individual page:
#img_left_top {
background-color: #966; height: 850px; } /* set default height */
#img_left_top {
height: 1000px; } */ change height for individual page */
- home page #qlink { height: 475px; } may increase if you have more quick links, you might want to increase same amount of image height in #img_right_large { height: 550px; }
- sub page #content_s { width: 100%; } set the content extent to full screen horizontally, you can set to fix width.
