Geeklog Forums

I've started to port a new theme called Greenery. It is another interesting layout from Open Source Web Designs. All credit goes to the original author(s). Click below for a full-size screenshot:

Screenshot

This one struck me with the image down the center. It really helps to draw your eye down the page. I can visualize some interesting variations where the image will transition into the background color, giving the effect of the end of a brush stroke. You only need to change 2 images and the link colors to give it whatever feel you want.

To see it in action, check it out at my test site lab.familycorner.us.
There is a theme discussion thread at http://www.gllabs.org/forum/viewtopic.php?showtopic=5774

If anyone has some CSS expertise, I'm needing a little help. I am struggling getting the block help icon in place just to the right of the block header name. Whatever I do makes it appear either above or below the name (applies also to the email/print icons in the stories, but they need to float far right.) This is happening on multiple themes, so I think it might be a GL thing, not specific to each layout. Also, it seems like the left blocks are overflowing down into the footer. (For example, look at this page.) But it is not happening when the right blocks are the farthest thing down.

Anyone have any ideas?

I am at a point where I am ready for some other eyes to look things over. I figure more eyeballs will hopefully be able to catch something I didn't. PM me if you are interested in beta testing this theme, and can possibly help with the remaining issues. I will send ya a download link.

Thx!

-Eric

---

Synergy - Stability - Style --- Visit us at glfusion.org

try removing/adjusting the margin/padding on the block title which is prolly an <h1> or an <h2>. With margin/padding set, the icons will float to the top of the line height. Remove the margin/padding will reduce the line height and the icon will come down. Or you could adjust the line height, but I've not tried that.

oh, and re your columns flowing over onto the footer: see these pages>>http://cross-browser.com/x/examples/layout3.html and http://cross-browser.com/x/examples/layout2.html.
Old pages but useful. Using DHTML to even out your column lengths and keep the footer in the footer.

Thx machinari for the helpful link! :shakehands:

I will look into implementing those changes, and post back here with my results!

-Eric

---

Synergy - Stability - Style --- Visit us at glfusion.org

machinari,

I followed the directions for implementing x.js, but I still get the leftblocks in the footer. I'm wondering if it has something to do with the {left_blocks} call, instead of just being plain content. I've tried placing the id="leftcontent" call both on the outside and on the inside of the call, with no luck.

If you have a moment, would you check things over. I'd be very grateful. I'll PM you a link to grab the theme code.

Thx!

-Eric

---

Synergy - Stability - Style --- Visit us at glfusion.org

an easy fix and i tested it so i know it works.
First: You have the right idea, but neglected to wrap the left and right column content in the divs that the script is looking for and can use for resizing based on the longest natural length. I know that you wrapped them in "textcontent" "leftcontent" and "rightcontent," which are utilized for obtaining the natural height of the columns. ...But what about assigning lengths to those columns? The script assumes that your left and right column's content is all contained within a single div already (ie, before you added the wrapper div called for to obtain the natural heights). So you need to identify another wrapper for those columns, or do like I did (I cheated) and use the same id's for the second part as you used for the first part--as follows:
See what I did? I used the same identifiers for the columns used to get the natural height as I using for the columns that the new heights are going to be applied to. I've tested it both ways and it works.

Finally: so that your footer doesn't appear prematurely, set its visibility to hidden in your style sheet. Otherwise it appears as it does now (underneath the columns) until the script has a chance to display it properly.

I hope I explained it well enough.

oh, and you'll have to vertical-align your right column to the top. if the right column is the shortest, it seems that the content of that column sits at the bottom of the column just above the footer due to the new height. again, an easy adjustment.

Machinari,

Thank you so much for the suggestions. I've added them, but I still get the right blocks rendering below where the textcontent ends, (even after adding the vertical-align:top. I am thinking that since it resizes all 3 elements, the final larger leftblocks are spilling over into the 3rd column top (essentially pushing the rightblocks down). Have a look.

I'm not 100% sure if this is the case, but it looks to be so when I look at the style information with the Firefox Web Developer plugin (it highlights div blocks and other info right in the browser window).

You mentioned that you've tested it and it works on your end. Can you please share a link with me so I can compare. :pray: Either here in the forum or via PM would be great.

Again, I appreciate all your help and your continued patience with this fledgling contributor.

Thx!

-Eric

---

Synergy - Stability - Style --- Visit us at glfusion.org

I see what you mean. My guess (after only a bit of rearranging) is that your left and right columns, which are side by side and on the right of your main content column, should be positioned absolutely in order to accommodate the script. What's happening now is what seems to be a doubling of one of the lengths due to a floated div (or something like that).

I suggest that you try taking those two columns out of the document flow and position them absolutely. Leave the main content area in the flow so the footer will follow it.
e.g.:That's just and example of main content divs after your header with all page content falling somehow within them, including the image in the leftcolumn (and i use that term lightly). Of course measurements will be according to your layout.

and all of that just to accommodate this script. There are probably other solutions if this one becomes to much of a hassle.