Well, I decided to revisit the modding of the drigg theme due to the last one not being so clear. That and every time I go to post a follow up on the drigg forum, it never shows up.
I decided I'll be working on the base.css located in /sites/all/themes/drigg_theme/css.
A Couple good links:CSS Cheat sheetCheat SheetsNote: The above links were found after I made these posts and have cleared things up a lot for me. I suggest taking a look at the CSS Cheat sheet.
I think I'll put my findings in a series or articles, as to do all of it at once could be overwhelming.
Unfortunately I have to use a windows computer to do some of the work. I'll be using
paint.net to mod some art and get art info. I also downloaded and installed some
plugins. (check out buttons..kinda cool!)
So one of the first things I did was set some of my configurations per this write up
here.The next thing I did was install
ColorZilla firefox addon to help me with art color.
ColorZillaI've been using ColorZilla to pull colors from web sites I like. It's very easy to use and provides all the needed info.
Here is an example:
Say I go to google.com and I like the green that is being used in the l
I click the small eyedropper in the lower left corner of firefox
Select Google and hover my mouse over the green l
Now if you look at the eyedropper, it will give you all the info you need.
I usually make note of the Hex value (#007D08) for use when I'm ready.
So....let's see what we can do with the base.cssHere is what the default Default drigg looks like.
Now let's change it.
Open base.css located in /sites/all/themes/drigg_theme/css with a good text editor. (For windows folks, I suggest
Notepad++)
The first line we see is this:
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}
So if we mod the background-color: It will change the background color of the site.
For example we will use the green we pulled from google.
So lets change background-color: #fff; to background-color: #007D08;
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #007D08;font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}
This is what we get.
Note: All changes in each example will be marked in bold. Once each example is complete, I will manually restore the default settings. For example...The example above will be changed back to background-color: #fff;
Ok now lets change something else, like the the font size and color.
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 15pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #007D08;}
Next line we see in the base.css is
#container {
margin: 0 auto;
min-width: 760px;
max-width: 1260px;
}
I have no idea what it is, or what it does so lets move on....shall we.
The Links area will modify most links, I'm just going to change color, and text decoration.
/* Links */
a {
color: #007D08;text-decoration: underline; }
a:hover { text-decoration: underline; }
As you can see, it placed an underline under My Account, Users by karma, Create content, blah, blah, blah and turned them green as well as a few other things.
The next few sections I'm going to skip because once again I do not know what they do. So let's move on the the Header section and play with paint.net.
Let's add our own header art.Note: The header section is a bit difficult to explain, but I will try my best.
One of the things I had to do was delete the header_logo.gif located in the img directory to get rid of the drig logo. You can just change the name of it if you want.
For this next part I used the sun.jpg image from the
grassland theme. (pixel size 670X146)
I converted the image file from a .jpg to a .gif using paint.net. (I'll let you figure that one out. For more info look at the quick paint.net lesson below.) Take note of the pixel size of your image located in the bottom right corner.
Next I added the image to the img directory and renamed it to header_titlebg.gif
I then had to edit the Header section until I was happy with the end result.
Note: If the image does not show on your site when you place it in the img directory, make sure it has the right extension and the read permissions.
Here is a screen shot before changing the "height: 100px;" in the header section.
Now the change:/* -- Header -------------------------------------------------------------- */
#header_title {
background: url("../img/header_titlebg.gif") repeat-x top left;
height: 146px;padding: 0 20px;
}
Here it is with the change:
Next thing you'll notice is if you put your mouse in the top of the left corner, there is a link where your site name should be. The site name will not show even if you enable it in the themes settings. I'll get to this in a moment.
Before we go into this a bit more, please go into Administrator-Site Building-Themes
Click on configure for the drigg theme. Ensure Site name, and Site slogan are enabled. Save.
Now lets jump to this section in the base.css and look at the bold part.
#header_title h1 a {
display: block;
width: 220px;
height: 100px;
background: url("../img/header_logo.gif") no-repeat top left;
text-indent: -1000em;overflow: hidden;
text-decoration: none;
outline: none;
}
Change text-indent: -1000em; to text-indent: 0em;
Your site name should now show up.
The problems I currently have with the site name is I don't have any idea how to move it down from the top, change the font, or change the color. Any ideas??
Note: This next section defines the box size for you site in the top left corner.
Ok...so now let's look at that section a bit more
#header_title h1 a {
display: block;
width: 220px; height: 100px;background: url("../img/header_logo.gif") no-repeat top left;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}
The two spots marked in bold control the size of the box the site name will be in. If it is too small it will cut parts of the site name. I changed mine to
width: 125px;
height: 30px;
Lets look at #header_title h1 now.
#header_title h1 {
margin: 0;
width: 220px;
height: 100px;
}
From what I can tell, if you modify the height: 100px; it will move you slogan up or down.
So on with paint.netA quick lesson with paint.net. I'm going to mod the header_titlebg.gif, mainly because I will be deleting it to use something else when we get to that point.
I should have took screen shots of the header_categoriesbg.gif being modded but I already took the screen-shots of the header_title.gif....yeah, I messed up. So if you are following this, I would use the header_categoriesbg.gif in place of the header_titlebg.gif. (The header_categoriesbg.gif is the deep blue color where your categories area)
Start paint.net and open header_titlebg.gif located in /sites/all/themes/drigg_theme/img (in windows (\sites\all\themes\drigg_theme\img)
Once you have the file open, you will see a box in the bottom left corner that says color and has a button on it that say "More"
Click on "More".
You will notice there is an area for a hex number. I'm going to use the green we pulled from google. Once thats added the primary color will change to green. Now click on the bucket so the image can be filled. Once the bucket is clicked, dump the color on the image by clicking on the image.
Now let's save it. Make sure the dithering level and Transparency threshold is set to 0 when saving.
Lesson done.....lets move on.
Using the directions above I modified the header_categoriesbg.gif and placed it into the img directory.
I also did the same to the header_submitbtn.gif, header_searchbtn.gif, and header_loginbtn.gif.
I'm gonna skip over most of the /* Drupal Primary Links Menu */ section but give you an idea of whats going on there.
Primary links are located in the top right corner of the site. The section posted below will change the link color.
If you want to remove the underlines just replace text-decoration:underline; with text-decoration:none;
ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
display: block;
margin: 0 1em;
padding: .4em 0 0;
color: #00446b;text-decoration:underline;
On to Search!All there is to this section is moving the search box up or down, (If it is enabled in Administrator-Site Building-Themes) All you need to do that is change the "top: 30px;" value.
If you need to move it to the left of the screen change the value "float" example: float: left;
#header_search {
clear: right;
position: relative;
top: 5px; float: right;
}
Now lets look at #header_search form input.form-text { section.
#header_search form input.form-text {
border: 0;
background-color: #fff;
height: 17px;
width: 139px;
margin-right: 1px;
padding: 1px 0 0 1px;
border: 1px solid #66a6c8;
color: #333;
outline: none;
}
This area lets you modify a lot of things on the search box.
background-color: #fff; If you change this it will change the color inside the search box
The height and width section lets you control the size of the search box its self.
height: 17px;
width: 139px;
border: 1px solid #66a6c8; hmm how to explain this....well there is a 1pixel box that is wrapped around the search box. You can increase the size of that box and change the color of it.
color: #333; lets you change the color of the text being entered into the search.
Lets look at #header_search p { a moment
#header_search p {
clear: left;
margin: 0;
text-align: right; If you modify this section, the text will aligned to the left or right inside the search box.
font-size: 8pt;
}
The following two sections below are a lot like the #header_title h1 a { section posted above, so I'm not going to spend any time on this.
The #header_search form input.form-submit { controls the submit button for search.
#header_search form input.form-submit {
border: 0;
padding: 0;
background-image: url("../img/header_searchbtn.gif");
width: 30px;
height: 20px;
overflow: hidden;
text-indent: -1000em;
word-spacing: 10em;
}
/* Header login and submit buttons */
#header_categories a.drigg-login,
#header_categories a.drigg-submit {
float: right;
margin-left: 10px;
display: block;
border: 1px solid #fff;
border-top: 0;
border-bottom: 0;
background-repeat: no-repeat;
background-position: top left;
height: 30px;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}
Once you play around with this stuff a while, you start to see a pattern and have a good idea what each section will do just by looking at it.
I'm gonna stop here and I'll return in a day or two with some more stuff. If you have questions, feel free to ask. I don't know how much help I'll be, but I have no problem trying to help you.
