Where to put in Forum Wrapper?

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

I want to put the respective image of the chakras in the top right-hand corners of the themes that I am making. In the end, I would like it in the same place that the floating shamrock is in townsquareexiles.boards.net.

I was wondering where in the Forum Wrapper you put images so that they're outside of the forum itself, but still on the page, much like the shamrock.

Thanks so much!

[Kami]

Hi Alan Vende (:

It's a little bit more in-depth than just sticking the image somewhere, but not too complex! Put your image just after the <div id="wrapper"> tag, and give it a class, say "cornerimg".

In your stylesheet, you'll want to put either this, if you want the image to scroll with the forum (so that it stays at the top by the banner and "disappears" when you scroll):

.cornerimg { position: absolute; top: 0%; right: 0%; }

Or, this, if you want it to not move at all (so it is visible even if you scroll):

.cornerimg { position: fixed; top: 0%; right: 0%; }

If the image winds up under overlapping content that needs to be able to let the user interact with it, simply add a z-index: X after right: 0%;, where X is a positive number greater than one. For ease, I tend to put 999 because that ensures that it will be on top even if there are 999 other things that overlap. (:

[Alan Vende]

Thanks so much, Kami!

I'm playing around with the right alignment. My only other question, so I can get the alignment correct, how would I make it so my forum is a bit smaller, kind of like with Town Square Exiles. I noticed that since my forum isn't like that - compact like that, I would have to change the forum and make it a bit "smaller".

If you look on my forum, the purple theme that I'm working on should be the default, and you should see that you have to scroll ab it to the right to see the whole image, right?

Thanks for your help

[Alan Vende]

Sorry about that; my forum is here: psychic-psyghtings.proboards.com

[Kami]

Try placing it before your forum wrapper opening tag, that should allow it to be seen as a whole without modifying the width of your forum, I think.

[Alan Vende]

From what I'm seeing, it doesn't look like it did, but I feel silly because I tried every number but 0 for the right, and 0 was what I wanted to have it so it's completely to the right without having to scroll.

And I tried both of your codes, and for some reason neither made it scroll with the page. I'm going to try them again, though.

[Alan Vende]

Actually, I got that part, for some reason it didn't save correctly -- I guess I went out of the window to quickly. If you visit the page now and try to scroll, what I'm seeing is that the very left edge is a bit into the forum itself. Do you see what I'm talking about?

[Kami]

Alan Vende - let's clear up some terminology.

Scrolling with the page - means that it stays up top by the banner and scrolls when the page scrolls. If the page moves down, the content will move with it and if you scroll past it it won't be visible.

Fixed - means that it stays where it is regardless of whether or not the page is scrolling so that it's always visible.

For me, your image is currently fixed and adjusts itself to overlap with your forum depending on the width of my browser (since your width is fluid). The horizontal scrollbar no longer appears for me.

EDIT: Alan, this overlap is based on the width of your browser (or monitor if your browser is full screen). On my screen, it does not overlap when I have the browser maximised at 1920px wide. If you want no visible overlap to you, you'll need to make a smaller image. That said, that would only work if everyone has your screen resolution or larger. If you want it more universal, then use a fixed width for your forum.

[Alan Vende]

You said in your original post for z-index: X. I didn't see that until now. Let me try that. Sorry about that!

[Alan Vende]

The z-index: X fixed the problem I had with the header, but it still looks like it's overlapping the forum itself. Maybe I'm looking at something wrong?

[Kami]

Mar 16, 2015 14:23:25 GMT -8 Alan Vende said:

The z-index: X fixed the problem I had with the header, but it still looks like it's overlapping the forum itself. Maybe I'm looking at something wrong?

Z-index is a layering tag. So if you had four elements you wanted to have overlap, z-index would determine the order in which they do so; the highest number will be on top. here is a demonstration.

The reason it overlaps your forum is because your forum is set to a fluid width, while the image is a static size. The way fluid width works is your forum is set to be a percentage of your browser window; if you have, say, a width of 90%, the actual pixel space it takes up varies based on the total width of your browser. If your width is 1024px, your forum will be ~922px wide. If your width is 1920px (like mine), the forum will be 1728px wide.

Now that you've added an image outside the constraints of your forum's width, there will be overlap if the width of your forum + the width of the image is larger than your browser's width.

If your forum is 922px wide because your browser width is 1024px, and your image is 200px wide, the total width without overlap would be 1122, so you'd overlap.

Does this make sense?

[Alan Vende]

The z-index, does, yes; thank you!

I'm on a mac, and when I attempt to move my browser window, the Support forum "follows" what I'm doing -- constricting if I come inward and going back to "regular" size when I maximize the window. Would this be an example?

[Kami]

Mar 16, 2015 14:36:17 GMT -8 Alan Vende said:

The z-index, does, yes; thank you! :)

I'm on a mac, and when I attempt to move my browser window, the Support forum "follows" what I'm doing -- constricting if I come inward and going back to "regular" size when I maximize the window. Would this be an example?

Yeah, that is because the theme you are using is fluid in width. If your browser window becomes smaller, the forum adjusts so that the width is whatever % is specified.

To position an image this way, it will always risk overlap because the image is positioned around the browser, not the forum. Does that make sense? You can make the image smaller or make the forum a fixed width, but it will always be positioned relative to the browser's size. Having a fixed width form will make it easier for you to prevent overlap if you go with a size catering to the lowest common denominator of used widths, but it won't be 100% foolproof.

[Alan Vende]

That makes sense.

I was playing around with the forum itself, though, and changed the width to 85%, which is only 5% from what it was before (the original - 90). That took away the overlay. It worked with the CSS you gave me, too.

Thanks for your help, Kami!

[Kami]

No problem (: Any time.