moving sideboxes around

Hi.

I recently installed crafty syntax and it's working well so far. I'm just wondering how to change the position of the sidebox.

I've read various posts on it but I can't seem to find a specific explanation/tutorial on how to position sideboxes in places other than their defaults. It would be nice to know for future reference. But in this case I want the box to go from the left column up by the shipping ad / currency boxes.

some bg info:

ZC 1.3.9h
CSLH 2.14.6

The layout boxes controller in the admin under Tools will help you maneuver the boxes. Just change left, right, or sort order as needed.

Yeah. I've already played with those...I can move the box by reordering with the numbers and do left/right but I want it up in the header beside the shipping and currency.

Perhaps a link to your site could help find an answer. Something like yoursiteDOTcom if you don't want the search engines to pick it up.

One way to place a sidebox in the header is to use absolute positioning. You can't change the width of that sidebox from the width of the others in that column, though.

I read that somewhere but didn't understand which css file to edit and how to apply it in the div.

I think the width limitation won't be a problem for this particular box.

If the sidebox has (or can have) its own rule in the stylesheet, it would go something like this:

#sideboxname {position: absolute; left: XXpx; top: YYpx; }

where XX is the number of px from the left side of the header and YY is the number of px from the top of the header.

A link would let us advise more specifically.

Yeah. That's about where I'm at. I can't figure out if that box can have an entry and in what file it would be called from.

I found this in the tpl_craftysyntax_sidebox.php file. Would this be where I'd refer back to the css?

--More--
/div
...skipping
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="craftysidebox">';
$content .= '<script type="text/javascript" src="' . $cs_link . '"></script>';
$content .= '</div>';
?>

Sorry, this might be completely clueless of me...even after years of hacking around various sites I still don't get web design very much...

Probably. The class is craftysidebox, so the rule would be .craftysidebox {etc.}

Well, if you're stating that on the basis of what I pasted then possibly not...I added the class thinking It wouldn't be so hard to find the css to call it from. Unfortunately, I never did find the correct file.

A link to the site would make it easy to figure out.

For future reference, install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

Sure. I'm just hesitant about the link because I don't want it out there since the site isn't going to reside at that URL. On that note, please don't copy or redirect anyone to this URL.

familynowDOTcaSLASHshop

So to reiterate, I'm trying to find a way to get the crafty syntax sidebox up by the currency/cart/shipping boxes with disrupting the rest of the template.

Add to the bottom of your stylesheet_tm.css:

#craftysyntaxsidebox {position: absolute; top: 100px; right: 46%;}

Adjust to taste.
You can also adjust the width of the sidebox by adding to that rule

width: 123px !important;

Again, adjust to taste.

Perfect! Now I can just plant it wherever I want....Awesome.

Thanks to everyone who helped. I appreciate it very much.

As it turns out the positioning only works perfectly for Chromium(I'm on Linux).

If I load up the page in FF or IE it's not in the same place at all.

Would it make a diff if I used % instead of px? ...What am I doing wrong?

% for height would probably not be a good idea, as the screen or page height will change. Your reference container is currently the entire window, so the horizontal position and possibly the vertical position are dependent on the browser. If you give #mainWrapper position: relative; the sidebox absolute position will be relative to the borders of that, and possibly more uniform in behavior.

Like this?

/* ============== Crafty Syntax Sidebox =============================*/
#craftysyntaxsidebox {
position: absolute;
top: 45px;
right: 725px;
width: 130px !important;
}

#mainWrapper {position: relative;}

#craftysyntaxsidebox .box-head {display: none;}

That's right:)
You will need to adjust the top and right values to match the new container.