ThemePort:step two
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:
'''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<br>
{<br>
text-align: center;<br>
color: black;<br>
font-family: arial;<br>
}<br>
'''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
