SharePoint 2010: Branding Step by Step III
Change The Design Layout Into Working HTML and CSS
If your branding assignment is other than just simple modifications to the out-of-the-box SharePoint branding, it’s a good idea to make a working HTML version of the design layout.
Before that we need to slice the images from the design layout in a way that it can be used in the working HTML.
Slicing Design Layout
Why we need to slice design layout. One important fact is to reduce the loading time of the working HTML, by optimizing repeating or stretch area with single small image to fill a larger space, and to creating mouse events with clickable image areas like navigation.
Most meaningful fact is most of the image areas can be reproduce using CSS styles. Below figure shows slice tool
Select the slice tool and start working with Logo and title area like below figure shows.
Then double-click the sliced area, a popup will appear named slice options and start filling the form like below figure shows.
Next is Icons and Search bar, this are background transparent images for this we need to hide the background colours with effects thereafter set slicing like below figure shows.
Now comes the tricky part repeating areas like navigation and background areas of body, footer and working environment. Only select small part of the image like bellow figure shows.
Now we have sliced our design layout and ready to save, from file menu select save for web and devices option. Important information we need to save our transparent images as PNG and others as JPEG. Below Figure shows detail view of image saving method.
Building Up The Working HTML and CSS
We can start the working with HTML by setting up the folder structure. We need two folders named CSS and images and Place the entire images inside the image folder. After that we can start coding.
Now we need to create an index.html file and styles.css file under CSS folder.
Below I have provided the index.html code. This code has been done to the standards of W3 XHTML and only used DIV tags structuring.
Copy and paste the code below:
Now creating style.css file this code also given below
/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: Helvetica, Calibri, Arial, sans-serif;
background: #9c9c9c url(../images/background.jpg) center no-repeat;
height: 100%;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
table { border-spacing: 0; }
acronym { cursor: help; }
html { font-size: 100.01%;overflow-y: scroll; }
body { font-size: 62.5%; line-height: 1.2; }
input, button, select, textarea { font-size: 100%; }
input.text, textarea { padding: 1px 2px; font-size: 100%; font-family: Arial, sans-serif; }
.submit, input[type="submit"], button { cursor/**/: /**/pointer; font-family: Arial, sans-serif; }
select { font-size: 100%; font-family: Arial, sans-serif; }
select > option { padding: 0 5px 0 3px; }
.alR { text-align: right; }
.alC { text-align: center; }
.hide { display: none; }
.clear { clear: both; }
.ir { position: relative; overflow: hidden; }
.ir span { position: absolute; width: 100%; height: 100%; left: 0; top: 0; text-indent: -1000em; }
a:link, a:visited { text-decoration: none; cursor/**/: /**/pointer; }
a:link:hover, a:visited:hover { text-decoration: underline; }
#header:after, #wrap:after, #content:after, #footer:after
{ content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
a:link, a:visited {
color: #6099ba;
}
a:visited {
}
a:link:hover, a:visited:hover {
color: #1971c4;}
html { height: 100%; }
#page {
width: 984px;
margin: 0 auto;
min-height: 100%;
font-size: 1.2em;
color: #5a5a5a;
background: #FFFFFF
}
#header {
background: #e7e7e7 url() repeat-x 0 0;
position: relative;
height:112px;
z-index: 10;
}
#logo {
float: left;
background: url(../images/sharepoint-SL-logo.png) no-repeat 0 0;
height:90px;
width:151px;
}
#title {
float: left;
background: url(../images/top-title.png) no-repeat 0 0;
height:90px;
width:581px;
}
#top-right{
float: right;
margin:20px 0 0 0;
}
#top-right li{ float:left}
h1.homeicon{
background:url(../images/home-icon.png) no-repeat;
height:32px; width:35px;
}
h1.homeicon:hover{
background:url(../images/home-icon.png) no-repeat 100% -32px;
height:32px; width:35px;
}
h1.tagicon{
background:url(../images/tag-icon.png) no-repeat;
height:32px; width:37px;
}
h1.tagicon:hover{
background:url(../images/tag-icon.png) 100% -32px;
height:32px; width:37px;
}
h1.emailicon{
background: url(../images/email-icon.png) no-repeat;
height:32px; width:28px;
}
h1.emailicon:hover{
background: url(../images/email-icon.png) 100% -32px;
height:32px; width:28px;
}
#search {
float: right;
padding: 2px 20px 0 0;
clear:both;
}
#search label {
display: none;
}
#search input.text {
float: left;
width: 140px;
height: 20px;
font-size: 91.67%;
color: #555555;
padding: 5px 10px 5px 8px;
border: none;
background: url(../images/search-bar.png) no-repeat 0 0;
}
#search input.submit {
float: left;
width: 24px;
height: 22px;
margin-top: 4px;
border: none;
background: url(../images/search-icon.png) no-repeat 100% 0;
}
#search input.submit:hover {
background-position: 100% -21px;
}
#MainNav {
clear: both;
position: relative;
background: #5c5c5c url(../images/top-nav.jpg) 100% 0%;
height: 40px;
padding: 0 15px;
}
#MainNav li {
float: left;
margin: 0 5px 0 0;
}
#MainNav li a:link, #MainNav li a:visited {
color: #fff;
display: block;
float: left;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
padding:0 20px;
text-decoration: none;
z-index: 2;
}
#MainNav li a:hover {
color: #ffbe00;
background:url(../images/top-nav.jpg) 100% -41px;
}
.home #wrap {
font-size: 91.67%;
padding: 20px 20px 0;
background: url(../images/home-body-background.jpg) repeat-x;
}
#wrap {
font-size: 91.67%;
padding: 20px 20px 0;
background: url(../images/body-background.jpg) repeat-x;
}
#wrap p {
line-height: 1.54;
margin: 0 0 6px;
}
.GWP{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 0 0 20px;
width:600px;
height:225px;
overflow: auto;
float:left;
}
.NSM{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 0 0 20px 20px;
width:320px;
height:225px;
overflow: auto;
float:left;
}
.LN{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 30px 0 20px;
width:390px;
height:410px;
overflow: auto;
float:left;
padding: 10px;
}
.LN h2 {
font-size: 154.54%;
font-weight: normal;
line-height: 1.23;
color: ##767373;
margin: 0 0 .5em;
}
.LN ul,
.LN ol {
line-height: 1.54;
list-style: disc;
margin: 0 0 1em 2em;
}
.LN ol {
list-style: decimal;
}
#news {
}
#news ul {
list-style: none;
margin: 0 0 .5em;
}
#news li {
margin: 0 0 1em;
}
#news a:link, #news a:visited {
}
#news a:link .date, #news a:visited .date {
display: block;
color: #6e6d6e;
}
#news a:link .title, #news a:visited .title {
display: block;
font-weight: bold;
color: #252327;
}
#news a:link:hover .title, #news a:visited:hover .title {
text-decoration: underline;
}
.calendar{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 30px 0 20px 20px;
width:510px;
height:430px;
overflow: auto;
float:left;
}
/* old style*/
#copyright {
background-position: bottom;
background:url(../images/bg_footer_02.jpg) repeat-x;
height: 20px;
color:#CCC;
margin-left: auto;
padding-top: 13px;
clear: both;
padding-left:40px;
margin-right: auto;
font-size:80%;
}
#copyright a:hover{
color:#FFF;
}
#footer_content {
height: 90px;
line-height:15px;
margin-right: auto;
margin-left: auto;
padding: 15px 40px 5px;
background: url(../images/bg_footer_01.jpg) repeat-x;
}
.Orange {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fe9901;
line-height: 16px;
}
a.footer_gray {
color: #bbbbbb;
text-decoration: none;
}
a.footer_gray:hover {
color: #7F7C7C;
text-decoration: none;
}
#content h1 {
color: #767373;
font-size: 236.36%;
font-weight: normal;
line-height: 1;
margin: 0 0 0.3em;
Now you guys may get some problems that can be sorted out alone. Please change the image name according to CSS file.
Yes! We’re done with the backup works now. Next step will be setting up a SharePoint environment for branding. I hope next post will be more interesting than ongoing posts.
If your branding assignment is other than just simple modifications to the out-of-the-box SharePoint branding, it’s a good idea to make a working HTML version of the design layout.
Before that we need to slice the images from the design layout in a way that it can be used in the working HTML.
Slicing Design Layout
Why we need to slice design layout. One important fact is to reduce the loading time of the working HTML, by optimizing repeating or stretch area with single small image to fill a larger space, and to creating mouse events with clickable image areas like navigation.
Most meaningful fact is most of the image areas can be reproduce using CSS styles. Below figure shows slice tool
Select the slice tool and start working with Logo and title area like below figure shows.
Then double-click the sliced area, a popup will appear named slice options and start filling the form like below figure shows.
Next is Icons and Search bar, this are background transparent images for this we need to hide the background colours with effects thereafter set slicing like below figure shows.
Now comes the tricky part repeating areas like navigation and background areas of body, footer and working environment. Only select small part of the image like bellow figure shows.
Now we have sliced our design layout and ready to save, from file menu select save for web and devices option. Important information we need to save our transparent images as PNG and others as JPEG. Below Figure shows detail view of image saving method.
Building Up The Working HTML and CSS
We can start the working with HTML by setting up the folder structure. We need two folders named CSS and images and Place the entire images inside the image folder. After that we can start coding.
Now we need to create an index.html file and styles.css file under CSS folder.
Below I have provided the index.html code. This code has been done to the standards of W3 XHTML and only used DIV tags structuring.
Copy and paste the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SharePoint Sri Lanka</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="home">
<div id="page">
<div id="header">
<h1 id="logo"></h1>
<h1 id="title"></h1>
<div id="top-right">
<ul>
<li><a href="#"><h1 class="homeicon"></h1></a></li>
<li><a href="#"><h1 class="tagicon"></h1></a></li>
<li><a href="#"><h1 class="emailicon"></h1></a></li>
</ul>
<form action="#" method="post" id="search">
<p>
<label for="q">Search</label>
<input type="text" class="text" name="q" id="q" value="Search"/>
<input type="submit" class="submit" value=" "/>
</p>
</form>
</div>
<div id="MainNav">
<ul>
<li><a href="#" class="sub">Home</a></li>
<li><a href="#" class="sub">IT Departments</a></li>
<li><a href="#" class="sub">Services</a></li>
<li><a href="#" class="sub"> WIKI</a></li>
<li><a href="#" class="sub">Blog</a></li>
</ul>
</div>
</div>
<div id="wrap">
<div id="content">
<h1>Our Company</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut est. Cras tempus justo ut tortor. Integer arcu. Quisque pede. Nunc sapien. Fusce urna. Fusce libero tellus, varius a, placerat imperdiet, auctor eu, dolor. Quisque ut velit. Cras nonummy rutrum tortor. Suspendisse egestas. Vestibulum sagittis eros et sem.</p>
</div>
<div class="LN">
<h2>Calendar</h2>
<div id="news">
<ul>
<li>
<a href="#">
<span class="date">December 10, 2009 ›</span>
<span class="title">Lorem ipsum dolor sit amet holoda, consectetur adipiscing elit.</span>
</a>
</li>
</ul>
<p class="more"><a href="#">View More Stories ›</a></p>
</div>
</div>
<div class="calendar">
</div>
</div>
<div id="footer">
<div id="footer_content">
<ul style="float: left; padding-left: 0px;">
<li style="padding-bottom: 10px;" class="Orange">GENERAL</li>
<li><a class="footer_gray" href="#">Circular</a></li>
<li><a class="footer_gray" href="#">Cost Centers</a></li>
<li><a class="footer_gray" href="#">ESS</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Policies</a></li>
<li><a class="footer_gray" href="#">Holidays</a></li>
<li><a class="footer_gray" href="#">Organizational Chart</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Site Map</a></li>
<li><a class="footer_gray" href="#">Security Policy</a></li>
<li><a class="footer_gray" href="#">Phone Directory</a></li>
</ul>
<ul style="float: left; padding-left: 50px;">
<li style="padding-bottom: 10px;" ;="" class="Orange">OTHER</li>
<li><a class="footer_gray" href="#">Forms</a></li>
<li><a class="footer_gray" href="#">Noticeboard</a></li>
<li><a class="footer_gray" href="#">Events</a></li>
</ul>
<ul style="float: left; padding-left: 50px;">
<li style="padding-bottom: 10px;" ;="" class="Orange">DOWNLOADS</li>
<li><a class="footer_gray" href="#">Groups</a></li>
<li><a class="footer_gray" href="#">Other Applications</a></li>
<li><a class="footer_gray" href="#">Drivers</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Software Updates</a></li>
<li><a class="footer_gray" href="#">Microsoft</a></li>
<li><a class="footer_gray" href="#">HNB Applications</a></li>
</ul>
</div>
<div id="copyright">© 2011 khalam azad.</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SharePoint Sri Lanka</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="home">
<div id="page">
<div id="header">
<h1 id="logo"></h1>
<h1 id="title"></h1>
<div id="top-right">
<ul>
<li><a href="#"><h1 class="homeicon"></h1></a></li>
<li><a href="#"><h1 class="tagicon"></h1></a></li>
<li><a href="#"><h1 class="emailicon"></h1></a></li>
</ul>
<form action="#" method="post" id="search">
<p>
<label for="q">Search</label>
<input type="text" class="text" name="q" id="q" value="Search"/>
<input type="submit" class="submit" value=" "/>
</p>
</form>
</div>
<div id="MainNav">
<ul>
<li><a href="#" class="sub">Home</a></li>
<li><a href="#" class="sub">IT Departments</a></li>
<li><a href="#" class="sub">Services</a></li>
<li><a href="#" class="sub"> WIKI</a></li>
<li><a href="#" class="sub">Blog</a></li>
</ul>
</div>
</div>
<div id="wrap">
<div id="content">
<h1>Our Company</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut est. Cras tempus justo ut tortor. Integer arcu. Quisque pede. Nunc sapien. Fusce urna. Fusce libero tellus, varius a, placerat imperdiet, auctor eu, dolor. Quisque ut velit. Cras nonummy rutrum tortor. Suspendisse egestas. Vestibulum sagittis eros et sem.</p>
</div>
<div class="LN">
<h2>Calendar</h2>
<div id="news">
<ul>
<li>
<a href="#">
<span class="date">December 10, 2009 ›</span>
<span class="title">Lorem ipsum dolor sit amet holoda, consectetur adipiscing elit.</span>
</a>
</li>
</ul>
<p class="more"><a href="#">View More Stories ›</a></p>
</div>
</div>
<div class="calendar">
</div>
</div>
<div id="footer">
<div id="footer_content">
<ul style="float: left; padding-left: 0px;">
<li style="padding-bottom: 10px;" class="Orange">GENERAL</li>
<li><a class="footer_gray" href="#">Circular</a></li>
<li><a class="footer_gray" href="#">Cost Centers</a></li>
<li><a class="footer_gray" href="#">ESS</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Policies</a></li>
<li><a class="footer_gray" href="#">Holidays</a></li>
<li><a class="footer_gray" href="#">Organizational Chart</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Site Map</a></li>
<li><a class="footer_gray" href="#">Security Policy</a></li>
<li><a class="footer_gray" href="#">Phone Directory</a></li>
</ul>
<ul style="float: left; padding-left: 50px;">
<li style="padding-bottom: 10px;" ;="" class="Orange">OTHER</li>
<li><a class="footer_gray" href="#">Forms</a></li>
<li><a class="footer_gray" href="#">Noticeboard</a></li>
<li><a class="footer_gray" href="#">Events</a></li>
</ul>
<ul style="float: left; padding-left: 50px;">
<li style="padding-bottom: 10px;" ;="" class="Orange">DOWNLOADS</li>
<li><a class="footer_gray" href="#">Groups</a></li>
<li><a class="footer_gray" href="#">Other Applications</a></li>
<li><a class="footer_gray" href="#">Drivers</a></li>
</ul>
<ul style="float: left; padding-left: 50px; padding-top: 23px;">
<li><a class="footer_gray" href="#">Software Updates</a></li>
<li><a class="footer_gray" href="#">Microsoft</a></li>
<li><a class="footer_gray" href="#">HNB Applications</a></li>
</ul>
</div>
<div id="copyright">© 2011 khalam azad.</div>
</div>
</div>
</body>
</html>
Now creating style.css file this code also given below
/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: Helvetica, Calibri, Arial, sans-serif;
background: #9c9c9c url(../images/background.jpg) center no-repeat;
height: 100%;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
table { border-spacing: 0; }
acronym { cursor: help; }
html { font-size: 100.01%;overflow-y: scroll; }
body { font-size: 62.5%; line-height: 1.2; }
input, button, select, textarea { font-size: 100%; }
input.text, textarea { padding: 1px 2px; font-size: 100%; font-family: Arial, sans-serif; }
.submit, input[type="submit"], button { cursor/**/: /**/pointer; font-family: Arial, sans-serif; }
select { font-size: 100%; font-family: Arial, sans-serif; }
select > option { padding: 0 5px 0 3px; }
.alR { text-align: right; }
.alC { text-align: center; }
.hide { display: none; }
.clear { clear: both; }
.ir { position: relative; overflow: hidden; }
.ir span { position: absolute; width: 100%; height: 100%; left: 0; top: 0; text-indent: -1000em; }
a:link, a:visited { text-decoration: none; cursor/**/: /**/pointer; }
a:link:hover, a:visited:hover { text-decoration: underline; }
#header:after, #wrap:after, #content:after, #footer:after
{ content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
a:link, a:visited {
color: #6099ba;
}
a:visited {
}
a:link:hover, a:visited:hover {
color: #1971c4;}
html { height: 100%; }
#page {
width: 984px;
margin: 0 auto;
min-height: 100%;
font-size: 1.2em;
color: #5a5a5a;
background: #FFFFFF
}
#header {
background: #e7e7e7 url() repeat-x 0 0;
position: relative;
height:112px;
z-index: 10;
}
#logo {
float: left;
background: url(../images/sharepoint-SL-logo.png) no-repeat 0 0;
height:90px;
width:151px;
}
#title {
float: left;
background: url(../images/top-title.png) no-repeat 0 0;
height:90px;
width:581px;
}
#top-right{
float: right;
margin:20px 0 0 0;
}
#top-right li{ float:left}
h1.homeicon{
background:url(../images/home-icon.png) no-repeat;
height:32px; width:35px;
}
h1.homeicon:hover{
background:url(../images/home-icon.png) no-repeat 100% -32px;
height:32px; width:35px;
}
h1.tagicon{
background:url(../images/tag-icon.png) no-repeat;
height:32px; width:37px;
}
h1.tagicon:hover{
background:url(../images/tag-icon.png) 100% -32px;
height:32px; width:37px;
}
h1.emailicon{
background: url(../images/email-icon.png) no-repeat;
height:32px; width:28px;
}
h1.emailicon:hover{
background: url(../images/email-icon.png) 100% -32px;
height:32px; width:28px;
}
#search {
float: right;
padding: 2px 20px 0 0;
clear:both;
}
#search label {
display: none;
}
#search input.text {
float: left;
width: 140px;
height: 20px;
font-size: 91.67%;
color: #555555;
padding: 5px 10px 5px 8px;
border: none;
background: url(../images/search-bar.png) no-repeat 0 0;
}
#search input.submit {
float: left;
width: 24px;
height: 22px;
margin-top: 4px;
border: none;
background: url(../images/search-icon.png) no-repeat 100% 0;
}
#search input.submit:hover {
background-position: 100% -21px;
}
#MainNav {
clear: both;
position: relative;
background: #5c5c5c url(../images/top-nav.jpg) 100% 0%;
height: 40px;
padding: 0 15px;
}
#MainNav li {
float: left;
margin: 0 5px 0 0;
}
#MainNav li a:link, #MainNav li a:visited {
color: #fff;
display: block;
float: left;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
padding:0 20px;
text-decoration: none;
z-index: 2;
}
#MainNav li a:hover {
color: #ffbe00;
background:url(../images/top-nav.jpg) 100% -41px;
}
.home #wrap {
font-size: 91.67%;
padding: 20px 20px 0;
background: url(../images/home-body-background.jpg) repeat-x;
}
#wrap {
font-size: 91.67%;
padding: 20px 20px 0;
background: url(../images/body-background.jpg) repeat-x;
}
#wrap p {
line-height: 1.54;
margin: 0 0 6px;
}
.GWP{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 0 0 20px;
width:600px;
height:225px;
overflow: auto;
float:left;
}
.NSM{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 0 0 20px 20px;
width:320px;
height:225px;
overflow: auto;
float:left;
}
.LN{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 30px 0 20px;
width:390px;
height:410px;
overflow: auto;
float:left;
padding: 10px;
}
.LN h2 {
font-size: 154.54%;
font-weight: normal;
line-height: 1.23;
color: ##767373;
margin: 0 0 .5em;
}
.LN ul,
.LN ol {
line-height: 1.54;
list-style: disc;
margin: 0 0 1em 2em;
}
.LN ol {
list-style: decimal;
}
#news {
}
#news ul {
list-style: none;
margin: 0 0 .5em;
}
#news li {
margin: 0 0 1em;
}
#news a:link, #news a:visited {
}
#news a:link .date, #news a:visited .date {
display: block;
color: #6e6d6e;
}
#news a:link .title, #news a:visited .title {
display: block;
font-weight: bold;
color: #252327;
}
#news a:link:hover .title, #news a:visited:hover .title {
text-decoration: underline;
}
.calendar{
background: #fff url(../images/object-background.jpg) repeat-x;
border: 1px solid #D1D1D1;
margin: 30px 0 20px 20px;
width:510px;
height:430px;
overflow: auto;
float:left;
}
/* old style*/
#copyright {
background-position: bottom;
background:url(../images/bg_footer_02.jpg) repeat-x;
height: 20px;
color:#CCC;
margin-left: auto;
padding-top: 13px;
clear: both;
padding-left:40px;
margin-right: auto;
font-size:80%;
}
#copyright a:hover{
color:#FFF;
}
#footer_content {
height: 90px;
line-height:15px;
margin-right: auto;
margin-left: auto;
padding: 15px 40px 5px;
background: url(../images/bg_footer_01.jpg) repeat-x;
}
.Orange {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fe9901;
line-height: 16px;
}
a.footer_gray {
color: #bbbbbb;
text-decoration: none;
}
a.footer_gray:hover {
color: #7F7C7C;
text-decoration: none;
}
#content h1 {
color: #767373;
font-size: 236.36%;
font-weight: normal;
line-height: 1;
margin: 0 0 0.3em;
Now you guys may get some problems that can be sorted out alone. Please change the image name according to CSS file.
Yes! We’re done with the backup works now. Next step will be setting up a SharePoint environment for branding. I hope next post will be more interesting than ongoing posts.
Comments
Post a Comment