ThemePort:step two - Revision history

Dirk: Added category

2009-05-20T10:58:29Z

Added category

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

2007-08-14T16:55:09Z

‎Step Two: Modifying the CSS

Geiss at 20:42, 13 August 2007

2007-08-13T20:42:10Z

New page

== 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]]

← Older revision		Revision as of 10:58, 20 May 2009
Line 635:		Line 635:
	Back to:[[ThemePort:step_one\|Step One - Preparation]]<br>		Back to:[[ThemePort:step_one\|Step One - Preparation]]<br>
	Next up:[[ThemePort:step_three\|Step Three - Modifying the Header]]		Next up:[[ThemePort:step_three\|Step Three - Modifying the Header]]
		+
		+
		+	[[Category:Themes]]

@@ Line 1: / Line 1: @@
 == 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:
+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'''
+<pre>Syntax
 The CSS syntax is made up of three parts: a selector, a property and a value:
@@ Line 9: / Line 9: @@
 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:
+The selector is normally the HTML element/tag you wish to define, the property is the attribute
 body {color: black}
@@ Line 17: / Line 19: @@
 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:
+If you wish to specify more than one property, you must separate each property with a semicolon.
 p {text-align:center;color:red}
@@ Line 23: / Line 26: @@
 To make the style definitions more readable, you can describe one property on each line, like this:
-p<br>
-{<br>
-text-align: center;<br>
+text-align: center;
-color: black;<br>
+color: black;
-font-family: arial;<br>
+font-family: arial;
-}<br>
-'''Grouping'''
+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:
+You can group selectors. Separate each selector with a comma. In the example below we have
 h1,h2,h3,h4,h5,h6
@@ Line 607: / Line 611: @@
 In looking through the file, I've found the following selectors that need this change:
-  * blockquote
+* blockquote
-  * form.search input.button
+* form.search input.button
-  * #wrap
+* #wrap
-  * #header
+* #header
-  * #menu
+* #menu
-  * #main h1
+* #main h1
-  * .post-footer .date
+* .post-footer .date
-  * .post-footer .comments
+* .post-footer .comments
-  * .post-footer .readmore
+* .post-footer .readmore
-  * #sidebar h1
+* #sidebar h1
-  * #sidebar ul.sidemenu li
+* #sidebar ul.sidemenu li
-  * #footer
+* #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.