Difference between revisions of "ThemePort:step two"

From GeeklogWiki
Jump to: navigation, search
 
m (→‎Step Two: Modifying the CSS)
Line 1: Line 1:
 
== 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:
+
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:
 
The CSS syntax is made up of three parts: a selector, a property and a value:
Line 9: Line 9:
 
selector {property: 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:
+
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}
 
body {color: black}
Line 17: Line 19:
 
p {font-family: "sans serif"}
 
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.
 +
The example below shows how to define a center aligned paragraph, with a red text color:
  
 
p {text-align:center;color:red}
 
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:
 
To make the style definitions more readable, you can describe one property on each line, like this:
  
−
p<br>
+
p
−
{<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
 +
grouped all the header elements. All header elements will be displayed in green text color:
  
 
h1,h2,h3,h4,h5,h6  
 
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:
 
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.   
 
'''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.   

Revision as of 16:55, 14 August 2007

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 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: 

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
}


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

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

and paste it into style.css right after

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
*/

4. Copy

* { margin: 0; padding: 0; }

and paste it after

/* SEMANTICS '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/

5. Copy all the properties:values (everything within the { }) from the body selector

background: #CCCCCC;
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #333; 
	text-align: center;

and paste it into the body selector in style.css, overwriting its previous properties:values. So it looks like this: 

body {
background: #CCCCCC;
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #333; 
	text-align: center;
}

6. Copy

a, a:visited {
	text-decoration: none;
	color: #4F82CB; 
	background: inherit;
}
a:hover {
	color: #4EBF37;
	background: inherit;
}

and paste it overwriting: 

a:link {
  background:transparent;
  color:#0000FF;
}
a:visited {
  background:transparent;
  color:#800080
}
a:hover {
  background:transparent;
  color:#008000
}
a:active {
  background:transparent;
  color:#FF0000
}

We also will change the look of the non-ul links as well by changing: 

a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
  color:#000000;
  background:transparent;
  text-decoration:none;
}

to: 

a:link.non-ul,
a:visited.non-ul,
a:hover.non-ul,
a:active.non-ul {
  color:#FFF;
  background:inherit;
  text-decoration:none;
}

The above change will be used in step one of the next section, Step Three - Modifying the Header.

7. Copy 

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; 
}

and paste it overwriting: 

h1 {
  font-size:125%;
}
h2 {
  font-size:100%;
}
h3 {
  font-size:100%;
  margin:0px;
}

8. Copy 

img {
	border: 2px solid #CCC;
}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

and paste it overwriting: 

img {
  border:0;
}

9. Copy 

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}

and paste it after: 

h3 {
	font-size: 110%;
	color: #666666; 
}

10. Copy 

ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
	color: #88ac0b;	
}
ul span, ol span {
	color: #666666;
}

and paste it after: 

select {
  color:#000000;
  font-size:.9em;
}

11. Copy 

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;    
}

and paste it after: 

body {
background: #CCCCCC;
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #333; 
	text-align: center;
}

12. Copy 

form {
	margin:10px; padding: 0 5px;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 
}

and paste it overwriting: 

form {
  margin-top:5px;
  margin-bottom:5px;
}

13. Copy 

label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}

and paste it after: 

input,
submit,
td {
  color:#000000;
}

14. Copy 

input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}

and paste it overwriting: 

input {
  font-size:.9em;
}

and then delete the 'input,' out of the line: 

input,
submit,
td {
  color:#000000;
}

15. Copy 

textarea {
	width:400px;
	padding:2px;
	font-family: Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}

and paste it overwriting: 

textarea {
  color:#000000;
  font-family:arial,sans-serif,verdana,tahoma,helvetica;
}

16. Copy 

input.button { 
	margin: 0; 
	font: bolder 12px Arial, Sans-serif; 
	border: 1px solid #CCC; 
	padding: 2px 3px; 
	background: #FFF;
	color: #88ac0b;
}

and paste it after: 

input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}

17. Copy 

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;
}

and paste it after: 

form fieldset div.notes p.last {
  margin:0em;
  padding-bottom:5px;
}

18. Finally copy the remaining code in Refresh.css: 

/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
   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; }

and paste it at the bottom of style.css after: 

.poll-vote,
.poll-vote-results {
  background:transparent;
  color:#000000;
  font-size:smaller;
}

It is also a good idea to change: 

/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
   LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/

to: 

/''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
   REFRESH SPECIFIC LAYOUT
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''/

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: 

background: #FAFAFA url(quote.gif) no-repeat 5px 5px;

change it to: 

background: #FAFAFA url(images/quote.gif) no-repeat 5px 5px;

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.)

Template: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:Step One - Preparation
Next up:Step Three - Modifying the Header

Retrieved from "http://gwiki3.thatlinuxbox.com/index.php?title=ThemePort:step_two&oldid=4309"