WPG2 Sidebar block: dtree spacing issue

aharami

Joined: 2007-04-16
Posts: 47
Posted: Fri, 2007-10-19 19:11

I enabled WPG2 Album Tree in my Wordpress K2 sidebar block. While it's working fine, I have an issue with the spacing between each node. Take a look at this pic

[img]http://pics.apartment808.com/users/aharami/wpg2_dtree.jpg[/img]

I want to get rid of the extra spaces between each node and make it look like the connectors are touching the parent folder image or the connector above it. Basically get rid of the spaces indicated by the red arrows.

I thought I could fix it by stretching the "connector" images, but that didnt work. I tried fixing it by changing line height and padding under .dtree in wpg2.css but that didnt work unless I did something wrong (CSS newb here).

Anyone have any ideas to fix this "issue"?
 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Tue, 2007-10-23 00:00

anyone?
 
capt_kirk

Joined: 2006-01-24
Posts: 492
Posted: Thu, 2007-10-25 20:15

I used Firebug (see this thread for more info on how to use it) to look at your CSS. You have an entry in your WordPress style.css that looks like

Quote:
.secondary ul, .secondary ol, .secondary div div {
margin:5px 0pt 0pt;
padding-left:0pt;
}

The 5px in the margin entry is doing it. But if you change it to 0px, it changes the rest of your theme. The root issue is that the WordPress style sheet is getting loaded after the WPG2 style sheet, so WordPress's style sheet wins. I'd fix it by adding in the dtree CSS at the end of your WordPress style.css. It will be redundant, but since it will load last, it will predominate and win the style fight.

Quote:
/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö |
|--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
white-space: nowrap;
line-height: 1em;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website