The Design of an Intranet Application Framework - Design Code/Templates

(Page 3 of 4 )

As you can see from the screen shot, I've not exactly exhausted the budget on the design of the page, but it is done neatly and presents the user with clear choices. This page provides the user with links to all the other applications in the intranet, through the navigation panel on the left.  The neat presentation of the page is caused by the use of CSS. The code for it is below:

/* CSS Document */
body {
   background-color: #FFFFFF;
   margin:0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 24px;
}

a {
   color: #cc0000;
   text-decoration:none;
   font-weight:bold;
}

a:hover {
   color: #990000;
   text-decoration:underline;
}

h1 {
   color: #006699;
   font-size: 14px;
   font-weight: bold;
   margin: 0px 0px 5px 0px;
   border-bottom: 2px solid #006699;
}

h2 {
   color: #006699;
   font-size: 13px;
   font-weight: bold;
   margin: 0px 0px 0px 0px;
}

td {
   font-size: 12px;
   color: #333333;
}

.bar_central {
   background-image:  url("img/bg_central.png");
   height: 28px;
   font-size: 12px;
   color: #FFFFFF;
   padding-bottom: 3px;
   background-repeat: repeat-x;
}

.bar_central a {
   color: #FFFFFF;
   font-size: 12px;
   text-decoration: none;
}

.bar_central a:hover {
   text-decoration: underline;
}

.navhead_text {
   font-size: 12px;
   color: #FFFFFF;
   padding-bottom: 2px;
   padding-left: 10px;
   background-repeat: repeat-x;
}

.navblock {
   border-left: 1px solid #006699;
   border-right: 1px solid #006699;
   border-bottom: 1px solid #CCCCCC;
   background-image: url("img/bg_nav.png");
   background-repeat: repeat-y;
   padding-left: 5px;
   height: 23px;
   color: #006699;
   text-align: left;
}

.navblock a {
   text-decoration: none;
   color: #006699;
}

.navblock a:hover {
   text-decoration: none;
   color: #FE9900;
}

.tooltip {
   color: #006699;
   font-style: italic;
   font-size: 10px;
}

.tooltipblack {
   color: #333333;
   font-style: italic;
   font-size: 10px;
}

.navholder {
   padding-left: 8px;
   padding-top: 20px;
}

.contentholder {
   padding-top: 20px;
}

.bottom {
   border-top: 1px solid #999999;
   padding-top: 10px;
   color: #ccc;
}

.subbox {
   background-color: #F0F0f0;
   border-left: 1px solid #CCCCCC;
   padding-left: 7px;
   padding-right: 7px;
   padding-top: 4px;
   border-right: 1px solid #CCCCCC;
}

#mainarea {
   margin-top: 15px;
}

.dottedline {
   background-image:  url("img/bg_horizdots.gif");
   background-repeat: repeat-x;
   padding: 0px;
   height: 1px;
}

.input100 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 100px;
   height: 20px;
}

.input200 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 200px;
   height: 20px;
}

.input300 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 300px;
   height: 20px;
}

.textarea200 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding: 4px;
   width: 200px;
   height: 125px;
}

.textarea300 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding: 4px;
   width: 300px;
   height: 250px;
}

.tableheader1 {
   background-color: #006699;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading1a {
   background-color: #B1D3ED;
}

.tableshading1b {
   background-color: #D0E2F2;
}

.tableheader2 {
   background-color: #CC0000;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading2a {
   background-color: #D59299;
}

.tableshading2b {
   background-color: #DBB5BC;
}

.tableheader3 {
   background-color: #555555;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading3a {
   background-color: #DDDDDD;
}

.tableshading3b {
   background-color: #EEEEEE;
}

.headertxt{
   font-size:24px;
   color:#FFFFFF;
   background-color:#669999;
}

.copyright{
   font-family:Tahoma, Arial, Verdana;
   text-align:right;
   font-size:11px;
}

.smallheader{
   background-color:#669999;
   font-weight:bold;
}

.tdr{
   background-color:#a4c2c2;
}

.logo {
   font:19px times new roman;
   color: #333300;
   letter-spacing:.4em;
   font-weight:bold;
}

/**divs*/

#msgblock{
   background-color:#CCCCCC;
   border: 1px solid #ccc;
   left: 659px;
   top: 7px;
   height: 342px;
   width:799px;
   overflow:scroll;
}

This style sheet is responsible for making all the pages in the intranet look smooth and neat. If you want to make a change in a particular part of the site, you just make it here and all the pages linked to it will apply the changes. You can see the advantage in this. Instead of going to each and every page on a site and making fixes, you just do it once and the changes will go throughout the site.

Next: More on Templates >>
 

More PHP Articles
More By Chris Neeman

Comments On: The Design of an Intranet Application Framework

· The article is OK, but the intranet requires more modules than stated on this...    · it's true!   >>> Post your comment now!