moving sideboxes around

[stevesh]

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

[familynow]

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.

[stevesh]

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.)

[familynow]

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.

[gjh42]

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.

[familynow]

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

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

[familynow]

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?

[gjh42]

% 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.

[familynow]

Like this?

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

#mainWrapper {position: relative;}

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

[gjh42]

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