Drigg Themes

So I have been playing around with drigg and need a new theme for the site I'm messing with. A few things I have noticed - the forums are very, very slow; so help is limited from there. The other thing is there is no real direction on how to port, or modify themes. I found this little tidbit over here but makes absolutely no sense to me. I also found this here that helped a bit, but not everything I was looking for.

So what I have been doing is taking the default drigg theme and modding it.
Note: All these mods will effect the front page attributes.
One of the first problems I had was the art. I tried to use the gimp but could not achieve what I wanted. Unfortunately I had to use a windows machine (it hurt a lot) and install paint.net.
Because I know nothing about art, I needed something brain dead easy....seems paint.net did it.

So to start, I played around a little by changing the header_titlebg.gif with a different image. Well, needless to say it took me a while to realize I had to change the format of the image to a gif. Once I did that, all went well.

Once I uploaded the new header_titlebg.gif, I noticed I couldn't get rid of the drigg logo. I tried to uncheck the logo box from Admin/site build/themes on the drigg theme, and under the global settings, but it wouldn't go away. So I decided to just delete the header_logo.gif....that seemed to work.

My next problem was the new header_titlebg.gif wasnt being shown correctly. A lot of the image was being covered by the header_categoriesbg.gif.
I solved that problem by editing the base.css file in the bold section below.
Note: In order to correctly see this, you need to know the hight pixel size of the image you are using.

/* -- Header -------------------------------------------------------------- */
#header_title {
background: url("../img/header_titlebg.gif") repeat-x top left;
height: 145px;
padding: 0 20px;
}

Next thing I wanted to do was move the Search box a little.
NOTE: The search box will only be available if you have enabled the search module, and enabled search in the themes section as well.

Once again I had to edited the base.css in the section that is bold.
Note: this section will just move the search box up or down, if you need to move it left of the screen change the value "float" example: float: left;

#header_search {
clear: right;
position: relative;
top: 5px;
float: right;
}

If you need to move the slogan up or down edit the section (You would think height would be the height of the slogan)
#header_title h1 {
margin: 0;
width: 220px;
height: 100px;
}

If you are uploading a new logo, edit the width and height to match you logos pixel size.
#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;


One other thing I waned to change was to remove the drigg icon in the left bottom corner. I ended up deleting it from the img directory. Once thats done I notice a link that says "Drigg" in that same spot.
If you want to modify that you can edit the page.tpl.php in the footer section below

<div id="footer">
<?php print $footer_message; ?>
<a href="http://www.drigg-code.org"><img src="<?php print path_to_theme()?>/img/drigg_80_15.gif" alt="Drigg" /></a>
</div> <!-- /footer -->


Color Changing

These are some areas in the base.css file that can be changed to set colors for different parts of the page.
NOTE: If you need a tool for your color in hex look here

Background color of the site
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;


Font Color of story summary on front page, notice you can change the font size (font:9pt) as well
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}

Menu links such as "My Account", "Users by karma", "Create Content", "Log Out"

/* Links */
a {
color: #CBE50A;
text-decoration: none;

With the code below you can set the size and the color of the fine line that runs under "Home>>Scoops" that is below the header_categoriesbg.gif

/* Header breadcrumb */
#header_breadcrumb {
clear: left;
height: 30px;
line-height: 30px;
padding: 0 20px;
font-size: 8pt;
color: #666;
border-bottom: 1px solid #1b81ca;
}

Now onto the blocks.css
To change the attributes of the users name that is in the left corner of the screen just above "My Account"

we would change the settings listed below.
.block { margin-bottom: 2.5em; }
.block h2 {
font-size: 12pt;
color: #00446b;
letter-spacing: -1px;
margin-top: 0.4em;
}

To change the attributes of the lines that are under the "My Account", "Users by karma", "Create Content", "Log Out"

we would change
.block ul li, .block ol li {
border-bottom: 1px solid #e5e5e5;
padding: 0.2em 0;
}

nodes.css
To change the attributes of the user information that sits below the story the user submitted, (Created by User 3 weeks 4 days ago – Made popular 3 weeks 4 days ago
Category: Tech Tags install itechtalk.com Windows 7 Solar you would edit.)
Note: Your will look a little different.

You would edit:
/* -- Base node ----------------------------------------------------------- */
.node {
clear: both;
padding: 15px 0;
margin: 0.5em 0 0.3em 0;
}
.node h2.title { margin: 0; }

/* Content */
.node .content { margin: 1.5em 0; }

/* Story data */
.node .storydata {
font-size: 8pt;
color: #888;
}
#content_center .node .storydata a { color: #666; }

To change attributes of the "Add New Comment" and the Vote edit:

/* Links */
.node div.links {
clear: left;
font-size: 8pt;
}

To change the font color of the link next to the submitted story (The link that is directly under the Title of the submitted story, and next to the image of the number of votes)

/* Karma box, offset box and story */
.node.ntype-drigg .karma_3_big,
.node.ntype-drigg .karma_4_big { float: left; }
.node.ntype-drigg .offset { margin-left: 60px; }
.node.ntype-drigg h2 { margin: 0; }
.node.ntype-drigg a { color: #005a8e; }
.node.ntype-drigg a:visited { color: #7facc6; }
.node.ntype-drigg .story * { display: inline; }
.node.ntype-drigg .story small a { color: #666; }
.node.ntype-drigg .story p { margin: 0; }

That's all I have figured out so far, so if anyone has anything they want to add, please post it to the drigg theming forum.