GeeklogWiki - User contributions [en]

ThemePort:step two

2007-08-14T16:55:09Z

Geiss: /* Step Two: Modifying the CSS */

== Step Two: Modifying the CSS ==

Now that we have everything prepped, we can begin to modify the Cascading Style Sheet or CSS file for Geeklog. First, let's take a look at the different parts that make up a style declaration. The following was taken from [http://www.w3schools.com/css/css_syntax.asp www.w3schools.com] and includes additional info beyond the scope of this tutorial. It is recommended reading for anyone interested in learning how CSS works. Here's just the basics:

<pre>Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute
you wish to change, and each property can take a value. The property and value are separated by
a colon, and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

If you wish to specify more than one property, you must separate each property with a semicolon.
The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial;
}

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have
grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}
</pre>

With that in mind, basically what we will be doing is comparing two files side-by-side and overwriting '''{properties:values}''' into the same named '''selectors'''. After we conform all the common '''selectors''', we will then copy all the unique '''selectors {properties:values}''' into Geeklog's ''style.css'' file. It may seem like a lot of changes, but they go really quickly. Let's dive in! :-D
----

'''1.''' Navigate on your desktop to ''refresh/Refresh_Original/images'' and open the original stylesheet named ''Refresh.css'' with Notepad++ (right-click on the file and choose 'Edit with Notepad++' from the popup context menu). Then open ''refresh/style.css'' in the same manner.

'''2.''' In Notepad++, right-click on the second tab called ''style.css'' and choose 'Go to another View'. You will now have both files open, side by side.

'''3.''' Begin at the top of the ''Refresh.css'' file, and copy 

<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
AUTHOR: Erwin Aligam
WEBSITE: http:''www.styleshout.com/
TEMPLATE NAME: Refresh
TEMPLATE CODE: S-0002
VERSION: 1.0
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''*/
</pre>

and paste it into ''style.css'' right after 
<pre>
These are the rough rules:
- always put a ';' after the last entry
- always a linebreak before .
- always a linebreak after , ; { and }
- always a . before all classes
- two spaces indent
- no tabs
- no spaces after colons
*/
</pre>

'''4.''' Copy 
<pre>
* { margin: 0; padding: 0; }
</pre>
and paste it after 
<pre>
/* SEMANTICS '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
</pre>

'''5.''' Copy all the properties:values (everything within the { }) from the ''body'' selector 
<pre>
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
</pre>
and paste it into the ''body'' selector in ''style.css'', '''overwriting''' its previous properties:values. So it looks like this:
<pre>
body {
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
</pre>

'''6.''' Copy 
<pre>
a, a:visited {
text-decoration: none;
color: #4F82CB;
background: inherit;
}
a:hover {
color: #4EBF37;
background: inherit;
}
</pre>
and paste it '''overwriting''':
<pre>
a:link {
background:transparent;
color:#0000FF;
}
a:visited {
background:transparent;
color:#800080
}
a:hover {
background:transparent;
color:#008000
}
a:active {
background:transparent;
color:#FF0000
}
</pre>
We also will change the look of the non-ul links as well by changing:
<pre>
a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
color:#000000;
background:transparent;
text-decoration:none;
}
</pre>
to:
<pre>
a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
color:#FFF;
background:inherit;
text-decoration:none;
}
</pre>
The above change will be used in step one of the next section, [[geeklog:development:themes:porting_a_theme:step_three|Step Three - Modifying the Header]].

'''7.''' Copy
<pre>
h1, h2, h3 {
font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
font-weight: Bold;
}
h1 {
font-size: 120%;
}
h2 {
font-size: 110%;
text-transform: uppercase;
color: #88ac0b;
}
h3 {
font-size: 110%;
color: #666666;
}
</pre>
and paste it '''overwriting''':
<pre>
h1 {
font-size:125%;
}
h2 {
font-size:100%;
}
h3 {
font-size:100%;
margin:0px;
}
</pre>

'''8.''' Copy
<pre>
img {
border: 2px solid #CCC;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
</pre>
and paste it '''overwriting''':
<pre>
img {
border:0;
}
</pre>
'''9.''' Copy
<pre>
h1, h2, h3, p {
padding: 10px;
margin: 0;
}
</pre>
and paste it '''after''':
<pre>
h3 {
font-size: 110%;
color: #666666;
}
</pre>

'''10.''' Copy
<pre>
ul, ol {
margin: 5px 20px;
padding: 0 20px;
color: #88ac0b;
}
ul span, ol span {
color: #666666;
}
</pre>
and paste it '''after''':
<pre>
select {
color:#000000;
font-size:.9em;
}
</pre>

'''11.''' Copy
<pre>
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 10px;
padding: 0 0 0 28px;
border: 1px solid #f2f2f2;
background: #FAFAFA url(quote.gif) no-repeat 5px 5px;
}
</pre>
and paste it '''after''':
<pre>
body {
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
</pre>

'''12.''' Copy
<pre>
form {
margin:10px; padding: 0 5px;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
</pre>
and paste it '''overwriting''':
<pre>
form {
margin-top:5px;
margin-bottom:5px;
}
</pre>

'''13.''' Copy
<pre>
label {
display:block;
font-weight:bold;
margin:5px 0;
}
</pre>
and paste it '''after''':
<pre>
input,
submit,
td {
color:#000000;
}
</pre>

'''14.''' Copy
<pre>
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
</pre>
and paste it '''overwriting''':
<pre>
input {
font-size:.9em;
}
</pre>
and then '''delete''' the 'input,' out of the line:
<pre>
input,
submit,
td {
color:#000000;
}
</pre>

'''15.''' Copy
<pre>
textarea {
width:400px;
padding:2px;
font-family: Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
</pre>
and paste it '''overwriting''':
<pre>
textarea {
color:#000000;
font-family:arial,sans-serif,verdana,tahoma,helvetica;
}
</pre>

'''16.''' Copy
<pre>
input.button {
margin: 0;
font: bolder 12px Arial, Sans-serif;
border: 1px solid #CCC;
padding: 2px 3px;
background: #FFF;
color: #88ac0b;
}
</pre>
and paste it '''after''':
<pre>
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
</pre>

'''17.''' Copy
<pre>
form.search {
position: absolute;
top: 35px; right: 25px;
background: transparent;
border: none;
}
form.search input.textbox {
margin: 0; padding: 1px 2px;
width: 120px;
background: #FFF;
color: #333;
}
form.search input.button {
background: #CCC url(headerbg.gif) repeat-x;
color: #333;
border: none;
width: 70px; height: 21px;
}
</pre>
and paste it '''after''':
<pre>
form fieldset div.notes p.last {
margin:0em;
padding-bottom:5px;
}
</pre>

'''18.''' Finally copy the remaining code in ''Refresh.css'':
<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
#wrap {
width: 820px;
background: #CCC url(content.jpg) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 0 auto;
}
#header {
width: 820px;
position: relative;
height: 106px;
background: #CCC url(header.jpg) no-repeat center top;
padding: 0;
font-size: 14px;
color: #FFF;
}
#header h1#logo-text {
position: absolute;
margin: 0; padding: 0;
font: bolder 3.3em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
color: #FFF;
text-transform: none;

/* change the values of top and left to adjust the position of the logo*/
top: 28px; left: 50px;
}
#header h2#slogan {
position: absolute;
margin: 0; padding: 0;
font: normal .8em 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;

/* change the values of top and left to adjust the position of the slogan*/
top: 74px; left: 58px;
}

/* Menu */
#menu {
clear: both;
margin: 0; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
height: 26px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 8px;
color: #FFF;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ECECEC;
color: #333;
}
#menu ul li#current a {
background-color: #FFF;
color: #333;
}

/* Main Column */
#main {
float: right;
width: 72%;
padding: 0; margin: 0;
}
#main h1 {
margin-top: 10px;
font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
color: #88ac0b;
padding: 5px 0 5px 25px;
border-bottom: 1px solid #EFF0F1;
background: #FFF url(square-green.png) no-repeat 3px 50%;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 10px 0 10px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */
#sidebar {
float: left;
width: 26.5%;
padding: 0; margin: 0;
}
#sidebar h1 {
margin-top: 10px;
padding: 5px 0 5px 10px;
font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
background: #EEF0F1 url(headerbg.gif) repeat-x left bottom;
border: 1px solid #EFF0F1;
}
#sidebar .left-box {
border: 1px solid #EFF0F1;
margin: 0 0 5px 0;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 3px 0 8px 0; padding: 0;
text-decoration: none;
}
#sidebar ul.sidemenu li {
border-bottom: 1px solid #EFF0F1;
background: url(go.gif) no-repeat 5px 5px;
padding: 2px 0 2px 25px;
margin: 0 2px;
}
#sidebar ul.sidemenu a {
font-weight: bolder;
text-decoration: none;
background-image: none;
}

/* Footer */
#footer {
color: #666666;
background: #CCC url(footer.jpg) no-repeat center top;
clear: both;
width: 820px;
height: 55px;
text-align: center;
font-size: 92%;
}
#footer a { text-decoration: none; }

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
.gray { color: #CCC; }
</pre>
and paste it at the bottom of ''style.css'' '''after''':
<pre>
.poll-vote,
.poll-vote-results {
background:transparent;
color:#000000;
font-size:smaller;
}
</pre>
It is also a good idea to change:
<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
</pre>
to:
<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
REFRESH SPECIFIC LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
</pre>

'''19.''' Yay! We're almost done! Now we just need to go through the stylesheet and make sure our images are being pulled from the right directory. For the original Refresh theme, the images and stylesheet were both located in the ''images'' directory. When the author referenced images, he wrote the URL apprpriately. For Geeklog however, the stylesheet is one directory above the ''images'' directory, so we need to modify the CSS taking this change into account.

So, where you see a reference to an image file such as a .jpg or a .gif, like this:
<pre>
background: #FAFAFA url(quote.gif) no-repeat 5px 5px;
</pre>
change it to:
<pre>
background: #FAFAFA url(images/quote.gif) no-repeat 5px 5px;
</pre>
to include the proper ''images'' directory.

In looking through the file, I've found the following selectors that need this change:
* blockquote
* form.search input.button
* #wrap
* #header
* #menu
* #main h1
* .post-footer .date
* .post-footer .comments
* .post-footer .readmore
* #sidebar h1
* #sidebar ul.sidemenu li
* #footer

'''20.''' For this particular theme, we really don't need to adjust the colors of the Plugin specific CSS, as they closely match the blue color in the header and other gray elements (funny how that worked out, isn't it? ...as if it was planned that way!;-)) For another theme though, we might want to make some edits. The easiest way I've found is to write down the dominant, reoccurring colors, and do a Find/Replace operation in Notepad++. Make sure you highlight only the Plugin portion of the ''style.css'' file, then in Notepad++, click the "Search" menu and choose "Replace". In the dialog box, enter the color code you want to change, and what you want to replace it with, and check the "In selection" box and click on the "Replace All" button. Presto! Repeat this for all the colors you want to change.

'''21.''' Now, save your new ''style.css'' file (shame on you if you haven't been saving along the way by hitting Ctrl+S after each change!) and upload it to your website, overwriting the existing file located in the ''(public_html)/layout/refresh/'' directory. In your browser, navigate to your site and refresh the homepage (remember to clear the browser cache, as mentioned above.)

{{geeklog:development:themes:porting_a_theme:refresh_after_css_only_edit.png?250 }}

Looks kind of funky, huh? :-\ Don't worry, thus far we've only changed the stylesheet. Now we need to make some changes to a few ''.thtml'' files to update the layout and reference our newly changed '''selectors {properties:values}'''

Back to:[[ThemePort:step_one|Step One - Preparation]] 
Next up:[[ThemePort:step_three|Step Three - Modifying the Header]]

ThemePort:step two

2007-08-13T20:42:10Z

Geiss:

== Step Two: Modifying the CSS ==

Now that we have everything prepped, we can begin to modify the Cascading Style Sheet or CSS file for Geeklog. First, let's take a look at the different parts that make up a style declaration. The following was taken from [http:''www.w3schools.com/css/css_syntax.asp www.w3schools.com] and includes additional info beyond the scope of this tutorial. It is recommended reading for anyone interested in learning how CSS works. Here's just the basics:

<pre>'''Syntax'''

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p 
{ 
text-align: center; 
color: black; 
font-family: arial; 
} 

'''Grouping'''

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}
</pre>

With that in mind, basically what we will be doing is comparing two files side-by-side and overwriting '''{properties:values}''' into the same named '''selectors'''. After we conform all the common '''selectors''', we will then copy all the unique '''selectors {properties:values}''' into Geeklog's ''style.css'' file. It may seem like a lot of changes, but they go really quickly. Let's dive in! :-D
----

'''1.''' Navigate on your desktop to ''refresh/Refresh_Original/images'' and open the original stylesheet named ''Refresh.css'' with Notepad++ (right-click on the file and choose 'Edit with Notepad++' from the popup context menu). Then open ''refresh/style.css'' in the same manner.

'''2.''' In Notepad++, right-click on the second tab called ''style.css'' and choose 'Go to another View'. You will now have both files open, side by side.

'''3.''' Begin at the top of the ''Refresh.css'' file, and copy 

<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
AUTHOR: Erwin Aligam
WEBSITE: http:''www.styleshout.com/
TEMPLATE NAME: Refresh
TEMPLATE CODE: S-0002
VERSION: 1.0
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''*/
</pre>

and paste it into ''style.css'' right after 
<pre>
These are the rough rules:
- always put a ';' after the last entry
- always a linebreak before .
- always a linebreak after , ; { and }
- always a . before all classes
- two spaces indent
- no tabs
- no spaces after colons
*/
</pre>

'''4.''' Copy 
<pre>
* { margin: 0; padding: 0; }
</pre>
and paste it after 
<pre>
/* SEMANTICS '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
</pre>

'''5.''' Copy all the properties:values (everything within the { }) from the ''body'' selector 
<pre>
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
</pre>
and paste it into the ''body'' selector in ''style.css'', '''overwriting''' its previous properties:values. So it looks like this:
<pre>
body {
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
</pre>

'''6.''' Copy 
<pre>
a, a:visited {
text-decoration: none;
color: #4F82CB;
background: inherit;
}
a:hover {
color: #4EBF37;
background: inherit;
}
</pre>
and paste it '''overwriting''':
<pre>
a:link {
background:transparent;
color:#0000FF;
}
a:visited {
background:transparent;
color:#800080
}
a:hover {
background:transparent;
color:#008000
}
a:active {
background:transparent;
color:#FF0000
}
</pre>
We also will change the look of the non-ul links as well by changing:
<pre>
a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
color:#000000;
background:transparent;
text-decoration:none;
}
</pre>
to:
<pre>
a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
color:#FFF;
background:inherit;
text-decoration:none;
}
</pre>
The above change will be used in step one of the next section, [[geeklog:development:themes:porting_a_theme:step_three|Step Three - Modifying the Header]].

'''7.''' Copy
<pre>
h1, h2, h3 {
font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
font-weight: Bold;
}
h1 {
font-size: 120%;
}
h2 {
font-size: 110%;
text-transform: uppercase;
color: #88ac0b;
}
h3 {
font-size: 110%;
color: #666666;
}
</pre>
and paste it '''overwriting''':
<pre>
h1 {
font-size:125%;
}
h2 {
font-size:100%;
}
h3 {
font-size:100%;
margin:0px;
}
</pre>

'''8.''' Copy
<pre>
img {
border: 2px solid #CCC;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
</pre>
and paste it '''overwriting''':
<pre>
img {
border:0;
}
</pre>
'''9.''' Copy
<pre>
h1, h2, h3, p {
padding: 10px;
margin: 0;
}
</pre>
and paste it '''after''':
<pre>
h3 {
font-size: 110%;
color: #666666;
}
</pre>

'''10.''' Copy
<pre>
ul, ol {
margin: 5px 20px;
padding: 0 20px;
color: #88ac0b;
}
ul span, ol span {
color: #666666;
}
</pre>
and paste it '''after''':
<pre>
select {
color:#000000;
font-size:.9em;
}
</pre>

'''11.''' Copy
<pre>
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 10px;
padding: 0 0 0 28px;
border: 1px solid #f2f2f2;
background: #FAFAFA url(quote.gif) no-repeat 5px 5px;
}
</pre>
and paste it '''after''':
<pre>
body {
background: #CCCCCC;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
</pre>

'''12.''' Copy
<pre>
form {
margin:10px; padding: 0 5px;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
</pre>
and paste it '''overwriting''':
<pre>
form {
margin-top:5px;
margin-bottom:5px;
}
</pre>

'''13.''' Copy
<pre>
label {
display:block;
font-weight:bold;
margin:5px 0;
}
</pre>
and paste it '''after''':
<pre>
input,
submit,
td {
color:#000000;
}
</pre>

'''14.''' Copy
<pre>
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
</pre>
and paste it '''overwriting''':
<pre>
input {
font-size:.9em;
}
</pre>
and then '''delete''' the 'input,' out of the line:
<pre>
input,
submit,
td {
color:#000000;
}
</pre>

'''15.''' Copy
<pre>
textarea {
width:400px;
padding:2px;
font-family: Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
</pre>
and paste it '''overwriting''':
<pre>
textarea {
color:#000000;
font-family:arial,sans-serif,verdana,tahoma,helvetica;
}
</pre>

'''16.''' Copy
<pre>
input.button {
margin: 0;
font: bolder 12px Arial, Sans-serif;
border: 1px solid #CCC;
padding: 2px 3px;
background: #FFF;
color: #88ac0b;
}
</pre>
and paste it '''after''':
<pre>
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
</pre>

'''17.''' Copy
<pre>
form.search {
position: absolute;
top: 35px; right: 25px;
background: transparent;
border: none;
}
form.search input.textbox {
margin: 0; padding: 1px 2px;
width: 120px;
background: #FFF;
color: #333;
}
form.search input.button {
background: #CCC url(headerbg.gif) repeat-x;
color: #333;
border: none;
width: 70px; height: 21px;
}
</pre>
and paste it '''after''':
<pre>
form fieldset div.notes p.last {
margin:0em;
padding-bottom:5px;
}
</pre>

'''18.''' Finally copy the remaining code in ''Refresh.css'':
<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
#wrap {
width: 820px;
background: #CCC url(content.jpg) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 0 auto;
}
#header {
width: 820px;
position: relative;
height: 106px;
background: #CCC url(header.jpg) no-repeat center top;
padding: 0;
font-size: 14px;
color: #FFF;
}
#header h1#logo-text {
position: absolute;
margin: 0; padding: 0;
font: bolder 3.3em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
color: #FFF;
text-transform: none;

/* change the values of top and left to adjust the position of the logo*/
top: 28px; left: 50px;
}
#header h2#slogan {
position: absolute;
margin: 0; padding: 0;
font: normal .8em 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;

/* change the values of top and left to adjust the position of the slogan*/
top: 74px; left: 58px;
}

/* Menu */
#menu {
clear: both;
margin: 0; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
height: 26px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 8px;
color: #FFF;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ECECEC;
color: #333;
}
#menu ul li#current a {
background-color: #FFF;
color: #333;
}

/* Main Column */
#main {
float: right;
width: 72%;
padding: 0; margin: 0;
}
#main h1 {
margin-top: 10px;
font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
color: #88ac0b;
padding: 5px 0 5px 25px;
border-bottom: 1px solid #EFF0F1;
background: #FFF url(square-green.png) no-repeat 3px 50%;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 10px 0 10px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */
#sidebar {
float: left;
width: 26.5%;
padding: 0; margin: 0;
}
#sidebar h1 {
margin-top: 10px;
padding: 5px 0 5px 10px;
font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
color: #555;
background: #EEF0F1 url(headerbg.gif) repeat-x left bottom;
border: 1px solid #EFF0F1;
}
#sidebar .left-box {
border: 1px solid #EFF0F1;
margin: 0 0 5px 0;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 3px 0 8px 0; padding: 0;
text-decoration: none;
}
#sidebar ul.sidemenu li {
border-bottom: 1px solid #EFF0F1;
background: url(go.gif) no-repeat 5px 5px;
padding: 2px 0 2px 25px;
margin: 0 2px;
}
#sidebar ul.sidemenu a {
font-weight: bolder;
text-decoration: none;
background-image: none;
}

/* Footer */
#footer {
color: #666666;
background: #CCC url(footer.jpg) no-repeat center top;
clear: both;
width: 820px;
height: 55px;
text-align: center;
font-size: 92%;
}
#footer a { text-decoration: none; }

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
.gray { color: #CCC; }
</pre>
and paste it at the bottom of ''style.css'' '''after''':
<pre>
.poll-vote,
.poll-vote-results {
background:transparent;
color:#000000;
font-size:smaller;
}
</pre>
It is also a good idea to change:
<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
</pre>
to:
<pre>
/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
REFRESH SPECIFIC LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/
</pre>

'''19.''' Yay! We're almost done! Now we just need to go through the stylesheet and make sure our images are being pulled from the right directory. For the original Refresh theme, the images and stylesheet were both located in the ''images'' directory. When the author referenced images, he wrote the URL apprpriately. For Geeklog however, the stylesheet is one directory above the ''images'' directory, so we need to modify the CSS taking this change into account.

So, where you see a reference to an image file such as a .jpg or a .gif, like this:
<pre>
background: #FAFAFA url(quote.gif) no-repeat 5px 5px;
</pre>
change it to:
<pre>
background: #FAFAFA url(images/quote.gif) no-repeat 5px 5px;
</pre>
to include the proper ''images'' directory.

In looking through the file, I've found the following selectors that need this change:
* blockquote
* form.search input.button
* #wrap
* #header
* #menu
* #main h1
* .post-footer .date
* .post-footer .comments
* .post-footer .readmore
* #sidebar h1
* #sidebar ul.sidemenu li
* #footer

'''20.''' For this particular theme, we really don't need to adjust the colors of the Plugin specific CSS, as they closely match the blue color in the header and other gray elements (funny how that worked out, isn't it? ...as if it was planned that way!;-)) For another theme though, we might want to make some edits. The easiest way I've found is to write down the dominant, reoccurring colors, and do a Find/Replace operation in Notepad++. Make sure you highlight only the Plugin portion of the ''style.css'' file, then in Notepad++, click the "Search" menu and choose "Replace". In the dialog box, enter the color code you want to change, and what you want to replace it with, and check the "In selection" box and click on the "Replace All" button. Presto! Repeat this for all the colors you want to change.

'''21.''' Now, save your new ''style.css'' file (shame on you if you haven't been saving along the way by hitting Ctrl+S after each change!) and upload it to your website, overwriting the existing file located in the ''(public_html)/layout/refresh/'' directory. In your browser, navigate to your site and refresh the homepage (remember to clear the browser cache, as mentioned above.)

{{geeklog:development:themes:porting_a_theme:refresh_after_css_only_edit.png?250 }}

Looks kind of funky, huh? :-\ Don't worry, thus far we've only changed the stylesheet. Now we need to make some changes to a few ''.thtml'' files to update the layout and reference our newly changed '''selectors {properties:values}'''

Back to:[[ThemePort:step_one|Step One - Preparation]] 
Next up:[[ThemePort:step_three|Step Three - Modifying the Header]]

ThemePort:step one

2007-08-13T20:20:05Z

Geiss:

== Step One: Preparation ==

First, we need to prepare the new theme using Geeklog's default ''professional'' theme as a starting point. This will make sure we have all the ''.thtml'' files we need so Geeklog won't give us errors unexpectedly.

'''1.''' Download the theme to your desktop, then double click it to unzip it. You will now have a folder named ''Refresh''. Inside will be the files ''LICENSE.txt'', ''index.html'', and an ''images'' folder. Change the name of the folder from ''Refresh'' to ''Refresh_Original''.

'''2.''' Click on ''index.html'' to open it in your browser, and take a few minutes to browse around the layout. Often times, the designer will leave information about the design in the layout itself. In the Refresh theme for instance, the author notifies us that the design is released under the terms of the Creative Commons license, and asks that a link to his site be included in the credits. He then goes on to show how lists, images, and other elements will be styled. Another good idea is to click on View/Page Source from Firefox's main menu. This will open another window displaying the source code for ''index.html''. Familiarize yourself with the different sections of code, and what they refer to in the rendered layout. This will make it easier to visualize when you are copying changes into Geeklog's ''.thtml'' files.

'''3.''' Grab a fresh copy of the [http://www.geeklog.net/filemgmt/viewcat.php?cid=8 Geeklog install archive] and extract the ''public_html/layout/professional'' directory to your desktop. Place the ''Refresh_Original'' directory inside the ''professional'' directory and then rename the folder from ''professional'' to ''refresh''.

'''4.''' Copy all the image files from the 'Refresh_Original/images' directory and paste them in the ''refresh/images'' directory.

'''5.''' Upload via FTP this new ''refresh'' directory, and all its contents to your website's ''(site_root)/layout/'' directory. You should now have at least 2 folders in the ''layout'' directory: ''professional'', and ''refresh''.

'''6.''' In your browser, login to your website and navigate to ''(site_root)/usersettings.php?mode=edit'', click on the ''Layout & Language'' tab, and select the ''refresh'' theme and save your changes.

At this point, you now have your new theme in place and are ready to start modifications. For you only, your site should now look exactly like a default Geeklog theme install (if it was different previously). We do this so that you are free to make changes without other users readily seeing your work-in-progress. From now on, make sure to clear the browser cache each time you upload changes, so that the browser will load the newly changed content (in Firefox, hold the control key while clicking the Reload Current Page button.)

Back to: [[ThemePort|Porting a Theme]] 
Next up:[[ThemePort:step_two|Step Two - Modifying the CSS]]

ThemePort:step one

2007-08-13T20:19:34Z

Geiss:

== Step One: Preparation ==

First, we need to prepare the new theme using Geeklog's default ''professional'' theme as a starting point. This will make sure we have all the ''.thtml'' files we need so Geeklog won't give us errors unexpectedly.

'''1.''' Download the theme to your desktop, then double click it to unzip it. You will now have a folder named ''Refresh''. Inside will be the files ''LICENSE.txt'', ''index.html'', and an ''images'' folder. Change the name of the folder from ''Refresh'' to ''Refresh_Original''.

'''2.''' Click on ''index.html'' to open it in your browser, and take a few minutes to browse around the layout. Often times, the designer will leave information about the design in the layout itself. In the Refresh theme for instance, the author notifies us that the design is released under the terms of the Creative Commons license, and asks that a link to his site be included in the credits. He then goes on to show how lists, images, and other elements will be styled. Another good idea is to click on View/Page Source from Firefox's main menu. This will open another window displaying the source code for ''index.html''. Familiarize yourself with the different sections of code, and what they refer to in the rendered layout. This will make it easier to visualize when you are copying changes into Geeklog's ''.thtml'' files.

'''3.''' Grab a fresh copy of the [http://www.geeklog.net/filemgmt/viewcat.php?cid=8 Geeklog install archive] and extract the ''public_html/layout/professional'' directory to your desktop. Place the ''Refresh_Original'' directory inside the ''professional'' directory and then rename the folder from ''professional'' to ''refresh''.

'''4.''' Copy all the image files from the 'Refresh_Original/images' directory and paste them in the ''refresh/images'' directory.

'''5.''' Upload via FTP this new ''refresh'' directory, and all its contents to your website's ''(site_root)/layout/'' directory. You should now have at least 2 folders in the ''layout'' directory: ''professional'', and ''refresh''.

'''6.''' In your browser, login to your website and navigate to ''(site_root)/usersettings.php?mode=edit'', click on the '''''Layout & Language''''' tab, and select the ''refresh'' theme and save your changes.

At this point, you now have your new theme in place and are ready to start modifications. For you only, your site should now look exactly like a default Geeklog theme install (if it was different previously). We do this so that you are free to make changes without other users readily seeing your work-in-progress. From now on, make sure to clear the browser cache each time you upload changes, so that the browser will load the newly changed content (in Firefox, hold the control key while clicking the Reload Current Page button.)

Back to: [[ThemePort|Porting a Theme]] 
Next up:[[ThemePort:step_two|Step Two - Modifying the CSS]]

ThemePort:step one

2007-08-13T20:16:13Z

Geiss:

== Step One: Preparation ==

First, we need to prepare the new theme using Geeklog's default 'professional' theme as a starting point. This will make sure we have all the '.thtml' files we need so Geeklog won't give us errors unexpectedly.

'''1.''' Download the theme to your desktop, then double click it to unzip it. You will now have a folder named 'Refresh'. Inside will be the files 'LICENSE.txt', 'index.html', and an 'images' folder. Change the name of the folder from 'Refresh' to 'Refresh_Original'.

'''2.''' Click on 'index.html' to open it in your browser, and take a few minutes to browse around the layout. Often times, the designer will leave information about the design in the layout itself. In the Refresh theme for instance, the author notifies us that the design is released under the terms of the Creative Commons license, and asks that a link to his site be included in the credits. He then goes on to show how lists, images, and other elements will be styled. Another good idea is to click on View/Page Source from Firefox's main menu. This will open another window displaying the source code for 'index.html'. Familiarize yourself with the different sections of code, and what they refer to in the rendered layout. This will make it easier to visualize when you are copying changes into Geeklog's '.thtml' files.

'''3.''' Grab a fresh copy of the [http://www.geeklog.net/filemgmt/viewcat.php?cid=8 Geeklog install archive] and extract the 'public_html/layout/professional' directory to your desktop. Place the 'Refresh_Original' directory inside the 'professional' directory and then rename the folder from 'professional' to 'refresh'.

'''4.''' Copy all the image files from the 'Refresh_Original/images' directory and paste them in the 'refresh/images' directory.

'''5.''' Upload via FTP this new 'refresh' directory, and all its contents to your website's '(site_root)/layout'/ directory. You should now have at least 2 folders in the 'layout' directory: 'professional', and 'refresh'.

'''6.''' In your browser, login to your website and navigate to '(site_root)/usersettings.php?mode=edit', click on the 'Layout & Language' tab, and select the 'refresh' theme and save your changes.

At this point, you now have your new theme in place and are ready to start modifications. For you only, your site should now look exactly like a default Geeklog theme install (if it was different previously). We do this so that you are free to make changes without other users readily seeing your work-in-progress. From now on, make sure to clear the browser cache each time you upload changes, so that the browser will load the newly changed content (in Firefox, hold the control key while clicking the Reload Current Page button.)

Back to: [[ThemePort|Porting a Theme]] 
Next up:[[ThemePort:step_two|Step Two - Modifying the CSS]]

ThemePort

2007-08-13T20:12:23Z

Geiss:

== Porting a Theme ==

Sometimes, it is easier to ''not'' re-invent the wheel. There are many free open-source website templates available that you can quickly adapt to Geeklog. Here are a couple of places to start looking:

::* Open Source Web Design - http://www.oswd.org/
::* Open Web Design - http://www.openwebdesign.org/
::* Liquid Designs - http://www.cssliquid.com/
::* StyleShout - http://www.styleshout.com/

Most of the themes found at the sites above are released under the [[http://www.fsf.org/licensing/licenses/gpl.html|GNU public license]], or one of its variants. In a nutshell, it means you are free to use, modify, and re-distribute the code, provided the GNU license is passed along unchanged, with whatever code changes you make. Many times, a theme author will only ask that you leave a link in the site footer, crediting them with the design.

Having said the above, remember that imitation is the sincerest form of flattery. If you find a site design that you like that is //not// open-source, contact the site admin or author and ask for permission to port their design to Geeklog. Most will gladly grant you permission, and some might even offer some pointers or insights on their designs.

[[Image:refresh.png|right]]Below is a tutorial on porting a pure XHTML/CSS based web design to Geeklog. I have chosen a 2 column, fixed width theme called "Refresh" found at [http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml www.openwebdesign.org] to be our example. The reasons behind this decision are:

::* It already has a familiar left column & story column structure similar to that of Geeklog.
::* It is a "neutral" template, which means that it can be used on a wide variety of websites.
::* It is clean and minimalist, which makes it both user and designer friendly.

At times, site administrators or theme designers fall into the trap of designing a theme solely for one site or purpose. A wise designer will create with multiple uses in mind. This not only allows you to re-use bits of code across multiple designs, but also allows others to easily re-purpose your design to meet their needs. In many cases, making just a few color changes in the //style.css// file, and an image replacement, will be all that is needed. As you port other themes, keep these principles in mind.

For purposes of this tutorial, we will assume you are using Windows XP with [http://www.mozilla.com/en-US/firefox/ Firefox 2] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [http://www.gllabs.org/filemgmt/index.php?id=141 here].

We will break up the tutorial over the following pages:

:* [[ThemePort:step_one|Step One - Preparation]]
:* [[ThemePort:step_two|Step Two - Modifying the CSS]]
:* [[ThemePort:step_three|Step Three - Modifying the Header]]
:* [[ThemePort:step_four|Step Four - Modifying the Body]]
:* [[ThemePort:step_five|Step Five - Modifying the Footer]]
:* [[ThemePort:step_six|Step Six - Cleaning Up]]

What are we waiting for? Let's get started! :-D

ThemePort

2007-08-13T20:11:39Z

Geiss:

== Porting a Theme ==

Sometimes, it is easier to 'not' re-invent the wheel. There are many free open-source website templates available that you can quickly adapt to Geeklog. Here are a couple of places to start looking:

::* Open Source Web Design - http://www.oswd.org/
::* Open Web Design - http://www.openwebdesign.org/
::* Liquid Designs - http://www.cssliquid.com/
::* StyleShout - http://www.styleshout.com/

Most of the themes found at the sites above are released under the [[http://www.fsf.org/licensing/licenses/gpl.html|GNU public license]], or one of its variants. In a nutshell, it means you are free to use, modify, and re-distribute the code, provided the GNU license is passed along unchanged, with whatever code changes you make. Many times, a theme author will only ask that you leave a link in the site footer, crediting them with the design.

Having said the above, remember that imitation is the sincerest form of flattery. If you find a site design that you like that is //not// open-source, contact the site admin or author and ask for permission to port their design to Geeklog. Most will gladly grant you permission, and some might even offer some pointers or insights on their designs.

[[Image:refresh.png|right]]Below is a tutorial on porting a pure XHTML/CSS based web design to Geeklog. I have chosen a 2 column, fixed width theme called "Refresh" found at [http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml www.openwebdesign.org] to be our example. The reasons behind this decision are:

::* It already has a familiar left column & story column structure similar to that of Geeklog.
::* It is a "neutral" template, which means that it can be used on a wide variety of websites.
::* It is clean and minimalist, which makes it both user and designer friendly.

At times, site administrators or theme designers fall into the trap of designing a theme solely for one site or purpose. A wise designer will create with multiple uses in mind. This not only allows you to re-use bits of code across multiple designs, but also allows others to easily re-purpose your design to meet their needs. In many cases, making just a few color changes in the //style.css// file, and an image replacement, will be all that is needed. As you port other themes, keep these principles in mind.

For purposes of this tutorial, we will assume you are using Windows XP with [http://www.mozilla.com/en-US/firefox/ Firefox 2] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [http://www.gllabs.org/filemgmt/index.php?id=141 here].

We will break up the tutorial over the following pages:

:* [[ThemePort:step_one|Step One - Preparation]]
:* [[ThemePort:step_two|Step Two - Modifying the CSS]]
:* [[ThemePort:step_three|Step Three - Modifying the Header]]
:* [[ThemePort:step_four|Step Four - Modifying the Body]]
:* [[ThemePort:step_five|Step Five - Modifying the Footer]]
:* [[ThemePort:step_six|Step Six - Cleaning Up]]

What are we waiting for? Let's get started! :-D

User:Geiss

2007-08-13T19:58:58Z

Geiss:

== Geiss ==

Use the [http://www.geeklog.net/profiles.php?uid=7982 web form] on geeklog.net to email me.

ThemePort

2007-08-13T19:55:40Z

Geiss:

== Porting a Theme ==

Sometimes, it is easier to //not// re-invent the wheel. There are many free open-source website templates available that you can quickly adapt to Geeklog. Here are a couple of places to start looking:

::* Open Source Web Design - http://www.oswd.org/
::* Open Web Design - http://www.openwebdesign.org/
::* Liquid Designs - http://www.cssliquid.com/
::* StyleShout - http://www.styleshout.com/

Most of the themes found at the sites above are released under the [[http://www.fsf.org/licensing/licenses/gpl.html|GNU public license]], or one of its variants. In a nutshell, it means you are free to use, modify, and re-distribute the code, provided the GNU license is passed along unchanged, with whatever code changes you make. Many times, a theme author will only ask that you leave a link in the site footer, crediting them with the design.

Having said the above, remember that imitation is the sincerest form of flattery. If you find a site design that you like that is //not// open-source, contact the site admin or author and ask for permission to port their design to Geeklog. Most will gladly grant you permission, and some might even offer some pointers or insights on their designs.

[[Image:refresh.png|right]]Below is a tutorial on porting a pure XHTML/CSS based web design to Geeklog. I have chosen a 2 column, fixed width theme called "Refresh" found at [http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml www.openwebdesign.org] to be our example. The reasons behind this decision are:

::* It already has a familiar left column & story column structure similar to that of Geeklog.
::* It is a "neutral" template, which means that it can be used on a wide variety of websites.
::* It is clean and minimalist, which makes it both user and designer friendly.

At times, site administrators or theme designers fall into the trap of designing a theme solely for one site or purpose. A wise designer will create with multiple uses in mind. This not only allows you to re-use bits of code across multiple designs, but also allows others to easily re-purpose your design to meet their needs. In many cases, making just a few color changes in the //style.css// file, and an image replacement, will be all that is needed. As you port other themes, keep these principles in mind.

For purposes of this tutorial, we will assume you are using Windows XP with [http://www.mozilla.com/en-US/firefox/ Firefox 2] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [http://www.gllabs.org/filemgmt/index.php?id=141 here].

We will break up the tutorial over the following pages:

:* [[ThemePort:step_one|Step One - Preparation]]
:* [[ThemePort:step_two|Step Two - Modifying the CSS]]
:* [[ThemePort:step_three|Step Three - Modifying the Header]]
:* [[ThemePort:step_four|Step Four - Modifying the Body]]
:* [[ThemePort:step_five|Step Five - Modifying the Footer]]
:* [[ThemePort:step_six|Step Six - Cleaning Up]]

What are we waiting for? Let's get started! :-D

ThemePort

2007-08-13T19:37:04Z

Geiss:

== Porting a Theme ==

Sometimes, it is easier to //not// re-invent the wheel. There are many free open-source website templates available that you can quickly adapt to Geeklog. Here are a couple of places to start looking:

::* Open Source Web Design - http://www.oswd.org/
::* Open Web Design - http://www.openwebdesign.org/
::* Liquid Designs - http://www.cssliquid.com/
::* StyleShout - http://www.styleshout.com/

Most of the themes found at the sites above are released under the [[http://www.fsf.org/licensing/licenses/gpl.html|GNU public license]], or one of its variants. In a nutshell, it means you are free to use, modify, and re-distribute the code, provided the GNU license is passed along unchanged, with whatever code changes you make. Many times, a theme author will only ask that you leave a link in the site footer, crediting them with the design.

Having said the above, remember that imitation is the sincerest form of flattery. If you find a site design that you like that is //not// open-source, contact the site admin or author and ask for permission to port their design to Geeklog. Most will gladly grant you permission, and some might even offer some pointers or insights on their designs.

[[Image:refresh.png|right]]Below is a tutorial on porting a pure XHTML/CSS based web design to Geeklog. I have chosen a 2 column, fixed width theme called "Refresh" found at [[http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml|www.openwebdesign.org]] to be our example. The reasons behind this decision are:

::* It already has a familiar left column & story column structure similar to that of Geeklog.
::* It is a "neutral" template, which means that it can be used on a wide variety of websites.
::* It is clean and minimalist, which makes it both user and designer friendly.

At times, site administrators or theme designers fall into the trap of designing a theme solely for one site or purpose. A wise designer will create with multiple uses in mind. This not only allows you to re-use bits of code across multiple designs, but also allows others to easily re-purpose your design to meet their needs. In many cases, making just a few color changes in the //style.css// file, and an image replacement, will be all that is needed. As you port other themes, keep these principles in mind.

For purposes of this tutorial, we will assume you are using Windows XP with [[http://www.mozilla.com/en-US/firefox/|Firefox 2]] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [[http://notepad-plus.sourceforge.net/uk/site.htm|Notepad++]], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [[http://www.gllabs.org/filemgmt/index.php?id=141|here]].

We will break up the tutorial over the following pages:

:* [[ThemePort:step_one|Step One - Preparation]]
:* [[ThemePort:step_two|Step Two - Modifying the CSS]]
:* [[ThemePort:step_three|Step Three - Modifying the Header]]
:* [[ThemePort:step_four|Step Four - Modifying the Body]]
:* [[ThemePort:step_five|Step Five - Modifying the Footer]]
:* [[ThemePort:step_six|Step Six - Cleaning Up]]

What are we waiting for? Let's get started! :-D

ThemePort

2007-08-13T19:35:24Z

Geiss:

== Porting a Theme ==

Sometimes, it is easier to //not// re-invent the wheel. There are many free open-source website templates available that you can quickly adapt to Geeklog. Here are a couple of places to start looking:

::* Open Source Web Design - http://www.oswd.org/
::* Open Web Design - http://www.openwebdesign.org/
::* Liquid Designs - http://www.cssliquid.com/
::* StyleShout - http://www.styleshout.com/

Most of the themes found at the sites above are released under the [[http://www.fsf.org/licensing/licenses/gpl.html|GNU public license]], or one of its variants. In a nutshell, it means you are free to use, modify, and re-distribute the code, provided the GNU license is passed along unchanged, with whatever code changes you make. Many times, a theme author will only ask that you leave a link in the site footer, crediting them with the design.

Having said the above, remember that imitation is the sincerest form of flattery. If you find a site design that you like that is //not// open-source, contact the site admin or author and ask for permission to port their design to Geeklog. Most will gladly grant you permission, and some might even offer some pointers or insights on their designs.

Below is a tutorial on porting a pure XHTML/CSS based web design to Geeklog. I have chosen a 2 column, fixed width theme called "Refresh" found at [[http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml|www.openwebdesign.org]] to be our example. The reasons behind this decision are:

[[Image:refresh.png|thumb|right]]

::* It already has a familiar left column & story column structure similar to that of Geeklog.
::* It is a "neutral" template, which means that it can be used on a wide variety of websites.
::* It is clean and minimalist, which makes it both user and designer friendly.

At times, site administrators or theme designers fall into the trap of designing a theme solely for one site or purpose. A wise designer will create with multiple uses in mind. This not only allows you to re-use bits of code across multiple designs, but also allows others to easily re-purpose your design to meet their needs. In many cases, making just a few color changes in the //style.css// file, and an image replacement, will be all that is needed. As you port other themes, keep these principles in mind.

For purposes of this tutorial, we will assume you are using Windows XP with [[http://www.mozilla.com/en-US/firefox/|Firefox 2]] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [[http://notepad-plus.sourceforge.net/uk/site.htm|Notepad++]], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [[http://www.gllabs.org/filemgmt/index.php?id=141|here]].

We will break up the tutorial over the following pages:

:* [[ThemePort:step_one|Step One - Preparation]]
:* [[ThemePort:step_two|Step Two - Modifying the CSS]]
:* [[ThemePort:step_three|Step Three - Modifying the Header]]
:* [[ThemePort:step_four|Step Four - Modifying the Body]]
:* [[ThemePort:step_five|Step Five - Modifying the Footer]]
:* [[ThemePort:step_six|Step Six - Cleaning Up]]

What are we waiting for? Let's get started! :-D

File:Refresh.png

2007-08-13T19:26:59Z

Geiss: