| Changes to the default theme CSS that converted Wordpress Default to EasyWebDNS default |
| 1- The body background color.... initially an image repeated X and Y, we want it black and an image to repeat X only ! |
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
color: #333;
text-align: center;
}
|
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color:#000;
background-image:url(images/topbodybg.jpg);
background-repeat:repeat-x;
color: #333;
text-align: center;
}
|
| Now, the page is initially 760PX and we would like it to be 950, 800x600 is so rare and those with 800x600 are very good with the horizontal scroll, they don't mind it, it is specified in the style sheet in 2 places... page and footer |
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
} |
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 950px;
border: 1px solid #959596;
} |
#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
} |
#footer {
padding: 0;
margin: 0 auto;
width: 950px;
clear: both;
} |
Part 2: the hader
Some things don't look quite right now... they need fixing as well..., Specifically the header that has the blog name, the slogan and so on
in the HTML the header is specified with the divs
<div id="header" role="banner">
<div id="headerimg">
<h1><a href="http://localhost/blog/">Blog Title</a></h1>
<div class="description">Blog Slogan</div>
</div>
</div>
</p> |
<tr>
<td colspan="2" valign="top"> is 758px wide... we would like it to be 950-2 = 948, We would also like to change the background color of the header that is currently blue.
The header's height is a bit more than what we want as well... we will change that too... from 200 to 170
</td>
</tr>
<tr>
<td valign="top">#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 758px;
}
#headerimg {
margin: 0;
height: 200px;
width: 100%;
}
</td>
<td valign="top">#header {
background-color: #fff;
margin: 0 0 0 1px;
padding: 0;
height: 170px;
width: 948px;
}
#headerimg {
margin: 0;
height: 170px;
width: 100%;
}
</td>
</tr>
<tr>
<td colspan="2" valign="top">Then the H1 specification is pushaing the Blog title, and slogan down too much....</td>
</tr>
<tr>
<td valign="top">h1 {
padding-top: 70px;
margin: 0;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}
</td>
<td valign="top">h1 {
font-size:50px;
text-align:left;
padding-left:40px;
padding-top: 40px;
margin: 0;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: black;
}
</td>
</tr>
<tr>
<td colspan="2" valign="top">The above fixed the header title in place, now the slogan is small and in the middle, we need to fix that and the slogan is in a selector called </td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
<tr>
<td colspan="2" valign="top"> And once that is done, the backgroundS needs to be stretched to accomodate the change... kubrickheader.jpg is currently 760px × 200px and should become 950px × 170px, same applies for kubrickbg-ltr.jpg and kubrickbg-rtl.jpg, We will edit the first, and ommit the second since it does not appear in our design....</td>
</tr>
<tr>
<td valign="top">#headerimg .description {
font-size: 1.2em;
text-align: center;
}</td>
<td valign="top">#headerimg .description {
font-size: 16px;
text-align: left;
padding-left:60px;
padding-top:10px;
}</td>
</tr>
<tr>
<td colspan="2" valign="top">The left sidebar is .... almost in the center now.... we will need to change it a bit to make it stick out !</td>
</tr>
<tr>
<td valign="top">#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}</td>
<td valign="top">#sidebar
{
padding: 20px 0 10px 0;
margin-left: 700px;
width: 190px;
}</td>
</tr>
<tr>
<td colspan="2" valign="top">Now we need to stretch the Post's conent a bit to fill in much of the space between the content and the sidebar (On the main front page...)</td>
</tr>
<tr>
<td valign="top">.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}</td>
<td valign="top">.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 600px;
}</td>
</tr>
<tr>
<td colspan="2" valign="top">The footer text color needs a change, and there is really no need of a background image for a footer that is entierly black !</td>
</tr>
<tr>
<td valign="top">#footer {
background: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat top;
border: none;
}</td>
<td valign="top">#footer {
background-color:#000;
border: none;
}</td>
</tr>
<tr>
<td valign="top">#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}
#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}
</td>
<td valign="top">#footer {
padding: 0;
margin: 0 auto;
width: 950px;
clear: both;
}
#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
color:#FFF;
}
#footer p a
{
color:#999;
}
</td>
</tr>
<tr>
<td colspan="2" valign="top">On the display post page, we need to stretch the content area a bit !</td>
</tr>
<tr>
<td valign="top">.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}</td>
<td valign="top">.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 620px;
}</td>
</tr>
<tr>
<td colspan="2" valign="top">Now, we need to add a link to easywebdns beside wordpress...in footer.php</td>
</tr>
<tr>
<td valign="top">see html</td>
<td valign="top">see html</td>
</tr>
</table>
